echarts柱状图渐变色

使用：

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#73D0C0'
                }, {
                  offset: 1,
                  color: '#3BC2E4'
                }]),

注意引入：

import echarts from 'echarts/lib/echarts';
import "echarts/lib/component/graphic";

<template>
  <v-chart ref="chart" :options="option" />
</template>

<script>
import ECharts from 'vue-echarts'
import echarts from 'echarts/lib/echarts';
import "echarts/lib/component/graphic";
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/markArea'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
export default {
  components: {
    'v-chart': ECharts
  },
  props: {
    valueList: {
      type: Array,
      default: () => [],
    },
    xAxisList: {
      type: Array,
      default: () => [],
    },
    legendList: {
      type: Array,
      default: () => [],
    }
  },
  watch: {
    xAxisList: {
      handler () {
        this.change()
      },
      deep: true
    },
    valueList: {
      handler () {
        this.change()
      },
      deep: true
    },
    legendList: {
      handler () {
        this.change()
      },
      deep: true
    }
  },
  created () {
    this.change()
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#eee'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          top: 40,
          left: 80,
          right: 150,
          borderColor: '#EFEDED',
          bottom: 40
        },
        legend: {
          data: [],
          itemGap: 30,
          right: '15',
          top: '0',
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            },
            axisTick: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '水量',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            },
            'splitLine': {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          {
            type: 'value',
            // name: '温度',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value}'
            },
            'splitLine': {
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 6,
            itemStyle: {
              normal: {
                label: {
                  show: true,      //开启显示
                  position: 'top', //在上方显示
                  textStyle: {     //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#73D0C0'
                }, {
                  offset: 1,
                  color: '#3BC2E4'
                }]),
                barBorderRadius: [18, 18, 18, 18],//---图形形状
              }
            },
            barWidth: '20',				//---柱形宽度
            barCategoryGap: '20%',		//---柱形间距
            data: []
          },
          {
            name: '',
            type: 'line',
            yAxisIndex: 1,    //折线粗细
            symbol: 'circle',   //折线原点
            symbolSize: 10,
            itemStyle: {
              color: '#FFA72C'
            },
            data: []
          }
        ]
      }
    }
  },
  created () {
    this.change()
  },
  methods: {
    reload () {
      this.change()
    },
    change () {
      this.$nextTick(() => {
        if (this.valueList.length == 0 || this.legendList.length == 0 || this.xAxisList.length == 0) return
        this.option.series[0].data = []
        this.option.series[1].data = []
        let value1 = []
        let value2 = []
        this.option.legend.data = this.legendList
        this.option.xAxis[0].data = this.xAxisList
        this.option.series[0].name = this.valueList[0].title + '成绩'
        this.option.series[1].name = this.valueList[0].title + '分数'
        this.valueList.forEach(e => {
          e.descCountVos.forEach(t => {
            if (t.desc === "成绩") {
              this.option.series[0].data.push(t.value)
              value1.push(t.value)
              // this.option.series[0].data.push(65)
            } else if (t.desc === "分数") {
              this.option.series[1].data.push(t.value)
              value2.push(t.value)
              // this.option.series[1].data.push(85)
            }
          })
        })
        console.log(value1, value2, "1212")
        let n = 0
        let min1 = Math.min(...value1)
        let max1 = Math.max(...value1)
        if (max1 > 100 && max1 <= 1000) {
          n = max1 / 100
        } else if (max1 > 1000 && max1 <= 10000) {
          n = max1 / 1000
        }
        let interval1 = 0
        if (max1 >= 0 && max1 <= 10) {
          interval1 = 1
        } else if (max1 > 10 && max1 <= 100) {
          interval1 = 10
        } else if (max1 > 100 && max1 <= 100 * n) {
          interval1 = 10 * n
        } else if (max1 > 1000 && max1 <= 1000 * n) {
          interval1 = 100 * n
        }
        this.$nextTick(() => {
          // console.log(JSON.stringify(this.option))
        })
        // 后续进入时，不会根据数组变化而重新渲染，所以要主动刷新图表
        if (this.$refs.chart) this.$refs.chart.chart.setOption(this.option, true)
      })

    }
  }
}
</script>

<style lang='scss' scoped>
.echarts {
  width: 100%;
  height: 350px;
}
</style>