使用vue实现Echarts和后台交互

从后台请求接口-返回数据开始写的:主要的

 }).then(function (res) {
                        // console.log(res.data.data.month[0].CITYCODE)
                        // 接口返回的数据
                        let data = res.data.data.year
                        console.log(data)
                        // 定义一个数组和数据的小图对应的，最后放到legend的data里
                        var dataName = []
                        // 定义一个数组，对话放到series里data里
                        var dataPie = []
                        // 遍历对象，外层遍历标题
                        for (let key in data) {
                            console.log(data[key])
                            // 内层遍历具体的值
                            for (let key2 in data[key]) {
                                // 定义一个对象(循环遍历)，最后放到数组里
                                var obj = {}
                                // 打印出具体name值
                                console.log(key2)
                                // name值传到数组里
                                dataName.push(key2)
                                // 给对象的value，添加一个数据：'1','2'...
                                obj.value = data[key][key2]
                                // 给对象添加一个name
                                obj.name = key2
                                // 最后这个对象添加到数据里
                                dataPie.push(obj)
                            }
                        }
                        console.log(dataName)
                        console.log(dataPie)

                        var myChart = echarts.init(document.getElementById('main'));
                        // var opt = option.series[0];
                        // lineHide(opt);
                        option = {
                            title: {},
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: dataName
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: dataPie,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        },
                                    },
                                    // label: {
                                    //     show: true,
                                    //     position: 'top',
                                    //     textStyle: {
                                    //         fontSize: 12,
                                    //         color: "green"
                                    //     },
                                    //数据为零时隐藏线段  

                                    // formatter: function (opt) {
                                    //     jQuery.each(opt.data, function (i, item) {
                                    //         if (item.value == 0) {
                                    //             item.itemStyle.normal.labelLine.show = false;
                                    //             item.itemStyle.normal.label.show = false;
                                    //         }
                                    //     });

                                    // }
                                    // }
                                    labelLine: {
                                        normal: {
                                            show: false,
                                            length: 0
                                            // length : 5,视觉引导线第一段 的长度
                                            //  length2 : 5视觉引导线第二段 的长度
                                        }
                                    },
                                },

                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);

                    })

第一步

image.png

第二步获取到div(main)

image.png