echarts折线图legend前面的小icon和图形线的颜色保持一致

关键代码:

    color: ["#ff9b00", "#00ffff", ], //全局调色盘,在legend的同级设置color数组,里面的颜色为线对应的颜色
        legend: {
          show: true,
          orient: "horizontal",
          // 图例信息
          itemWidth: 14,
          itemHeight: 3,
          textStyle: {
            color: "#fff", //图例的文字颜色
            fontSize: 12,
          },

          right: "5%",
          top: "3%",
          data: [
            {
              name: "呼入",
              icon: "rect",
            },
            {
              name: "呼出",
              icon: "rect",
            },
          ], //data中的值要对应series中的name属性

          formatter: function (name) {
            return name;
          },
          // itemStyle: {
          //   color: "#ff9b00",
          // },
        },
series: [
          {
            name: "呼入",
            type: "line",
            symbol: "none", // 默认是空心圆(中间是白色的),改成实心圆
            showAllSymbol: true,
            symbolSize: 16,
            smooth: true,
            itemStyle: {//关键代码
              normal: {
                areaStyle: {
                  type: "default",
                  color: "#ff9b00",
                },
                lineStyle: {
                  normal: {
                    width: 0.8,
                    color: "#ff9b00", // 线条颜色
                  },
                },
              },
            },
            areaStyle: {//区域的颜色
              normal: {
                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255,155,0,.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255,155,0, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: goToSchool,
          },
          {
            name: "呼出",
            type: "line",
            symbol: "none", // 默认是空心圆(中间是白色的),改成实心圆
            showAllSymbol: true,
            symbolSize: 16,
            smooth: true,
            lineStyle: {//关键代码
              normal: {
                width: 1,
                color: "#00ffff", // 线条颜色
              },
            },

            areaStyle: {
              normal: {
                //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,255,255,.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,255,255, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: goOutSchool,
          },
        ],

这样设置以后就可以实现我们想要的效果了,如下所示:
折线图.png

你可能感兴趣的:(echarts折线图legend前面的小icon和图形线的颜色保持一致)