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',