echarts 设置柱状,折线颜色为渐变色

vue中使用echarts

npm install echarts
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

//使用
 this.echarts = this.$echarts.init(document.querySelector('#echarts'));

1.设置柱条颜色为渐变色

series: [
    {
            name:'正常通行',
            type:'bar',
            stack: 'one',
            barWidth: '14px',
            itemStyle: {
              normal: {
                //颜色渐变
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#0CF7FC'
                }, {
                  offset: 1,
                  color: '#0568D0'
                }])
              }
            },
            emphasis: this.emphasisStyle,
            data:[6000, 2000, 1000, 6000, 7000, 1000, 6000]
    }
]

2.设置折线图的折线颜色为渐变色，拐点颜色，和样式

series:[
          {
            name:'实收',
            type:'line',
            smooth: true, // 让曲线变平滑的
            color:['#FE4D4B'], // 拐点颜色 
            symbol: 'circle',  // 拐点样式
            symbolSize: 5, // 拐点大小
            itemStyle: { // 设置折线渐变色
              color: '#5CC4E9',
              normal: {
                lineStyle: {
                  width: 2, // 折线宽度
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#FE4D4B'},
                    {offset: 1, color: '#E6973C'}
                  ]),
                }
              }
            },
            data:[10, 29, 78, 45, 67, 78, 45]
          },
]

 

 

参考原文