vue echart 折线图渐变图例legend颜色不渐变

折线图区域渐变,图例legend不渐变
在这里插入图片描述

let myChart = this.$echarts.init(this.$refs.linebox);
        myChart.setOption({
          tooltip: {
            backgroundColor: "rgba(4, 21, 48, 0.75)",
            trigger: "axis",
            axisPointer: {
              type: "none",
            },
            textStyle: {
              color: '#ffffff',
              fontSize: 9
            },
          },
          color: ['#9DFDFF', '#FFE081', '#AE9BFF'],
          legend: {
            icon: "circle",
            itemWidth: 10,
            itemGap: 60,
            textStyle: {
              color: "rgba(255, 255, 255, 0.7)",

            },
            // itemStyle:{
            //     color:'#ffcc00'
            // },
            data: [{
              name: '供应商名称1',
              itemStyle: {
                color: '#9DFDFF'
              }
            }, {
              name: '供应商名称2',
              itemStyle: {
                color: '#FFE081'
              }
            }, {
              name: '供应商名称3',
              itemStyle: {
                color: '#AE9BFF'
              }
            }]
          },
          grid: {
            left: "2%",
            right: "2%",
            bottom: "0",
            top: "18%",
            containLabel: true,
          },
          xAxis: {
            axisLabel: {
              color: "#ffffff",
            },
            axisLine: {
              lineStyle: {
                color: "#A6E0F7",
                opacity: 1,
              },
            },
            axisTick: {
              lineStyle: {
                color: "#A6E0F7",
                opacity: 0,
              },
            },
            type: "category",
            data: ['9-11', '9-12', '9-13'],
          },
          yAxis: {
            type: "value",
            name: "单位:单",
            nameLocation: "end",
            splitLine: {
              lineStyle: {
                color: "#6076AD", //横轴的线线颜色
                opacity: 0.15,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff", //y轴的值颜色
                opacity: 0.5,
              },
            },
            axisTick: {
              lineStyle: {
                color: "#ffffff",
                opacity: 0,
              },
            },
            axisLabel: {
              color: "#ffffff",
            },
          },
          series: [{
              symbol: "none",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#00F4FA'
                  },
                  color: "#ffcc00",
                  borderRadius: 200,
                  // 添加渐变颜色
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: "rgba(24, 255, 242, 0.28)",
                    },
                    {
                      offset: 1,
                      color: "rgba(18, 192, 188, 0)",
                    },
                  ]),
                }, 改变折线点的颜色
                lineStyle: {
                  color: "#00F4FA",
                  width: 1,
                }, //改变折线颜色
              },
              name: "供应商名称1",
              data: [220, 182, 191],
              type: "line",
              areaStyle: {},
              smooth: true,
              color: "#9DFDFF"
            },
            {
              symbol: "none",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#FFE081'
                  },
                  color: "#ffcc00",
                  borderRadius: 200,
                  // 添加渐变颜色
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: "rgba(255, 230, 128, 0.28)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 244, 73, 0)",
                    },
                  ]),
                }, 改变折线点的颜色
                lineStyle: {
                  color: "#00F4FA",
                  width: 1,
                }, //改变折线颜色
              },
              name: "供应商名称2",
              data: [200, 240, 375],
              type: "line",
              areaStyle: {},
              smooth: true,
            },
            {
              symbol: "none",
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#AE9BFF'
                  },
                  color: "#ffcc00",
                  borderRadius: 200,
                  // 添加渐变颜色
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: "rgba(127, 24, 255, 0.28)",
                    },
                    {
                      offset: 1,
                      color: "rgba(172, 117, 255, 0)",
                    },
                  ]),
                }, 改变折线点的颜色
                lineStyle: {
                  color: "#00F4FA",
                  width: 1,
                }, //改变折线颜色
              },
              name: "供应商名称3",
              data: [152, 500, 122],
              type: "line",
              areaStyle: {},
              smooth: true,
            },
          ]
        })
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值