渐变折线图

<template>
  <div id="myChart" style="height:100%;width:100%;"></div>
</template>

<script>
import * as echarts from "echarts";

export default ({
  data() {
    return {
    }
  },
  props:{
    wqTime:{
      type:Array,
    },
    wqData:{
      type:Array,
    }
  },
  watch:{
    wqTime:function () {
      this.myChart()
    },
    wqData:function () {
      this.myChart()
    }
  },
  mounted() {
    this.myChart()
  },
  methods: {
    myChart() {
      let myChart = echarts.init(document.getElementById('myChart'))
      myChart.setOption(
          {
            tooltip: {
              backgroundColor: '#44487c',
              trigger: 'axis',
              color: 'fff',
              textStyle:{
                color:'#bbb8b8'
              },
              axisPointer: {
                type: 'cross',
                label: {
                  color:'pink',
                  backgroundColor: 'none',
                },
              }
            },
            color: ["#4cd5ce"],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: this.wqTime,
                axisLabel: {
                  show: true,
                  rotate: 5,
                  textStyle: {
                    color: '#63688e'
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#63688e'
                  }
                }
              }
            ],
            series: [
              {
                name: '金额（亿）',
                type: 'line',
                stack: '总量',

                itemStyle: {
                  normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0, color: '#112466' // 0% 处的颜色
                        }, {
                          offset: 0.5, color: '#0f215e' // 100% 处的颜色
                        }, {
                          offset: 1, color: '#071147' // 100% 处的颜色
                        }]
                    ),  //背景渐变色
                    lineStyle: {        // 系列级个性化折线样式
                      width: 3,
                      type: 'solid',
                      color: "#3E86F4"
                    }
                  },
                  emphasis: {
                    color: '#4fd6d2',
                    lineStyle: {        // 系列级个性化折线样式
                      width: 2,
                      type: 'dotted',
                      color: "#4fd6d2" //折线的颜色
                    }
                  }
                },//线条样式
                symbolSize: 5, //折线点的大小
                areaStyle: {normal: {}},
                data: this.wqData
              },
            ]
          }
      );
    }
  }
})
</script>