Echarts-多个数据渲染

1、循环遍历数据ID

2、在组件引入 import echarts from 'echarts'

3、在data里定义roseChart: "roseChart",

4、在methods：{}获取ID并获取接口数据及调用

//曲线分析图

    drawRose () {

      var roseCharts = document.getElementsByClassName("roseChart"); // 对应地使用ByClassName

      for (var i = 0; i < roseCharts.length; i++) { // 通过for循环，在相同class的dom内绘制元素

        var myChart = echarts.init(roseCharts[i]);

        myChart.setOption({

          title: {

            text: this.list[i].name

          },

          legend: {

            data: this.list[i].legend

          },

          tooltip: {

            show: true,

            transitionDuration: 0,//防止tooltip的抖动

            trigger: 'axis',

            axisPointer: {

              type: "cross",

              axis: "x"

            },

            padding: [10, 10],

            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'

          },

          xAxis: [{

            data: this.list[i].times,

            axisLabel: {

              interval: 0,

              rotate: 40

            },

          }],

          yAxis: {},

          series: [{

            name: this.list[i].legend[0],

            type: 'line',

            data: this.list[i].tdatas,

            smooth: true,

            showAllSymbol: true,

            itemStyle: {

              normal: {

                color: 'yellow',

                lineStyle: {

                  color: "yellow",

                  width: 1

                },

                areaStyle: {

                  color: {

                    type: 'linear',

                    x: 0,

                    y: 1,

                    x2: 0,

                    y2: 0,

                    colorStops: [{

                      offset: 0,

                      color: '#fff' // 0% 处的颜色

                    }, {

                      offset: 1,

                      color: 'yellow' // 100% 处的颜色

                    }]

                  }

                }

              }

            }

          },

          {

            name: this.list[i].legend[1],

            type: 'line',

            data: this.list[i].ydatas,

            showAllSymbol: true,

            smooth: true,

            itemStyle: {

              normal: {

                color: '#3A84FF',

                lineStyle: {

                  color: "#3A84FF",

                  width: 1

                },

                areaStyle: {

                  color: {

                    type: 'linear',

                    x: 0,

                    y: 1,

                    x2: 0,

                    y2: 0,

                    colorStops: [{

                      offset: 0,

                      color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色

                    }, {

                      offset: 1,

                      color: '#1fb5fc' // 100% 处的颜色

                    }]

                  }

                }

              }

            }

          },]

        })

      }

    }

5、获取接口并将之赋值到data里面定义的数组

6、watch监听

watch: {

    list (val) {

      this.drawRose()

    },

  }

7、后台数据格式