vue vcharts 使用 柱状图

v-charts 使用

1. 下载：

     npm / cnpm i v-charts echarts -S

2. 在 main.js 文件引入

     import VCharts from 'v-charts'
     Vue.use(VCharts)  //声明

3. 可以直接使用了

   柱状图

1>. 在HTML 代码中写入相应代码占位

<ve-histogram :events="chartEvents2" :data="chartData2" :legend-visible='false' height="280px" :judge-width='true' :grid="grid2" :colors="colors2" :settings="chartSettings"></ve-histogram>
//:legend-visible='false'  设置图例不显示
//:judge-width='true'  处理生成图表宽度问题 默认false

2>在data里配置相关设置 return里:data的数据存储

data() {
//events 点击事件  点击图形触发另一事件
   this.chartEvents2 = {
      click: function (e) {
        // self.name = e.name
        self.getSResponseMonit(e.name) //事件方法名
        console.log(e);
      }
    },
    // 设置图表的位置  上下左右距离
    this.grid2={top: 40,right:60,bottom:40},
    //柱状图 颜色
    colors2:['#488ccf','#ffc95e'],
    //配置项
     this.chartSettings = {
        yAxisName: ['', '单位：千瓦/户']  //单位
     },
	return{
	//绑定的数据
		chartData2: {
		        columns: ['planType', '响应量','签约用户数'],
		         rows: [{ 'planType': 'B计划', '响应量': 1393, '签约用户数': 1093},
		         	     { 'planType': 'C计划', '响应量': 1393, '签约用户数': 1033},
		         	     { 'planType': 'D计划', '响应量': 1393, '签约用户数': 1093},
		         	    { 'planType': 'G计划', '响应量': 1393, '签约用户数': 1043}
		            ]
		 },
	}
}