1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
| <template>
| <div :id="chartId" :style="{'width':'100%', 'height':'100%'}"></div>
| </template>
|
| <script>
| import * as echarts from 'echarts'
| export default {
| props: {
| chartId: {
| type: String,
| default: 'echart'
| },
| chartOption: {
| type: Object,
| default: () => {
| return {}
| }
| }
| },
| computed: {
| screenSize() {
| return this.$store.state.screenSize
| }
| },
| watch: {
| chartOption: {
| handler(newVal, oldVal) {
| this.echartOptions = this.chartOption
| this.$nextTick(() => {
| this.drawEchart()
| })
| },
| deep: true // 对象内部属性的监听，关键。
| },
| screenSize() {
| // console.log(444)
| this.chart.setOption(this.echartOptions)
| this.chart.resize()
| }
| },
| data() {
| return {
| echartOptions: {},
| chart: null
| }
| },
| mounted() {
| // console.log(222)
| this.$nextTick(() => {
| this.echartOptions = this.chartOption
| this.drawEchart()
| })
| },
| activated() {
| // console.log(1111)
| if (this.chart) {
| this.chart.resize()
| }
| },
| methods: {
| drawEchart() {
| // let legendIconWidth = document.body.clientWidth > 1280 ? (document.body.clientWidth > 1440 ? 14 : (document.body.clientWidth > 1680 ? 16 : 14)) : 12
| // 基于准备好的dom，初始化echarts实例
| const that = this
| if (
| //判断是否存在echarts实例化对象,如果存在则销毁
| that.chart != null &&
| that.chart != '' &&
| that.chart != undefined
| ) {
| that.chart.dispose()
| }
| const myChart = echarts.init(document.getElementById(that.chartId))
| myChart.on('click', params => {
| // 控制台打印数据的名称
| // console.log(params.name);
| that.$emit('chartClick', params)
| })
| that.chart = myChart
| // if(that.echartOptions.legend){
| // that.echartOptions.legend.itemWidth = legendIconWidth
| // that.echartOptions.legend.itemHeight = legendIconWidth
| // }
| that.chart.clear()
| // 绘制图表
| myChart.setOption(that.echartOptions)
| setTimeout(() => {
| that.$nextTick(() => {
| myChart.resize()
| })
| }, 10)
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
|
| </style>
|
|
