Echarts series dynamically renders multiple line charts/area charts

The series of Echarts dynamically renders multiple line charts/area charts

• • 1. Dynamically set series according to the data (array) returned by the backend
  • 2. Draw a graph based on the obtained multiple sets of series data

Since there are so many charts encountered in the work, I can’t remember the configuration items every time I use them. I record them here, and I hope they can also help you passing by. Not much to say about our above picture:

1. Dynamically set series according to the data (array) returned by the backend

const socSeries = this.setSeries(res.result.socFollowingList)

setSeries (data) {<!-- -->
      const colors = [
        {<!-- -->
          zero: '#91cc75',
          one: '#D3E5CB'
        },
        {<!-- -->
          zero: '#5470c6',
          one: '#C4CBED'
        },
        {<!-- -->
          zero: '#ee6666',
          one: '#E3B7B7'
        },
        {<!-- -->
          zero: '#7a22ef',
          one: '#C9B7E3'
        },
        {<!-- -->
          zero: '#3bbcd9',
          one: '#B9E0E8'
        }
      ]
      var series = []
      var series_data = data
      series_data.forEach((e, index) => {<!-- -->
        let value = e.list.map(item => {<!-- -->
          return item.val
        })
        var item = {<!-- -->
          name: e.name,
          data: value,
          type: 'line',
          symbol: 'none',
          itemStyle: {<!-- -->
            color: colors[index].zero
          },
          areaStyle: {<!-- -->
            color: new echarts. graphic. LinearGradient(0, 0, 0, 1, [
              {<!-- -->
                offset: 0,
                color: colors[index].zero
              },
              {<!-- -->
                offset: 1,
                color: colors[index].one
              }
            ])
          },
        }
        series. push(item)
      })
      return series
    },

2. Draw pictures according to the obtained multiple sets of series data

this. getPowerTracking(timeData, socSeries, power, strategy)

getPowerTracking (timeData, socSeries, power, strategy) {<!-- -->
      let myChartDom = document. getElementById('chart-power')
      let myChart = echarts.init(myChartDom)
      var option

      option = {<!-- -->
        tooltip: {<!-- -->
          trigger: 'axis',
          axisPointer: {<!-- -->
            animation: false
          }
        },
        legend: {<!-- -->
          // data: ['SOC', 'Power'],
          right: 50
        },
        axisPointer: {<!-- -->
          link: [
            {<!-- -->
              xAxisIndex: 'all'
            }
          ]
        },
        dataZoom: [
          {<!-- -->
            show: true,
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
          },
          {<!-- -->
            type: 'inside',
            realtime: true,
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
          }
        ],
        grid: [
          {<!-- -->
            left: 60,
            right: 50,
            height: '35%'
          },
          {<!-- -->
            left: 60,
            right: 50,
            top: '55%',
            height: '35%'
          }
        ],
        xAxis: [
          {<!-- -->
            type: 'category',
            boundaryGap: false,
            axisLine: {<!-- --> onZero: true },
            data: timeData,
            axisLabel: {<!-- -->
              show: true,
              showMaxLabel: true,
              showMinLabel: true,
              formatter: function (value, index) {<!-- -->
                var date = new Date(value)
                // console. log(date)
                // console. log(date. getHours())
                // console. log(date. getMinutes())

                if (date.getHours() === 0 & amp; & amp; date.getMinutes() === 0) {<!-- -->
                  // return [date.getMonth() + 1, date.getDate()].join('/')
                  return date. getDate()
                } else {<!-- -->
                  const hours = date.getHours().toString().padStart(2, '0')
                  const minutes = date.getMinutes().toString().padStart(2, '0')
                  return `${<!-- -->hours}:${<!-- -->minutes}`
                }
              }
            },
          },
          {<!-- -->
            gridIndex: 1,
            type: 'category',

            boundaryGap: false,
            axisLine: {<!-- --> onZero: true },
            data: timeData,
            position: 'bottom',
            axisLabel: {<!-- -->
              show: true,
              showMaxLabel: true,
              showMinLabel: true,
              formatter: function (value, index) {<!-- -->
                var date = new Date(value)
                // console. log(date)
                // console. log(date. getHours())
                // console. log(date. getMinutes())

                if (date.getHours() === 0 & amp; & amp; date.getMinutes() === 0) {<!-- -->
                  // return [date.getMonth() + 1, date.getDate()].join('/')
                  return date. getDate()
                } else {<!-- -->
                  const hours = date.getHours().toString().padStart(2, '0')
                  const minutes = date.getMinutes().toString().padStart(2, '0')
                  return `${<!-- -->hours}:${<!-- -->minutes}`
                }
              }
            },
          }
        ],
        yAxis: [
          {<!-- -->
            name: 'SOC(100%)',
            type: 'value',
            min: 0,
            max: 100
          },
          {<!-- -->
            gridIndex: 1,
            name: 'Power (kW)',
            type: 'value',
            // inverse: true
          }
        ],
        series:
          [
            ...socSeries,
            {<!-- -->
              name: 'Power (kW)',
              type: 'line',
              symbol: 'none',
              step: 'start',
              xAxisIndex: 1,
              showSymbol: false,
              yAxisIndex: 1,
              itemStyle: {<!-- -->
                color: 'rgb(255,220,97)'
              },
              areaStyle: {<!-- -->
                color: new echarts. graphic. LinearGradient(0, 0, 0, 1, [
                  {<!-- -->
                    offset: 0,
                    color: 'rgb(255,220,97)'
                  },
                  {<!-- -->
                    offset: 1,
                    color: 'rgb(247,249,255)'
                  }
                ])
              },
              data: power
            },
            {<!-- -->
              name: 'Strategy',
              type: 'line',
              step: 'start',
              xAxisIndex: 1,
              showSymbol: false,
              yAxisIndex: 1,
              itemStyle: {<!-- -->
                color: '#2AA523'
              },
              lineStyle: {<!-- -->
                color: '#2AA523',
                width: 2,
                type: 'dashed'
              },
              data: strategy
            }
          ]
      option & amp; & amp; myChart.setOption(option)
      window.addEventListener('resize', () => {<!-- -->
        myChart. resize()
      })
    },