Echarts使用及体验

月下绯烟

已于 2023-03-06 17:34:27 修改

阅读量122

点赞数

文章标签： echarts 前端 javascript

于 2023-03-06 17:30:17 首次发布

本文链接：https://blog.csdn.net/qq_45654741/article/details/129366871

版权

本文展示了如何使用Echarts库创建数据可视化图表，包括柱状图、折线图和饼图。首先引入Echarts依赖，然后初始化两个图表实例，分别设置不同的配置项，如标题、X轴、Y轴、系列类型和数据，以及提示组件和工具栏功能。最后，通过DOM选择器获取元素并渲染图表，呈现了多图表在同一页面上的效果。

摘要由CSDN通过智能技术生成

引入依赖准备容器初始化实例设置配置项

<!-- 引入echarts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.common.min.js"></script>
html
<div class="box1"></div>
<div class="box2"></div>
css
* {
	margin: 0;
		padding: 0;
	}

	.box1,
	.box2 {
		width: 800px;
		height: 400px;
	}

let dom1 = document.querySelector('.box1')
let dom2 = document.querySelector('.box2')
// console.log(echarts)
let myEcharts1 = echarts.init(dom1)
let myEcharts2 = echarts.init(dom2)
// 数据集
// let data = []
// console.log(myEcharts1)
// 指定图表的配置项与数组
			myEcharts1.setOption({
				// 图表标题
				title: {
					// 主标题
					text: '数据可视化',
					// 子标题
					subtext: 'Echarts入门',
					// 设置主标题颜色
					textStyle: {
						color: 'red'
					},
					// 设置标题位置
					left: 'center',
				},
				// 配置X轴
				xAxis: {
					data: ['衣服', '直播', '游戏', '电影']
				},
				// 配置Y轴
				yAxis: {
					axisLine: {
						show: true
					},
					axisTick: {
						show: true
					}
				},
				// 系列设置
				series: [{
					// 图表类型设置
					// bar柱状图 line折线图 pie饼图 scatter散点 可与xy轴设置type:'category'
					type: 'bar',
					// 图表数据
					data: [10, 20, 30, 40, 50, 60],
					color: 'red'
				}],
				// 提示组件
				tooltip: {
					textStyle: {
						color: 'orange'
					},
				},
				// 工具栏组件
				toolbox: {
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: "none"
						},
						dataView: {
							readOnly: false
						},
						magicType: {
							type: ["line", "bar"]
						},
						restore: {},
						saveAsImage: {}
					},
				},
				dataZoom:{}
			});
			myEcharts2.setOption({
				title: {
					// 主标题
					text: 'Echarts折线图',
					left: 'left',
					textStyle: {
						color: 'red'
					},
					subtext: 'Echarts多图表',
					subtextStyle: {
						color: 'cyan'
					}
				},
				xAxis: {
					data: ['Monday', 'Tuesday', 'Wednesday', 'ThursDay', 'Friday', 'Saturday', 'Sunday']
				},
				yAxis: {},
				// 设置图表类型与数据
				series: [{
					name: '折线图',
					type: 'line',
					data: [10, 20, 25, 60, 35, 40, 75],
					color: 'cyan'
				}, {
					name: '饼图',
					type: 'pie',
					data: [{
						value: 30,
						name: 'ApplePie'
					}, {
						value: 20,
						name: 'OrangePie'
					}, {
						value: 40,
						name: 'PineapplePie'
					}, {
						value: 50,
						name: 'BananaPie'
					}],
					width: 200,
					height: 200,
					left: 150,
					top: 25,
					// 此处饼图容易溢出隐藏
					radius: 30
				}, {
					name: '柱状图',
					type: 'bar',
					data: [55, 25, 35, 45]
				}],
				// 提示组件
				tooltip: {
					textStyle: {
						color: 'orange'
					},
				},
				// 系列切换组件
				legend: {
					data: ['柱状图', '折线图', '饼图']
				}
			})