echarts 折线图与柱状图混合使用，折线区域渐变，柱状图渐变（封装函数，传入series）

首先封装一个函数(传入series，支持柱状图折线图混合使用)：
上代码：

    commonEchart(echart, dataX, mySeries) {
      // 基于准备好的dom，初始化echarts实例
      const echarts = require('echarts')
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(echart)
      // 绘制图表
      myChart.setOption({
        backgroundColor: '', // 背景颜色透明
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 0,
          y: 40,
          x2: 0,
          y2: 40,
          containLabel: true
        },
        xAxis: {
          data: dataX,
          axisLabel: {
            // interval: 0, // 强制文字产生间隔
            textStyle: { // 文字样式
              color: '#FFF',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(191, 191, 191, 0.2)' // 更改坐标轴颜色
            }
          },
          axisTick: { // x轴刻度线
            show: false
          }
        },
        yAxis: {
          axisLine: { // y轴
            show: false
          },
          axisTick: { // y轴刻度线
            show: false
          },
          splitLine: { // 网格线
            lineStyle: {
              type: 'dashed',
              color: 'rgba(233, 233, 233, 0.2)'
            }
          },
          axisLabel: {
            interval: 1,
            textStyle: { // 文字样式
              color: '#FFF',
              fontSize: 12
            }
          }
        },
        series: mySeries
      })
      this.resizeEcharts(echart, myChart)
    },

函数调用（根据需要传入series）：

    drawLine() {
      const echarts = require('echarts')
      const mySeries = [
        {
          name: this.lineData.title,
          type: 'bar',
          barWidth: 16,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#A471FF' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#53B4B3' // 100% 处的颜色
              }], false)
            }
          },
          data: this.lineData.ys1
        },
        {
          name: this.lineData.title,
          type: 'line',
          // smooth: true,
          symbol: 'circle', // 折线点设置为实心点
          symbolSize: 8, // 折线点的大小
          data: this.lineData.ys2,
          itemStyle: {
            normal: {
              color: '#53B4B3',
              lineStyle: {
                color: '#53B4B3'
              }
            }
          },
          areaStyle: {
            normal: {
              // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(83,180,179,0.00)'
              }, {
                offset: 1,
                color: 'rgba(83,180,179,0.37)'
              }])
            }
          }// 区域颜色渐变
        }
      ]
      this.commonEchart(this.$refs.echart, this.lineData.xs, mySeries)
    },