首页 > 其他分享 >echarts 绘图 的 代码片段

echarts 绘图 的 代码片段

时间：2023-12-08 17:01:26浏览次数：44  
标签：10 片段 月销量 name data 绘图 line type 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/[email protected]/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/[email protected]_dist_index.css" />
<script src="../js/element-plus/[email protected]_dist_index.full.min.js"></script>
<!-- element-plus: icons -->
<script src="../js/element-plus/unpkg.com_@[email protected]_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/[email protected]_dist_axios.min.js"></script>
<script src="../js/moment.min.js"></script>

<!-- element-plus 本地 -->
<link rel="stylesheet" href="../js/element-plus/[email protected]_dist_index.css" />
<script src="../js/element-plus/[email protected]_dist_index.full.min.js"></script>
<!-- element-plus: icons -->
<script src="../js/element-plus/unpkg.com_@[email protected]_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发布于博客园

 

标签：10,片段,月销量,name,data,绘图,line,type,echarts
From： https://www.cnblogs.com/luo630/p/17884762.html

相关文章

  • 【分享代码片段】terraform中，如何从刚刚创建的 deployment 中获得所有容器的名字和 ip
    作者:张富春(ahfuzhang)，转载时请注明作者和引用链接，谢谢！cnblogs博客zhihuGithub公众号:一本正经的瞎扯不好意思，刚刚才开始用terraform，或许是更好的办法而我不知道。知道的朋友请一定教教我。下面是我的办法：provider"kubernetes"{config_path="../k8s.yaml"}......
  • Python-xlrd读取Excel指定列a~b行数据并绘图
    importxlrd#读取Excel文件wb=xlrd.open_workbook(r"E:\PythonStudyAll\TestD20231130\1111.xlsx")data=wb.sheet_by_name('Sheet1')#定义要读取的列和行范围column_index_x=0#第一列的索引为0column_index_y=1#第一列的索引为0start_row=2#起始行索......
  • 科研绘图与学术图表绘制：从入门到精通
    ......
  • ECharts饼图颜色设置的4种方式总结
    信铁寒胜实测：用了下面第三种方式，改了饼状图的颜色 ECharts饼状图颜色设置教程方法一：在 series 内配置饼状图颜色方法二：在 option 内配置饼状图颜色方法三：在 data 内配置饼状图颜色方法四：配置ECharts饼状图随机颜色Charts饼状图中的每个扇形颜色其实都可以自......
  • echarts饼图实现图例翻页
    实现步骤：1、echarts安装npminstallecharts2、页面引入import*asechartsfrom'echarts'3、容器<divref="talentDemandChart"style="width:350px;height:250px;text-align:center;position:absolute;left:10px;top:70px;"></div......
  • echarts中自定义tooltip的换行问题
    echarts中自定义tooltip的换行问题使用extraCssText属性 在官网文档中描述tooltip:{trigger:'item',show:true,formatter:'{b}:{c}({d}%)',extraCssText:'max-width:200px;white-space:pre-wrap;wor......
  • echarts：ReferenceError: echarts is not defined
    echarts资源引用正常，但却出现定义报错。原因：引入echarts.js位置不正确，导致未引入js时，却使用了echarts。解决：先引入echarts.js再使用建议将引入放在body后，否则可能会出现>TypeError:Cannotreadpropertiesofnull(reading'getAttribute')......
  • Vue3用户代码片段
    1.defineComponent语法{ "Printtoconsole":{ "prefix":"vue3", "body":[ "<template>", "<divclass=\"container\">", "", "</div>&q......
  • 极语言3-12绘图启动类、编解码类、串口通讯类、串口系统类、串口时间类、串口配置类—
    中文名字英文名称长度作用解释绘图启动类GdiplusStartupInput24包含GdiplusStartup函数所需的一个参数块。绘图启动类——成员表版本GdiplusVersion整数必须为1回调DebugEventCallback整数可以在调试版本上调用的回调函数的指针背景SuppressBackgroundThread整数指定是否禁止显示G......
  • 极语言3-16公用绘图对象——方法表
    英文名字中文名称作用解释IDirectDraw公用绘图对象使用驱动显示接口的方法创建绘图对象并使用系统级变量。公用绘图对象——方法表QueryInterface接口(标识,@指针)检索指向对象上支持的接口的指针。AddRef计数递增对象上接口的引用计数。对于指向对象上接口的指针的每个新副本，应调......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99