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]
          },
]

 

 

參考原文