echarts 绘图 的 代码片段

软件版本:

eCharts 5.4.3

vue.js 3.2.36

Element Plus 2.3.12

--

 

序章

官网:
https://echarts.apache.org/zh/index.html

快速上手:
https://echarts.apache.org/handbook/zh/get-started/

下载方式1:jsDelivr CDN
https://www.jsdelivr.com/package/npm/echarts

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

 

本文简单试验 eCharts 绘图的使用,整理一些 代码到这里,方便有需要时使用。

 

下载

除了全量下载,还可以定制获取。

https://echarts.apache.org/zh/download.html

 

试验方式

1、下载 echarts.min.js ,在 html 中引用本地 echarts.min.js。

2、结合 vue.js 3 实现绘图。

 

<script src="../js/echarts.min.js"></script>

 

普通绘图:官网

代码:更改了 style 的 宽高

<body>
	<div id="main" style="width: 100%;height:300px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom,初始化echarts实例
		let myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		let option = {
			title: {
				text: 'ECharts 入门示例'
			},
			tooltip: {},
			legend: {
				data: ['销量']
			},
			xAxis: {
				data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>
</body>

效果:

 

改为:折线图(line)

将 series 下的 type 由 bar 改为 line 即可。

效果:

 

改为:多条折线

修改 option 下的 legend、series 即可:

let option = {
	title: {
		text: 'ECharts 入门示例'
	},
	tooltip: {},
	legend: {
		data: ['10月销量', '11月销量', '12月销量']
	},
	xAxis: {
		data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: {},
	series: [{
		name: '10月销量',
		type: 'line',
		data: [5, 6, 7, 8, 9, 10]
	}, {
		name: '11月销量',
		type: 'line',
		data: [5, 20, 36, 10, 10, 20]
	}, {
		name: '12月销量',
		type: 'line',
		data: [15, 120, 136, 110, 110, 120]
	}]
};

效果:

 

改为:鼠标在图上移动时显示数据

在前面的图中,只有鼠标在图中节点上时才显示数据——一个点。

修改 tooltip 即可实现。

下面实现,鼠标划过图上 x轴上方时显示数据。

代码:

tooltip: {
	/* 添加下面的 */
	trigger: 'axis'
},

效果:

 

tooltip 配置项

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

属性 show 默认为 true——显示。

其中的 trigger 选项,默认 item,可选 axis、none。

官文:

tooltip. trigger  = 'item' 试一试
string
触发类型。

可选:
'item'
数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。

'axis'
坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
在 ECharts 2.x 中只支持类目轴上使用 axis trigger,在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。
并且可以通过 axisPointer.axis 指定坐标轴。

'none'
什么都不触发。

前面的示例 只是简单显示数据,更复杂的数据显示,请看官文。

 

添加工具栏:toolbox

工具栏。内置有 导出图片,数据视图,动态类型切换,数据区域缩放,重置 五个工具。

在配置项中添加 toolbox 选项即可。

代码:

let option = {
	title: {
		text: 'ECharts 入门示例'
	},
	tooltip: {
		trigger: 'axis'
	},
	toolbox: {
		/* 工具栏 */
		show: true,
		feature: {
			dataZoom: {
				yAxisIndex: 'none'
			},
			dataView: {
				readOnly: false
			},
			magicType: {
				type: ['line', 'bar']
			},
			restore: {},
			saveAsImage: {}
		}
	},
	// 省略更多内容

效果:

通过 工具栏 切换为 柱状图:

通过 工具栏 显示数据:

 

通过 工具栏 下载图片:得到一个 png 图片

 

toolbox 配置项

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

前面示例用到的 feature 属性:

 

可以根据需要,做更多配置。ben发布于博客园

 

TODO 中文怎么弄?本地化。

 

改为:多个 Y 轴

前面的示例中,数据有多个,但是,Y轴只有一个,导致数据小的很难看到趋势。

需要配置 yAxis,并设置 series 下的 数据的 yAxisIndex 配置项。

代码:

let option = {
	title: {
		text: 'ECharts 入门示例'
	},
	tooltip: {
		trigger: 'axis'
	},
	toolbox: {
		/* 工具栏 */
		show: true,
		feature: {
			dataZoom: {
				yAxisIndex: 'none'
			},
			dataView: {
				readOnly: false
			},
			magicType: {
				type: ['line', 'bar']
			},
			restore: {},
			saveAsImage: {}
		}
	},
	legend: {
		data: ['10月销量', '11月销量', '12月销量']
	},
	xAxis: {
		data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: [
		/* 3个Y周 */
		{
			name: '10月',
			type: 'value'
		},
		{
			name: '11月',
			type: 'value'
		},
		{
			name: '12月',
			type: 'value',
			/* 设置后和 上一个分开 */
			offset: 50,
		}
	],
	series: [{
		name: '10月销量',
		type: 'line',
		data: [5, 6, 7, 8, 9, 10]
	}, {
		name: '11月销量',
		type: 'line',
		/* 设置数据对应的Y轴,默认都是 最左边第1个 */
		yAxisIndex: 1,
		data: [5, 20, 36, 10, 10, 20]
	}, {
		name: '12月销量',
		type: 'line',
		/* 设置数据对应的Y轴,默认都是 最左边第1个 */
		yAxisIndex: 2,
		data: [115, 1120, 1136, 1110, 1110, 1210]
	}]
};

效果(使用 工具栏下载的 png 原图 上传):

从上图可以看到,销量数据较小的 10月、11月 的数据变化趋势 也很明显了。ben发布于博客园

 

yAxis 配置项

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

官文:直角坐标系 grid 中的 y 轴,一般情况下单个 grid 组件最多只能放左右两个 y 轴,多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

文档这里 有点问题

一来就是一个 大括号({),其实呢,可以配置为 中括号([)——多个Y轴

知道看了 官方示例的 下图的源码,才知道可以用 中括号。

https://echarts.apache.org/examples/zh/editor.html?c=area-rainfall

更多内容,请看官文。

resize 功能

在浏览器窗口缩放时,绘制的图是不变化的,因此,需要再改进。

添加下面这句即可实现:

window.addEventListener('resize', myChart.resize);

位置:setOption 调用之后。

 

vue.js 3 + eCharts

在当前页面绘制

重点:

1、<div>元素使用 ref 属性,绘图时使用,this.$refs 获取元素——“this.$refs.containerDiv”;

2、使用 vue.js 3 的方式为 直接引入 js文件,而非基于 node.js 进行。

 

代码:ben发布于博客园

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ECharts Demo:官网-Vue</title>
		<script src="../js/echarts.min.js"></script>

<script src="../js/vue_3.2.36_vue.global.min.js"></script>
	</head>
<body>
	<div id='app'>
		<div ref="containerDiv" style="width: 100%;height:300px;"></div>
	</div>
</body>
<script type="text/javascript">
const root = {
	data() {
		return {
		};
	},
	mounted() {
		this.drawChart();
	},
	methods: {
		drawChart() {
			let container = this.$refs.containerDiv;
			
			let myChart = echarts.init(container, null, {
				// renderer: 'canvas',
				renderer: 'div',
				useDirtyRect: false
			});
			
			// 指定图表的配置项和数据
			
			// 指定图表的配置项和数据
			let option = {
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {
					trigger: 'axis'
				},
				toolbox: {
					/* 工具栏 */
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {
							readOnly: false
						},
						magicType: {
							type: ['line', 'bar']
						},
						restore: {},
						saveAsImage: {}
					}
				},
				legend: {
					data: ['10月销量', '11月销量', '12月销量']
				},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				},
				yAxis: [
					/* 3个Y周 */
					{
						name: '10月',
						type: 'value'
					},
					{
						name: '11月',
						type: 'value'
					},
					{
						name: '12月',
						type: 'value',
						/* 设置后和 上一个分开 */
						offset: 50,
					}
				],
				series: [{
					name: '10月销量',
					type: 'line',
					data: [5, 6, 7, 8, 9, 10]
				}, {
					name: '11月销量',
					type: 'line',
					/* 设置数据对应的Y轴,默认都是 最左边第1个 */
					yAxisIndex: 1,
					data: [5, 20, 36, 10, 10, 20]
				}, {
					name: '12月销量',
					type: 'line',
					/* 设置数据对应的Y轴,默认都是 最左边第1个 */
					yAxisIndex: 2,
					data: [115, 1120, 1136, 1110, 1110, 1210]
				}]
			};
			
			myChart.setOption(option);
			
			window.addEventListener('resize', myChart.resize);
		},
	},
	watch: {
	}
};
const app = Vue.createApp(root);
const vm = app.mount('#app');
</script>
</html>

效果:ben发布于博客园

 

在 弹窗 中绘制

说明,需要使用和 vue.js 3.0 搭配的 Element Plus 一起使用。

<!-- element-plus 本地 -->
<link rel="stylesheet" href="../js/element-plus/unpkg.com_element-plus@2.3.12_dist_index.css" />
<script src="../js/element-plus/unpkg.com_element-plus@2.3.12_dist_index.full.min.js"></script>
<!-- element-plus: icons -->
<script src="../js/element-plus/unpkg.com_@element-plus_icons-vue@2.1.0_dist_index.iife.min.js"></script>

注意,ben发布于博客园

1、弹窗没有显示时,无法绘制;

2、设置弹窗现实后,无法 立即绘制——存在错误。

都是由于 <div> 元素没有渲染完成。

解决:

先打开弹窗,再点击 弹窗上的按钮进行绘制。

当然,也可以使用 异步监听方案 实现,TODO。

 

代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ECharts Demo:官网-Vue-弹窗后绘图</title>

<script src="../js/vue_3.2.36_vue.global.min.js"></script>
<script src="../js/axios@1.4.0_dist_axios.min.js"></script>
<script src="../js/moment.min.js"></script>

<!-- element-plus 本地 -->
<link rel="stylesheet" href="../js/element-plus/unpkg.com_element-plus@2.3.12_dist_index.css" />
<script src="../js/element-plus/unpkg.com_element-plus@2.3.12_dist_index.full.min.js"></script>
<!-- element-plus: icons -->
<script src="../js/element-plus/unpkg.com_@element-plus_icons-vue@2.1.0_dist_index.iife.min.js"></script>

<script src="../js/echarts.min.js"></script>
	</head>
	<body>
		<div id='app'>
			<el-button @click="showDrawDialog">绘图弹窗</el-button>
			<el-dialog v-model="dialogs.draw.visible" title="绘图" top="5vh" style="width: 80%;">
				<el-button type="primary" @click="drawChart">绘图1</el-button>
				<el-button type="primary" @click="drawChart2">绘图2</el-button>
				<div ref="containerDiv" style="width: 80%;height: 15rem;"></div>
				<div ref="containerDiv2" style="width: 80%;height: 15rem;"></div>
			</el-dialog>
		</div>
	</body>
<script>
const rootDialog01 = {
	data() {
		return {
			dialogs: {
				draw: {
					visible: false,
				},
			},
		};
	},
	mounted() {
		this.initPage();
	},
	methods: {
		initPage() {
		},
		showDrawDialog() {
			this.dialogs.draw.visible = true;
			
			// 不可以 直接调用:弹窗打开是 绘图div还没绘制完成。
			// this.drawChart(); 
		},
		drawChart() {
			let container = this.$refs.containerDiv;
			
			let myChart = echarts.init(container, null, {
				// renderer: 'canvas',
				renderer: 'div',
				useDirtyRect: false
			});
			
			// 指定图表的配置项和数据
			let option = {
				title: {
					text: '图1'
				},
				tooltip: {
					trigger: 'axis'
				},
				toolbox: {
					/* 工具栏 */
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {
							readOnly: false
						},
						magicType: {
							type: ['line', 'bar']
						},
						restore: {},
						saveAsImage: {}
					}
				},
				legend: {
					data: ['10月销量', '11月销量', '12月销量']
				},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				},
				yAxis: [
					/* 3个Y周 */
					{
						name: '10月',
						type: 'value'
					},
					{
						name: '11月',
						type: 'value'
					},
					{
						name: '12月',
						type: 'value',
						/* 设置后和 上一个分开 */
						offset: 50,
					}
				],
				series: [{
					name: '10月销量',
					type: 'line',
					data: [5, 6, 7, 8, 9, 10]
				}, {
					name: '11月销量',
					type: 'line',
					/* 设置数据对应的Y轴,默认都是 最左边第1个 */
					yAxisIndex: 1,
					data: [5, 20, 36, 10, 10, 20]
				}, {
					name: '12月销量',
					type: 'line',
					/* 设置数据对应的Y轴,默认都是 最左边第1个 */
					yAxisIndex: 2,
					data: [115, 1120, 1136, 1110, 1110, 1210]
				}]
			};
			
			myChart.setOption(option);
			
			
			window.addEventListener('resize', myChart.resize);
		},
		drawChart2() {
			let container = this.$refs.containerDiv2;
			
			let myChart = echarts.init(container, null, {
				// renderer: 'canvas',
				renderer: 'div',
				useDirtyRect: false
			});
			
			// 指定图表的配置项和数据
			let option = {
				title: {
					text: '图2'
				},
				tooltip: {
					trigger: 'axis'
				},
				toolbox: {
					/* 工具栏 */
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {
							readOnly: false
						},
						magicType: {
							type: ['line', 'bar']
						},
						restore: {},
						saveAsImage: {}
					}
				},
				legend: {
					data: ['10月销量', '11月销量', '12月销量']
				},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				},
				yAxis: [
					/* 3个Y周 */
					{
						name: '10月',
						type: 'value'
					},
					{
						name: '11月',
						type: 'value'
					},
					{
						name: '12月',
						type: 'value',
						/* 设置后和 上一个分开 */
						offset: 50,
					}
				],
				series: [{
					name: '10月销量',
					type: 'line',
					data: [5, 6, 7, 8, 9, 10]
				}, {
					name: '11月销量',
					type: 'line',
					/* 设置数据对应的Y轴,默认都是 最左边第1个 */
					yAxisIndex: 1,
					data: [5, 20, 36, 10, 10, 20]
				}, {
					name: '12月销量',
					type: 'line',
					/* 设置数据对应的Y轴,默认都是 最左边第1个 */
					yAxisIndex: 2,
					data: [115, 1120, 1136, 1110, 1110, 1210]
				}]
			};
			
			myChart.setOption(option);
			
			window.addEventListener('resize', myChart.resize);
		},
	},
	watch: {
	}
};
const app = Vue.createApp(rootDialog01);

// 使用 E.P
app.use(ElementPlus);

const vm = app.mount('#app');
</script>
</html>

效果:ben发布于博客园

 

---END---

ben发布于博客园

本文链接:

https://www.cnblogs.com/luo630/p/17884762.html

 

参考资料

1、javaScript与vue获取元素的方法

https://blog.csdn.net/wanjun_007/article/details/129103715

小宛碎碎冰 于 2023-02-18 19:38:53 发布

2、vue里ref ($refs)用法

https://www.cnblogs.com/goloving/p/9404099.html

posted @ 2018-08-01 21:43  古兰精

3、

 

ben发布于博客园

ben发布于博客园

 

posted @ 2023-12-08 16:55  快乐的总统95  阅读(15)  评论(2编辑  收藏  举报