Vue—Echarts 柱状图

使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据，下面是使用Echarts柱状图来展示对应数据的实例。

ee05abaf9633184a9c012631b642d970.png

1. 使用npm安装Echarts

npm install echarts --save

2. 在man.js中引入对应的echarts

import ECharts from 'vue-echarts'  // 在 webpack 环境下指向 components/ECharts.vue
/* 引入echarts工具 */
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

3. 在vue文件下的编写

<v-chart ref="TrendChart" :style="{width:'100%',height: '298px'}" :options="optionTrend"></v-chart>

data() {
    return {
      optionTrend: {
        color: ['#2860fc'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {   // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'    // 默认为直线，可选为：'line' | 'shadow'|'none'
          }
        },
        title: {
          text: '金额数量',
          top: '15',
          left: '-3',
          textStyle:{
            fontSize: 14,   //字体大小
            color: '#666666',   //字体颜色
            fontWeight: '500'
          },
        },
        grid: {
          left: '-27',
          right: '4',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [ {
          type: 'category',
          data: ['0-5K', '5K-3W', '3W-5W', '5W-10W', '10W以上',],
          axisLine: {   // 改变x轴颜色
            lineStyle: {
              color: '#c1c1c1',
              width: '1',
            }
          },
          axisLabel: {    // 改变x轴字体颜色和大小
            textStyle: {
              color: "#666666",
              fontSize: 12,
            },
          },
        } ],
        yAxis: [ {
          type: 'value',
          axisTick: 'none',    // 右边轴样式的显示
          axisLine: 'none',    // 右边轴样式的显示
          // 修改网格的颜色
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#f5f5f5'
            }
          },
        } ],
        series: [ {
          name: '',
          type: 'bar',
          barWidth: '50%',
          data: [10, 52, 200, 334, 390,]
        } ]
      },
  }
},

beforeDestroy() {
  window.removeEventListener("resize", this.resizeTheChart);
},
mounted(){
  window.addEventListener("resize", this.resizeTheChart);
}, 
methods:{
  resizeTheChart() {
    if (this.$refs.TrendChart) {
      this.$refs.TrendChart.resize();
    }
},

27c1eac97e42e440849ac938a0bc4574.png

1. 应为上面已经贴过template、beforeDestroy、mounted和methods里面的代码了这里只贴对应options里面的代码

dataRecordOptions: {
  grid: {
    left: '40',
    right: '20',
    bottom: '30',
    top: '30',
  },
  tooltip : {
    trigger: 'axis',
    axisPointer: {
      type: 'none',   // 中间横线
    },
  },
  xAxis: {
    data: ['数字身份','存证','数据报送','电子合同',],
    axisLine: 'none',
    axisLabel: {
      color: '#fff',
      fontSize: 12,
      fontWeight: 500,
    }
  },
  yAxis: {
    type : 'value',
    axisLabel: {
      textStyle: {
        fontSize: 12,   //字体大小
        color: '#137cf2',   //字体颜色
      },
      formatter: function (value, index) {
        if (value >= 10000 && value < 10000000) {
          value = value / 10000 + "万";
        } else if (value >= 10000000 && value < 100000000) {
          value = value / 10000000 + "千万";
        } else if (value >= 100000000) {
          value = value / 100000000 + "亿";
        }
        return value;
      }
    },
    splitLine: {
      show:true,
      lineStyle: {
        color: '#737f8d',
        type: 'dashed',   // 背景为虚线
      }
    },
    axisTick: 'none',  // 右边轴样式的显示
    axisLine: 'none',  // 右边轴样式的显示
  },
  series: [{
    type: 'bar',
    barWidth: 30,
     smooth:false,
     itemStyle:{
       normal: {
         color: function(params) {
           var colorList = ['#137cf2','#f89009','#f8d909','#01cc78',];
           var colorListr = ['#137cf2','#f8d909','#f89009','#5e00a6',];
           return colorListr[params.dataIndex]
         },
       },
     },
     label: {
       normal: {
         show: true,
         fontSize: 12,
         fontWeight: '500',
         color: '#ffffff',
         position: 'top',
       }
     },
     data: [10000,12000,8000,14000],
   }],
}