vue+echart实现 X轴 双柱状图 渐变色

vue+echart实现X轴双柱状图渐变色

一:安装

1. 首先需要安装echarts依赖包

npm install echarts -S

2. 或者使用国内的淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

二: 创建图表

全局引入

main.js

>```javascript

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

  export default {
    data(){
      return {}
    }, 
     mounted(){
        this.myChart() //函数调用
     },
     methods:{
     	myChart(){
	        let myChart= this.$echarts.init(document.getElementById('myChart'));
	        // var colors = ['rgba(15,115,255,0.6)', 'rgba(15,235,255,0.6)'];
	        var data1 = [350, 250, 170, 360, 240];
	        var data2 = [187, 146, 129, 174,245];
	        var xData = ['3.12','3.13','3.14','3.15','3.16']
	        rightBtns.setOption({
            // backgroundColor:'#fff',
            tooltip: {
                trigger: "axis",
                // formatter: '{b}<br/>{a1}-违规率:{c1}<br/>{a0}-违规率:{c0}',
                axisPointer: {
                  type: "shadow",
                  textStyle: {
                    color: "#fff"
                  }
                },
            },
            grid: {
              top: '8%',
              right: '8%',
              bottom: '60%'
            },
            legend: {
              data: ['省内', '省外'],
              align: 'left',
              left: '30%',
              top: '4%',
              textStyle:{
                  color:'#fff'
              }
            },
            calculable: true,
            xAxis: [{
              type: "category",
              data: xData,
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
            }],
            yAxis: {
              type: 'value',
              // name:'单位:(人次 )',
              min: 0,
              max: 500,
              interval: 100,
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                },
                show:false
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
            },
            series: [{
              name: '省内',
              type: 'bar',
              // color: colors[0],
              data: data1,
              itemStyle:{
                  normal: {
                    //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    //此处的箭头函数是为了不改变this的指向
                    color: (params) => {
                      var index = params.dataIndex;
                      var colorList = [
                        // 渐变颜色的色值和透明度
                        //双柱状图渐变的 第一个柱子的渐变色['rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)','rgba(15,235,255,0)'],
                        ['rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)','rgba(15,235,255,0.6)']  
                      
                      ];
                      if(params.dataIndex >= colorList.length){
                        index=params.dataIndex-colorList.length;
                      }
                      //方法一:
                      //不使用箭头函数的写法改变渐变色
                      // return {
                      //   colorStops: [{
                      //     offset: 0,   //颜色开始的位置
                      //     color: colorList[0][index] // 0% 处的颜色
                      //   },{
                      //     offset: 0.6,  //颜色结束的位置
                      //     color: colorList[1][index] // 100% 处的颜色
                      //   }]
                      // }
                      //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色
                      return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
                        {offset: 0.2, color: colorList[1][index]},
                        {offset: 1, color: colorList[0][index]}
                      ])
                    }
                  }
                }
            },
            {
              name: '省外',
              type: 'bar',
              // color: colors[1],
              data: data2,
              itemStyle:{
                  normal: {
                    //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: (params) => {
                      var index = params.dataIndex;
                      var colorList = [
                        // 渐变颜色的色值和透明度
                        //双柱状图渐变的 渐变第二个柱子的渐变色['rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)','rgba(15,115,255,0)'],
                        ['rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)','rgba(15,115,255,0.6)']  
                      ];
                       //方法一:
                      //不使用箭头函数的写法改变渐变色
                      // return {
                      //   colorStops: [{
                      //     offset: 0,
                      //     color: colorList[0][index] // 0% 处的颜色
                      //   },{
                      //     offset:0.6,
                      //     color: colorList[1][index] // 100% 处的颜色
                      //   }]
                      // }
                      //方法二:使用箭头函数的写法 改变双柱状图的渐变颜色
                      return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
                        {offset: 0.2, color: colorList[1][index]},
                        {offset: 1, color: colorList[0][index]}
                      ])
                    }
                  }
                }
            }]
          })
        }
      }
	}

最终结果