echarts中动态生成多个series，并设置不同颜色

最新推荐文章于 2025-06-10 17:07:46 发布

原创最新推荐文章于 2025-06-10 17:07:46 发布 · 5.1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #vue.js

该博客介绍了如何从后台获取数据并在Vue中利用Echarts库创建柱状图。通过在methods和created生命周期钩子中定义函数，实现了数据的获取和图表的绘制。柱状图的每个系列使用了渐变颜色，并且图表会根据窗口大小自动调整。

1、从后台获取数据，在methods里面定义

getMonthContractCount() {
        this.$api.getMonthContractCount().then(res => {
          if (res && res.data && res.data.code == '0') {
            let info = res.data.data
            //有两条数据，有个templateName，对应的有两个series
            if (info.length > 0) {
              let month = info[0].list.map(item => item.month)
              let name = info.map(item => item.templateName)
              this.drawContractaddChart(info, month, name)
            }
          }
        })
      },

2、在created里面

created() {
      this.getMonthContractCount();
    },

3、在methods里面定义画echarts方法

drawContractaddChart(dataList, month, name) {
        const myChart = echarts.init(document.getElementById('addContract-chart'));
        myChart.setOption({
          grid: { //调整图表上下左右位置
            top: '20%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data: name,
            itemHeight: 8,
            itemWidth: 16,
            icon: 'roundRect',
            textStyle: {
              color: '#999'
            },
            top: '0px',
            right: '10px'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: month,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 0,
            },
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            }
          },
          series: (function() {
            let colorArr = [
              ['#98E9FB ', '#00D2FF'],
              ['#A6C2FB ', '#4E87FA'],
              ['#fd9e40', '#FB9633 '],
            ];
            var series = [];
            for (var i = 0; i < dataList.length; i++) {
              var item = {
                name: dataList[i].templateName,
                type: "bar",
                barWidth: 15,
                itemStyle: {
                  barBorderRadius: [10, 10, 0, 0],
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: colorArr[i][0]
                    },
                    {
                      offset: 1,
                      color: colorArr[i][1]
                    }
                  ])
                },
                data: dataList[i].list.map(item2 => item2.contractCount)
              };
              series.push(item);
            }
            return series;
          })(),
        });
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      },