v-charts图形组件使用echarts常用功能

v-charts针不错
主要有 针对柱形图
1、默认某个属性不选中
2、图形中显示当前数值
3、x轴垂直显示
4、右侧功能键如：下载、图形切换
5、顶部切换图形不显示
6、点击某个图形获取x轴值
7、扇形图直接显示百分比
8,修改下载图片分辨率
9、修改x轴字体大小
10、显示重置按钮以及原始数据展示按钮

	<el-tabs type="border-card" v-model="activeName">
		<el-tab-pane label="分数统计图" name="1">
			<el-col :span="24">
				<ve-histogram :events="chartEvents" ref="chart1" :loading="loading2" :data="chartData" :settings="chartSettings" :toolbox="toolbox" :extend="extend"></ve-histogram>
			</el-col>
		</el-tab-pane>
		<el-tab-pane label="总分占比图" name="2">
			<el-col :span="24"><ve-pie ref="chart2" :events="chartEvents" :data="chartData"></ve-pie></el-col>
		</el-tab-pane>
		<el-tab-pane label="分数分布图" name="3">
			<el-col :span="24"><ve-radar ref="chart3" :events="chartEvents" :data="chartData"></ve-radar></el-col>
		</el-tab-pane>
	</el-tabs>

data中的属性

this.extend ={
//控制雷达图的轴显示数值
//radar: {
//					indicator: [{
//							text: '食品生产企业',
//							axisLabel: {
//								show: true,
//								textStyle: {
//									fontSize: 18,
//									color: '#333'
//								}
//							},
//							max: 1
//						}
//
//					]
//				},

			legend: {selected:{"未通过":false}},//控制某个属性是否显示
			series: {
			  label: { show: true }
			},//控制是否在图形中显示数值
			xAxis: {
				// ------------------------横坐标倾斜显示
				axisLabel: {
					margin: 15, //距离
					interval: 0,
					formatter:function(value)
					     {
					         return value.split("").join("\n");
					     },
					     	    textStyle:{
				      fontSize:13,//控制x轴种字体大小及粗细
					  fontWeight:600
				    }
				},
				triggerEvent: true
			}//控制x轴垂直显示，可以调角度之类的
		};
		this.toolbox = {
			feature: {//控制右上角的功能区
				dataView : {show: true},//显示还原按钮及数据按钮
				restore : {show: true},
				magicType: { type: ['bar'] },//切换图形，可以有很多种
				saveAsImage: { pixelRatio: 18  //值越大分辨率越高
				}//添加下载图像功能
			}
		};
		this.chartSettings = {
		label: {
				normal: {
				//控制扇形图直接显示的结果
					formatter: '{b}:{c}' +'\n'+ '({d}%)',
					show: true,
					position: 'left'
				}
			},			
			showLine: ['通过', '未通过'],//控制属性是否以线条显示
			// stack: { 地区: [] },		//控制属性堆叠在一起	，数组中填写要堆叠的属性名
		};
		//下面这些就是获取x轴内容了当然也可以获取值
		let self = this;
		this.chartEvents = {
			click: function(e) {
				console.log(e);
				self.keywords = e.name;
				self.homeTwo(e.name);
			}
		};

return中的值

	chartData: {
		columns: ['地区', '总分', '通过', '未通过'],
		rows: []
	},

watch: {
//解决顶部切换图形异常
	activeName(v) {
	//官网有解释
		this.$nextTick(_ => {
			console.log(_);
			this.$refs[`chart${v}`].echarts.resize();
		});
	}
},

未完待续。。。