| | |
|---|
| | | <template>
|
|---|
| | | <div :class="className" :style="{ height: height, width: width }" />
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | // import echarts from 'echarts'
|
|---|
| | | import * as echarts from 'echarts'
|
|---|
| | | require('echarts/theme/macarons') // echarts theme
|
|---|
| | | import resize from './mixins/resize'
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | mixins: [resize],
|
|---|
| | | props: {
|
|---|
| | | className: {
|
|---|
| | | type: String,
|
|---|
| | | default: 'chart',
|
|---|
| | | },
|
|---|
| | | width: {
|
|---|
| | | type: String,
|
|---|
| | | default: '100%',
|
|---|
| | | },
|
|---|
| | | height: {
|
|---|
| | | type: String,
|
|---|
| | | default: '350px',
|
|---|
| | | },
|
|---|
| | | autoResize: {
|
|---|
| | | type: Boolean,
|
|---|
| | | default: true,
|
|---|
| | | },
|
|---|
| | | chartData: {
|
|---|
| | | type: Object,
|
|---|
| | | required: true,
|
|---|
| | | },
|
|---|
| | | interval: {
|
|---|
| | | type: Number,
|
|---|
| | | default: 1,
|
|---|
| | | },
|
|---|
| | | // xdata: {
|
|---|
| | | // type: Array,
|
|---|
| | | // required: true
|
|---|
| | | // }
|
|---|
| | | },
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | | chart: null,
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | | chartData: {
|
|---|
| | | deep: true,
|
|---|
| | | handler(val) {
|
|---|
| | | this.setOptions(val)
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | // xdata: {
|
|---|
| | | // deep: true,
|
|---|
| | | // handler(val) {
|
|---|
| | | // console.log(val)
|
|---|
| | | // this.setOptions(val)
|
|---|
| | | // console.log('执行成功')
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | | this.$nextTick(() => {
|
|---|
| | | this.initChart()
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | beforeDestroy() {
|
|---|
| | | if (!this.chart) {
|
|---|
| | | return
|
|---|
| | | }
|
|---|
| | | this.chart.dispose()
|
|---|
| | | this.chart = null
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | |
|
|---|
| | | initChart() {
|
|---|
| | | this.chart = echarts.init(this.$el, 'macarons')
|
|---|
| | | this.setOptions(this.chartData)
|
|---|
| | | },
|
|---|
| | | setOptions(val) {
|
|---|
| | | function fontSize(res){
|
|---|
| | | let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
|
|---|
| | | if (!clientWidth) return;
|
|---|
| | | let fontSize = 100 * (clientWidth / 1920);
|
|---|
| | | return res*fontSize;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | // console.log('组件设置的数据')
|
|---|
| | |
|
|---|
| | | console.log(val)
|
|---|
| | | this.chart.setOption(
|
|---|
| | | {
|
|---|
| | | title: {
|
|---|
| | | text: val.text,
|
|---|
| | | textStyle: {
|
|---|
| | | color: '#000000',
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | xAxis: {
|
|---|
| | | data: val.xAxis.slice(0, 24),
|
|---|
| | | boundaryGap: false,
|
|---|
| | | axisTick: {
|
|---|
| | | show: false,
|
|---|
| | | },
|
|---|
| | | // axisTick: { // 决定是否显示坐标刻度
|
|---|
| | | // alignWithLabel: true,
|
|---|
| | | // show: true
|
|---|
| | | // },
|
|---|
| | | // axisLine: {
|
|---|
| | | // lineStyle: {
|
|---|
| | | // color: '#000000'
|
|---|
| | | // }
|
|---|
| | | // },
|
|---|
| | | // axisLabel: {
|
|---|
| | | // interval: this.interval
|
|---|
| | | // }
|
|---|
| | | },
|
|---|
| | | grid: {
|
|---|
| | | left: '5%',
|
|---|
| | | right: '5%',
|
|---|
| | | top:'5%',
|
|---|
| | | containLabel: true,
|
|---|
| | | height:fontSize(3.3),
|
|---|
| | | },
|
|---|
| | | toolbox: {
|
|---|
| | | feature: {
|
|---|
| | | dataZoom: {
|
|---|
| | | yAxisIndex: 'none',
|
|---|
| | | },
|
|---|
| | | restore: {},
|
|---|
| | | saveAsImage: {},
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | tooltip: {
|
|---|
| | | trigger: 'axis',
|
|---|
| | | position: function (pt) {
|
|---|
| | | return [pt[0], '10%']
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | // tooltip: {
|
|---|
| | | // trigger: 'axis',
|
|---|
| | | // axisPointer: {
|
|---|
| | | // type: 'cross'
|
|---|
| | | // },
|
|---|
| | | // padding: [5, 10]
|
|---|
| | | // },
|
|---|
| | | yAxis: {
|
|---|
| | | axisTick: {
|
|---|
| | | show: false, // 轴线刻度
|
|---|
| | | },
|
|---|
| | | // axisLine: {
|
|---|
| | | // lineStyle: {
|
|---|
| | | // color: '#000000'
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | },
|
|---|
| | | legend: {
|
|---|
| | | data: val.title,
|
|---|
| | | tooltip: {
|
|---|
| | | show: true,
|
|---|
| | | },
|
|---|
| | | textStyle:{
|
|---|
| | | fontSize:fontSize(0.12)
|
|---|
| | | },
|
|---|
| | | widht:'auto',
|
|---|
| | | height:'auto',
|
|---|
| | | top: fontSize(4.6),
|
|---|
| | | },
|
|---|
| | | dataZoom: [
|
|---|
| | | {
|
|---|
| | | type: 'inside',
|
|---|
| | | start: 0,
|
|---|
| | | end: 100,
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | start: 0,
|
|---|
| | | end: 20,
|
|---|
| | | bottom: fontSize(4.4),
|
|---|
| | | height: fontSize(0.5),
|
|---|
| | | },
|
|---|
| | | ],
|
|---|
| | | series: val.series,
|
|---|
| | | // [{
|
|---|
| | | // name: JSON.parse(JSON.stringify(val.title)),
|
|---|
| | | // itemStyle: {
|
|---|
| | | // normal: {
|
|---|
| | | // color: '#7AC5CD',
|
|---|
| | | // lineStyle: {
|
|---|
| | | // color: '#7AC5CD',
|
|---|
| | | // width: 2
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // },
|
|---|
| | | // smooth: true,
|
|---|
| | | // type: 'line',
|
|---|
| | | // data: val.series,
|
|---|
| | | // animationDuration: 2800,
|
|---|
| | | // animationEasing: 'cubicInOut',
|
|---|
| | | // areaStyle: {},
|
|---|
| | | // label: {
|
|---|
| | | // normal: {
|
|---|
| | | // show: true,
|
|---|
| | | // position: 'top'
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }]
|
|---|
| | | },
|
|---|
| | | true
|
|---|
| | | )
|
|---|
| | | window.onresize = this.chart.resize;
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | | <<<<<<< HEAD |
|---|
| | | <template> |
|---|
| | | <div :class="className" :style="{ height: height, width: width }" /> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | // import echarts from 'echarts' |
|---|
| | | import * as echarts from 'echarts' |
|---|
| | | require('echarts/theme/macarons') // echarts theme |
|---|
| | | import resize from './mixins/resize' |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | mixins: [resize], |
|---|
| | | props: { |
|---|
| | | className: { |
|---|
| | | type: String, |
|---|
| | | default: 'chart', |
|---|
| | | }, |
|---|
| | | width: { |
|---|
| | | type: String, |
|---|
| | | default: '100%', |
|---|
| | | }, |
|---|
| | | height: { |
|---|
| | | type: String, |
|---|
| | | default: '350px', |
|---|
| | | }, |
|---|
| | | autoResize: { |
|---|
| | | type: Boolean, |
|---|
| | | default: true, |
|---|
| | | }, |
|---|
| | | chartData: { |
|---|
| | | type: Object, |
|---|
| | | required: true, |
|---|
| | | }, |
|---|
| | | interval: { |
|---|
| | | type: Number, |
|---|
| | | default: 1, |
|---|
| | | }, |
|---|
| | | // xdata: { |
|---|
| | | // type: Array, |
|---|
| | | // required: true |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | chart: null, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | chartData: { |
|---|
| | | deep: true, |
|---|
| | | handler(val) { |
|---|
| | | this.setOptions(val) |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | // xdata: { |
|---|
| | | // deep: true, |
|---|
| | | // handler(val) { |
|---|
| | | // console.log(val) |
|---|
| | | // this.setOptions(val) |
|---|
| | | // console.log('执行成功') |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.initChart() |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | beforeDestroy() { |
|---|
| | | if (!this.chart) { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | this.chart.dispose() |
|---|
| | | this.chart = null |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | initChart() { |
|---|
| | | this.chart = echarts.init(this.$el, 'macarons') |
|---|
| | | this.setOptions(this.chartData) |
|---|
| | | }, |
|---|
| | | setOptions(val) { |
|---|
| | | // console.log(val,'123'); |
|---|
| | | function fontSize(res) { |
|---|
| | | let clientWidth = |
|---|
| | | window.innerWidth || |
|---|
| | | document.documentElement.clientWidth || |
|---|
| | | document.body.clientWidth |
|---|
| | | if (!clientWidth) return |
|---|
| | | let fontSize = 100 * (clientWidth / 1920) |
|---|
| | | return res * fontSize |
|---|
| | | } |
|---|
| | | |
|---|
| | | // console.log('组件设置的数据') |
|---|
| | | |
|---|
| | | console.log(val, 'eee') |
|---|
| | | this.chart.setOption( |
|---|
| | | { |
|---|
| | | title: { |
|---|
| | | text: val.text, |
|---|
| | | textStyle: { |
|---|
| | | color: '#000000', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | data: val.xAxis, |
|---|
| | | boundaryGap: false, |
|---|
| | | axisTick: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | // axisTick: { // 决定是否显示坐标刻度 |
|---|
| | | // alignWithLabel: true, |
|---|
| | | // show: true |
|---|
| | | // }, |
|---|
| | | // axisLine: { |
|---|
| | | // lineStyle: { |
|---|
| | | // color: '#000000' |
|---|
| | | // } |
|---|
| | | // }, |
|---|
| | | // axisLabel: { |
|---|
| | | // interval: this.interval |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | left: '5%', |
|---|
| | | right: '5%', |
|---|
| | | top: '5%', |
|---|
| | | containLabel: true, |
|---|
| | | height: fontSize(4.3), |
|---|
| | | }, |
|---|
| | | toolbox: { |
|---|
| | | feature: { |
|---|
| | | dataZoom: { |
|---|
| | | yAxisIndex: 'none', |
|---|
| | | }, |
|---|
| | | restore: {}, |
|---|
| | | saveAsImage: {}, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | position: function (pt) { |
|---|
| | | return [pt[1], '-13%'] |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: fontSize(0.117), // 字体大小 |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | yAxis: { |
|---|
| | | axisTick: { |
|---|
| | | show: false, // 轴线刻度 |
|---|
| | | }, |
|---|
| | | // axisLine: { |
|---|
| | | // lineStyle: { |
|---|
| | | // color: '#000000' |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | data: val.title, |
|---|
| | | tooltip: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: fontSize(0.15), |
|---|
| | | }, |
|---|
| | | widht: 'auto', |
|---|
| | | height: 'auto', |
|---|
| | | top: fontSize(5.5), |
|---|
| | | }, |
|---|
| | | dataZoom: [ |
|---|
| | | { |
|---|
| | | type: 'inside', |
|---|
| | | start: 0, |
|---|
| | | end: 100, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | start: 0, |
|---|
| | | end: 20, |
|---|
| | | top: fontSize(4.8), |
|---|
| | | height: fontSize(0.5), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: val.series, |
|---|
| | | }, |
|---|
| | | true |
|---|
| | | ) |
|---|
| | | window.onresize = this.chart.resize |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
