Echarts柱状图横向排版颜⾊渐变效果

1. 

使⽤ echarts 版本: "echarts": "^4.3.0"

2. 

安装⽅式: cnpm install echarts --save 或者 cnpm install echarts -S

3. 

在 main.js ⼊⼝⽂件中全局引⼊:

 import* Vue *from* 'vue'

 import* Echarts *from* 'echarts' *// 

引⼊

Echarts*

 Vue.prototype.$echarts = Echarts

4. 

echarts 配置⽂件( ⽂件名 echartsMould.js )

1. 

我这边的处理⽅式是将

 echarts 

的配置内容抽取为单独的

 JS 

⽂件，这样我维护起来会⾮常的⽅便舒服。

2. 

另外这样的处理⽅式也会减少

 .vue 

⽂件的⼤⼩，代码看起来也会⾮常⽅便整洁。

3. 

这样的处理⽅式也⽅便组件化的实现。

import echarts from 'echarts'

/**

 * 2. 

拥堵路段

--carJam.vue

 */

var option_carJam = {

  title: {

    show: false

  },

  tooltip: {

    trigger: 'axis',

    axisPointer: {

      type: 'shadow'

    },

    textStyle: { // 

设置提⽰框的对齐⽅式

      align: 'left'

    }

  },

  legend: {

    show: false

  },

  grid: {

    left: '3%',

    right: '2%',

    top: '5px',

    bottom: '0',

    containLabel: true

  },

  xAxis: {

    type: 'value',

    boundaryGap: [0, 0.01],

    splitLine: { // 

去除背景⽹格线

      show: false

    },

    axisTick: { // 

刻度

      show: false // 

不显⽰刻度线

    },

    axisLine: { // 

设置轴线

      show: false

    },

    axisLabel: {

      show: false

    }

  },