Echarts

Posted on Edited on

动态数据

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
//view
 <div style="width: 100%;height:700rpx;" ref="bar"></div>
//script
data(){
     option: {
        tooltip: {},
        dataset: {
          dimensions: ["teamGroup", "oeeRate"],
          source: this.monthsData, //主要数据(后台返回值)
        },
        xAxis: {
          type: "category",
        },
        yAxis: {},
        legend: {
          show: false, //图例不展示
        },
        series: [
          {
            type: "bar",
            // data: [5, 20, 36, 10],
            itemStyle: { //柱状图上的值
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#999",
                    fontSize: 14,
                  },
                },
                color: (params) => {
                  const colorList = [
                    "#df6e6a",
                    "#83bfdb",
                    "#599f76",
                    "#ed895d",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      },
},

  watch: {
    option: {
      handler(newVal, oldVal) {
        if (this.monthsData.length > 0) {
          this.$nextTick(() => {
            const myChart = this.$echarts.init(this.$refs["bar"]);
            if (myChart) {
              if (newVal) {
                myChart.setOption(newVal);
              } else {
                myChart.setOption(oldVal);
              }
            }
          });
        }
      },
      immediate: true,
      deep: true,
    }
  }

动态数据,包含初始化

适用于多个 div 导致报错问题

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
  public option: any = {
    title: {
      text: '',
      left: 'center',
      x: 'center',
      y: 'top',
      subtext: '',
    },
    grid: {
      left: '14%',
      right: '9%',
    },
    tooltip: {
      show: true,
      showContent: true,
    },
    // legend: {
    //   show: false,
    // },
    dataset: {
      source: [],
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        // label: {
        //   show: true,
        //   position: 'bottom',
        // },
      },
    ],
  };
mounted() {
    this.init();
    this.getData();
  }

init() {
    this.myChart = echarts.init(document.getElementById(this.id));
    this.myChart.setOption(this.option);
  }

 @Watch('option', { immediate: true, deep: true })
  public handlerOption(newVal, oldVal) {
    if (this.dataList.length > 0) {
      this.$nextTick(() => {
        const myChart = this.myChart;
        if (myChart) {
          if (newVal) {
            myChart.setOption(newVal);
          } else {
            myChart.setOption(oldVal);
          }
        } else {
          this.init();
        }
      });
    }
  }