echarts 堆叠面积图自定义legend图例颜色

最新推荐文章于 2024-05-10 10:01:37 发布

流氓也是种气质 _Cookie

最新推荐文章于 2024-05-10 10:01:37 发布

阅读量955

点赞数 1

分类专栏： echarts 使用文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_37550440/article/details/131044959

版权

echarts 使用专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>第一个 ECharts 实例</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    option = {
      tooltip: {
        trigger: 'axis',
        textStyle: {
          fontSize: 20
        },
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },

      legend: {
        top: 20,
        left: "center",
        itemGap: 20,
        itemWidth: 20,
        itemHeight: 20,
        icon: "rect",
        textStyle: {
          fontSize: 20,
          color: "#000"
        },
        data: ['A', 'B', 'C', 'D', 'E']
      },

      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'A',
          type: 'line',
          stack: 'stack_1',
          areaStyle: {},
          data: [320, 332, 301, 334, 390, 330, 320, 220, 321, 312, 290]
        },
        {
          name: 'B',
          type: 'line',
          stack: 'stack_1',
          areaStyle: {},
          data: [120, 132, 101, 134, 90, 230, 210, 123, 130, 120, 100]
        },
        {
          name: 'C',
          type: 'line',
          stack: 'stack_1',
          areaStyle: {},
          data: [220, 182, 191, 234, 290, 330, 310, 223, 212, 231, 190]
        },
        {
          name: 'D',
          type: 'line',
          stack: 'stack_1',
          areaStyle: {},
          data: [150, 212, 201, 154, 190, 330, 410, 215, 212, 231, 150]
        },
        {
          name: 'E',
          type: 'line',
          stack: 'stack_1',
          areaStyle: {},
          data: [820, 832, 901, 934, 1290, 1330, 1320, 1024, 901, 923, 1290]
        }
      ]
    };

    // 自定义每个数据项的颜色
    var colorList = [
      '#ff7f50',
      '#87cefa',
      '#da70d6',
      '#32cd32',
      '#6495ed',
      '#ff69b4',
      '#ba55d3',
      '#cd5c5c',
      '#ffa500',
      '#40e0d0'
    ];
    //16进制转RGB
    const colorToRGB = (color, opt) => {
      let color1, color2, color3;
      color = "" + color;
      if (typeof color !== "string") return;
      if (color.charAt(0) == "#") {
        color = color.substring(1);
      }
      if (color.length == 3) {
        color =
          color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
      }
      if (/^[0-9a-fA-F]{6}$/.test(color)) {
        color1 = parseInt(color.substr(0, 2), 16);
        color2 = parseInt(color.substr(2, 2), 16);
        color3 = parseInt(color.substr(4, 2), 16);
        return (
          "rgb(" + color1 + "," + color2 + "," + color3 + "," + opt + ")"
        );
      }
    };
    option.series.forEach(function (item, index) {
      item.symbol = "circle", // 取消圆点折线
        item.symbolSize = 0,
        item.showAllSymbol = true,
        item.smooth = true,
        item.lineStyle = { //区域顶部线的样式
          normal: {
            width: 2,
            color: `${colorToRGB(`${colorList[index]}`, 1)}`
          },
          borderColor: "rgba(0,0,0,.4)"
        },
        item.itemStyle = {
          normal: {
            color: colorList[index % colorList.length] //图例颜色

          }
        };
      item.areaStyle = { //堆积区域样式
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: `${colorToRGB(`${colorList[index]}`, 0.6)}` // 0% 处的颜色
              },
              {
                offset: 1,
                color: `${colorToRGB(`${colorList[index]}`, 0.1)}` // 100% 处的颜色（添加渐变）
              }
            ],
            false
          ),
          shadowColor: `${colorToRGB(`${colorList[index]}`, 0.5)}`,
          shadowBlur: 20
        }
      };
    });

    // 渲染图表
    myChart.setOption(option);
  </script>
</body>

</html>