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="events" 
	:data="chartData" 
	:legend-visible='false'  //不显示图例
	 height="280px" 
	:judge-width='true' 
	:grid="grid" 
	:colors="colors" :
	:extend="Extend"
	settings="chartSettings">
</ve-histogram>
//:legend-visible='false'  设置图例不显示
//:judge-width='true'  处理生成图表宽度问题 默认false

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

data() {
//events 点击事件  点击图形触发另一事件
   this.events= {
      click: function (e) {
        // self.name = e.name
        self.getSResponseMonit(e.name) //事件方法名
        console.log(e);
      }
    },
    // 设置图表的位置  上下左右距离
    this.grid={top: 40,right:60,bottom:40},
    //柱状图 颜色
    colors:['#488ccf','#ffc95e'],
    //配置项
     this.chartSettings = {
        yAxisName: ['', '单位：千瓦/户']  //单位
     },
     //extend 配置  （重新设置配置）
	 this.Extend = {
      series(v) {
        if (v) {
          v.forEach(i => {
            i.barWidth = 15; //柱状图柱子宽度
          });
          return v;
        }
      },
      tooltip: {  //提示框
        trigger: "axis",   // 触发类型
        axisPointer: {   // 去掉移动的指示线
          type: "none"
        }
      },
      //  X , Y轴文本设置：
       'xAxis.0.axisLabel.textStyle':{color: '#49D9FE'},
       'yAxis.1.axisLabel.textStyle':{color: '#FFF'},
       "yAxis.0.axisLine.show": true,
       "xAxis.0.axisLabel.fontSize": 10, //x轴文本字体大小
       "xAxis.0.axisLabel.interval": 0, //间隔
       'xAxis.0.axisLabel.rotate': 45,//x轴文本倾斜 
    };
	return{
	//绑定的数据
		chartData: {
		        columns: ['planType', '响应量','签约用户数'],
		         rows: [{ 'planType': 'B计划', '响应量': 1393, '签约用户数': 1093},
		         	     { 'planType': 'C计划', '响应量': 1393, '签约用户数': 1033},
		         	     { 'planType': 'D计划', '响应量': 1393, '签约用户数': 1093},
		         	    { 'planType': 'G计划', '响应量': 1393, '签约用户数': 1043}
		            ]
		 },
	}
}