vue使用echarts实现水平柱形图实例

文件结构：

补充知识：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]}
      ])
     }
     }
    }
   }]
   })
  }
  }
	}

最终结果

以上这篇vue使用echarts实现水平柱形图实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。