vue项目echarts常用使用介绍

基本使用方式可以看另一篇内容

https://blog.csdn.net/weixin_44258964/article/details/106695019

一、常用介绍

通用

坐标轴距离外围盒子距离

grid: {
    x: this.smallPie ? '50' : '60', // 左侧
    y: 50, // 上侧
    x2: 30, // 右侧
    y2: this.smallPie ? '50' : '35', // 下侧
},

坐标轴样式

// 横坐标样式
xAxis: {
	type: 'category’,//固定值类型
	data: this.type,//自定义值
	axisTick: {//坐标轴刻度
	show: false
},
axisLine: {
    lineStyle: this.lineStyle
},
axisLabel: this.axisLabel
},
// 纵坐标样式
yAxis: {
	type: 'value’,//自适应取值
	splitLine: {//显示轴线
		show: true,
		lineStyle: {
			type: 'dashed’,// 虚线
			color: 'rgba(37, 37, 46, 0.2)'
		}
	},
	axisLine: {
	show: false,
	// 设置坐标走轴线类型
	lineStyle: {
	    type: 'solid',
	    color: '#D3D3D5',
	    width: 1
	},
	},
	axisLabel: this.axisLabel,
	axisTick: {
	show: false
	}
},

标题设置

title: {
	text: this.allWord.echartTitle,
	left: 8,// 标题居左
	textStyle: {
		color: '#515158',
		fontSize: 12, // 务必记住设置文字大小只能是数字
		fontWeight: 'normal',
		fontFamily: 'PingFangSC-Regular',
		lineHeight: 36,
		marginLeft: 10
	}
},

图例

tooltip: {
	show: true,// 显示图例
	formatter: function(params) {
	// alert(JSON.stringify(params)); // 显示数据格式
	// params.marker 表示图例那个小图标
	var res = `<div><p><span style="margin:0 2px 0 2px">${params.marker}</span>${params.data.name} ${params.data.value}%</p></div>`;
	return res;
	}
},

二、不同图介绍使用

折线图

series: [{
	data: this.count,
	type: 'line',
	smooth: true,
	// 折线颜色
	color: [that.lineColor],
	// 折线图的样式、设置渐变颜色,可设置多个颜色,颜色越多渐变越丰富
	areaStyle: {
		normal: {
		color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
		{ offset: 0, color: that.lineColor },
		{ offset: 1, color: '#fff' }
		])
	}
	}
}],

柱形图

// 数据及样式设置
series: [{
	data: this.count,
	type: 'bar’,//柱形图
	color: [that.lineColor],
	barWidth: '20’,//柱形宽度
	barCategoryGap: ’50’//同一系列的柱间距离，默认为类目间距的20%，可设固定值
}],

饼图

// 图例设置
legend: {
	orient: 'vertical',//竖直显示
	type: 'scroll',//数据滚动、当数据多的时候会有滚动样式
	right: this.smallPie ? '30' : '50',
	top: this.smallPie ? '30' : 'center',
	height: '80%',
	data: this.type,
	icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
	textStyle: { fontSize: '12', color: '#515158', padding: 4 },
	itemWidth: 9,// 图例大小
	pageButtonGap: 4,//图例控制块和图例项之间的间隔
	itemGap: 8,// 图例每项之间的间隔
	selectedMode: false,// 控制图例是否可选择
	pageIconSize: 8, // 翻页图标大小设置
	pageIconColor: '#569CF6’, // 翻页图标颜色设置
	pageIconInactiveColor: '#A8A8AB'
},

// 数据设置
series: [{
	type: 'pie’,//饼图
	// 中间白色圆周面积比例
	radius: ['50%', '70%'],
	avoidLabelOverlap: false,//是否启用防止标签重叠策略，默认开启
	label: {
	show: false// hover数据显示圆中心
	},
	center: ['60%', '50%’],//饼图位置
	width: '50%’,// 饼图宽度
	data: //多项数据可以提前将数据处理
	{name: item,
	value: 12,
	//设置饼图间隔
	itemStyle: { color: ‘red',borderWidth:1}
	
	}
}],

三、参考

https://echarts.apache.org/zh/option.html#title