echarts轮播

1
2
3
4
5
6
7
8
9
10
11
<div class="main"></div>
//初始化
  init() {
         window.addEventListener(
                "resize",
                function () {
                    this.myChart.resize();
              }.bind(this)
        );
  },

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
chart() {
            // let _this = this;
            this.myChart = echarts.init(document.querySelector(".main"));//初始化挂载
            this.myChart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: 'center',
                    right: '5%',
                    orient: 'vertical',
                    itemWidth: 15,
                    itemHeight: 10,
                    textStyle: {
                        color: '#6DDEFF'//字体颜色
                    }
                },
                color: ['#0596F6', '#FB7494'],
                series: [
                    {
                        name: '总人口',
                        type: 'pie',
                        radius: ['40%', '50%'],
                        center: ['35%', 'center'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            // position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: '男' },
                            { value: 735, name: '女' },
                        ]
                    }
                ]
            })
            //循环高亮
            let index = 0;
            clearInterval(this.timer);

            this.timer = setInterval(() => {
            	//跟图表循环配合使用
                this.myChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0, // serieIndex的索引值   可以触发多个
                });
                //提示语循环
                this.myChart.dispatchAction({
                    type: "showTip", 
                    seriesIndex: 0,
                    dataIndex: index
                });
                //图表循环
                this.myChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: index
                });
                index++;
                if (index > 1) {
                    index = 0;
                }
            }, 3000);
        }

1
2
3
4
5
beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },

1
2
3
4
5
    mounted() {
        this.chart();
        this.init();
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  watch: {
        'data': {
            handler(newv, oldv) {
                // console.log(newv, '2222');
                this.$nextTick(() => { //这里需要重新加载渲染
                    this.dataList = [
                        { value: newv.rksx, name: '18岁以下' },
                        { value: newv.rksr, name: '19-65岁' },
                        { value: newv.rksz, name: '66-80岁' },
                        { value: newv.rkso, name: '80岁以上' },
                    ]
                    this.chart()//重新渲染
                })
            }

        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 useEffect(() => {
        window.addEventListener(
            "resize",
            function () {
                const myChart = echarts.init(echartsRef.current)
                myChart.resize();
            }.bind(this)
        );
        return () => {
            window.removeEventListener('resize', "resize",
                function () {
                    const myChart = echarts.init(echartsRef.current)
                    myChart.resize();
                }.bind(this));
        }
    }, [])