vue项目中 echarts的渐变色的设置

实现效果

2 设置渐变色

  areaStyle: {
                normal: {
                  color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(63,227,236,0.8)'
                  }, {
                    offset: .4,
                    color: 'rgba(63,227,236,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(63,227,236,0.00)'
                  }])
               
                }

3 在echarts --> series --> areaStyle --> normal --> color设置

  series: [
            {
              name: '审方数',
              type: 'line',
              smooth: true,
              symbolSize: 1,          // 拐点图形大小
              areaStyle: {
                normal: {
                  color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(63,227,236,0.8)'
                  }, {
                    offset: .4,
                    color: 'rgba(63,227,236,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(63,227,236,0.00)'
                  }])
                  // ['rgba(63,227,236,0.3)'],
                }
              },
              itemStyle: {
                color: ['#3FE3EC'],
              },
              data: [10, 20, 15, 20, 15, 20, 15, 20, 15, 20, 15, 20],
              icon:'image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png'
            },]

4 完整代码

 ButtomDrawLine() {
        let t = this;
        let myChart = this.$echarts.init(document.getElementById('ButtomDrawLine'))
        myChart.setOption({
          title: {},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            left: 'right',
            textStyle: {//图例文字的样式
              color: '#ffffff',
              fontSize: 14
            },
            show: true,
            data: [
              {
                name: '审方数',
              },
              {
                name: '处方数',
              },
              {
                name: '会员数'
              },
              {
                name: '含麻登记',
              }
            ]
          },
          /*toolbox: {
            feature: {
              dataView: {readOnly: false},
              restore: {},
              saveAsImage: {}
            },
            iconStyle:{
              normal:{
                color:'white',//设置颜色
              }
            }
          },*/
          xAxis: [
            {
              type: 'category',
              axisLine: { // x轴的颜色和宽度
                lineStyle: {
                  color: '#3594FF',
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                },
              },
              data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
            }
          ],
          yAxis: [
            {
              type: 'value',

              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                },
              },
              axisLine: {
                lineStyle: {
                  color: '#3594FF',
                }
              },
              // 控制网格线是否显示
              splitLine: {
                show: false
              },
              min: 0,
              splitNumber: 5,
              boundaryGap: [0.2, 0.2],
              data:[0,50,100,150],
            }
          ],
          grid: {
            top: '25%',
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true
          },
          series: [
            {
              name: '审方数',
              type: 'line',
              smooth: true,
              symbolSize: 1,          // 拐点图形大小
              areaStyle: {
                normal: {
                  color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(63,227,236,0.8)'
                  }, {
                    offset: .4,
                    color: 'rgba(63,227,236,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(63,227,236,0.00)'
                  }])
                  // ['rgba(63,227,236,0.3)'],
                }
              },
              itemStyle: {
                color: ['#3FE3EC'],
              },
              data: [10, 20, 15, 20, 15, 20, 15, 20, 15, 20, 15, 20],
              icon:'image://http://file.dyzhkj.cn/null/1562315548784PyZcsO处方数.png'
            },
            {
              name: '处方数',
              type: 'line',
              smooth: true,
              symbolSize: 1,          // 拐点图形大小
              areaStyle: {
                color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(82,206,86,0.8)'
                }, {
                  offset: .4,
                  color: 'rgba(82,206,86,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(82,206,86,0.00)'
                }])
                // ['rgba(82,206,86,0.3)'],
              },
              itemStyle: {
                normal: {
                  color: ['#52CE56'],
                }
              },
              data: [10, 5, 15, 5, 15, 20, 15, 20, 15, 5, 15, 10]
            },
            {
              name: '会员数',
              type: 'line',
              smooth: true,
              symbolSize: 1,          // 拐点图形大小
              areaStyle: {
                color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(251,98,100,0.8)'
                }, {
                  offset: .4,
                  color: 'rgba(251,98,100,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(251,98,100,0.00)'
                }])
                // ['rgba(251,98,100,0.3)'],
              },
              itemStyle: {
                normal: {
                  color: ['#FB6264'],
                }
              },
              data: [35, 45, 65, 25, 65, 44, 15, 40, 35, 46, 50, 25]
            },
            {
              name: '含麻登记',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(231,233,65,0.8)'
                  }, {
                    offset: .4,
                    color: 'rgba(231,233,65,0.3)'
                  }, {
                    offset: 1,
                    color: 'rgba(231,233,65,0.00)'
                  }]),
                  // ['rgba(231,233,65,0.5)'],
                  barBorderColor: '#E7E941',            // 柱条边线
                  barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0
                  barBorderWidth: 1,                     // 柱条边线线宽，单位px，默认为1
                }
              },
              barWidth: 15,//柱图宽度
              data: [5, 7, 3, 7, 5, 4, 5, 6, 4, 7, 5, 8]
            }
          ]
        })
      },