[vue+elementUI+echarts]echart折线图展示后台传来的数据

最近项目遇到了这个问题，来记录一下，方便以后复制粘贴23333
主要功能：
循环遍历渲染后台传来的一堆数据，然后点击每一条数据的More Info按钮展示对应的折线图表格数据。

引elementUi和echarts 就不再赘述，直接百度完事儿

直接上代码吧
html:(只看功能，主要实现在el-popver组件里)

      
      

          

              
Impressions: {{itemName.impressions}}
              
Clicks: {{itemName.clicks}}
              
Media Cost: $ {{itemName.media_cost}}
              
Budget/Click Ratio: {{itemName.bugget_clicks}}
              
              
                            
                       
                       
                       
                   	   More Info
               
            
      

  

JS：（上传的是实现功能的两个方法，这里直接用的ajax请求，改成了同步请求）

		  matchMore(val,idx){
                var _that = this;
                // console.log('回来传给echarts',val)
                $.ajax({
                        type: "POST",
                        async: false,
                        url: " ",
                        data:{
                            
                            },
                        success: function(res) {         
							console.log('success')
							//取得数据给 e_series、e_legend、e_xAxis赋值
							 setTimeout(function(){
		                        let id="painter"+idx;
		                        // console.log('要传给画布的点击的idx',id)
		                        //接着调用画echarts方法
		                        _that.drawEchart(id)
		                    }, 1500);
                        },
                        error:function(){
                            console.log('failed')
                        }
                    });
                   
            },
            // 绘制图表
            drawEchart(v){
                let _that=this;
                // console.log('画布接收到的即将要画的painter+v,idn:',v)
                let idn=v;
                const myChart = _that.$echarts.init(document.getElementById(idn));
                //配置折线图的数据,有取data里的数据，ajax返回成功时set的，e_series、e_legend、e_xAxis
                const option = {
                    title: {
                        text: 'Line Chart',
                        subtext: '',
                        x:'center',
                        y:'top',
                        textAlign:'left'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend:_that.e_legend,
                    xAxis: _that.e_xAxis,
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    series:_that.e_series,
                }
               //设置true每次重新绘制echarts
               myChart.setOption(option,true);
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            },

总结：
本来想着把所有的数据都画在同一个画布即同一个ID上，由于这里是写在循环里的，所以只能来动态设置画布的ID来动态的画每一个echarts。希望能帮到大家！