echarts

最新推荐文章于 2024-10-30 19:10:39 发布

ALotOfHoles

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量333

点赞数

文章标签： echarts javascript

本文链接：https://blog.csdn.net/ALotOfHoles/article/details/121662937

版权

本文深入探讨了Echarts库，包括其定义、核心概览、图标类型、颜色修改、特别样式如渐变和线型，以及数据堆叠、标签设置等。还讨论了Echarts中的多图表布局、轴线指定和自定义主题，提供了实例展示Echarts的丰富功能。

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

echarts

定义

javascript的图表的库
百度捐给apache基金会
比较符合中国人习惯
HeightCharts，D3为同行

核心概览

instance实例
series系列
tooltip 提示
legend 图例
xAxis x轴
yAxis y轴
toolbox 工具箱
dataZoom 缩放
vitualMap 虚拟映射

图标常用类型

bar 柱状
pie 饼型— radius:[“60%”,40%]
line 线性 --areaStyle 面 smooth:true 平滑

颜色的修改

主题：自定义颜色

light,dark浅色与深色

自定义主题

自定义主题地址

color：调色盘
color系列调色盘
itemStyle normal 默认 emphasis 强调状态

特别样式

渐变

var mycolor = {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'aqua' // 0% 处的颜色
					}, {
						offset: 1,
						color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
					}],
					global: false // 缺省为 false
				};

线的样式 lineStyle

lineStyle：{
width：12,
cap:“round”
opacity:0.7,
},

面的样式

areaStyle{
color：linear2,
}

数据的堆叠

stack:true

label标签

show：true 是否显示

格式化

formatter："{
{a}{b}{c}
}"
a 代表数据名
b 系列名
c 数字

位置

position
insideRight 内部右侧
top/left/right/bottom/inside

颜色

color

多图表

网格布局

grid
top/left/right/bottom/
height
width

轴线指定

xAxis yAxis
gridIndex:0,gridIndex:1

数据指定轴线

xAxisIndex:0
yAxisIndex:0

echarts基本用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>//引入echarts
		<script src="js/purple-passion.js"></script>//引入自定义主题
		<style>
			#container {
				width: 1000px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<div id="container">

		</div>
		<script>
			// 01 修改主题 dark light , 自定义
			// 02 修改调色盘
			// 初始化echart实例
			var echart = echarts.init(document.getElementById("container"));
			// 定义选项
			var option = {
				// 调色盘
				// color:["#5000ab","#f70","#0f7"],
				// 标题
				title: {
					text: "前端大讲堂数据"
				},
				// 鼠标提示
				tooltip: {},
				// 图例
				legend: {
					data: ["人数", "人气", "年龄分布"]
				},
				// x轴线
				xAxis: {
					data: ["12-1", "12-2", "12-3", "12-4", "12-5"]
				},
				// y轴线
				yAxis: {},
				// 系列数据
				series: [
					// 名称，类型（柱状图），数据data
					{
						name: "人数",
						type: "bar",
						data: [1000, 800, 500,{value:900,itemStyle:{color:"pink"}}, 1300]
					},
					// areaStyle:{color:"#f70"} 面积区域
					{
						name: "人气",
						type: "line",
						smooth: true,
						data: [200, 35, 1500, 80, 1400]
					},
					{
						name: "年龄分布",
						type: "pie",
						radius: ["20%", "10%"],
						// color:["#5000ab","#f70","#0f7"],
						data: [{
								name: "少年",
								value: 20
							},
							{
								name: "青年",
								value: 50
							},
							{
								name: "中年",
								value: 30,
								// 条目样式
								itemStyle: {
									// 正常样式
									normal: {
										color: "#f70"
									},
									// 强调样式
									emphasis: {
										color: "#f3ff00"
									},
								},
							},
							{
								name: "老年",
								value: 8
							},
						]
					}
				]
			};
			// 设置参数
			echart.setOption(option)
		</script>
	</body>
</html>

echarts特殊样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style>
			#container {
				width: 1000px;
				height: 600px;
			}
		</style>
	</head>
	<body>
		<div id="container">

		</div>
		<script>
			var mycolor = {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0,
					color: 'aqua' // 0% 处的颜色
				}, {
					offset: 1,
					color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
				}],
				global: false // 缺省为 false
			};
			var mycolor2 = {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0,
					color: 'rgba(0,85,255,0.7)' // 0% 处的颜色
				}, {
					offset: .7,
					color: 'rgba(29, 249, 231, 0)' // 100% 处的颜色
				}],
				global: false // 缺省为 false
			};
			var echart = echarts.init(document.getElementById("container"), "dark");
			var option = {
				title: {
					text: "特殊方式"
				},
				legend: {
					data: "人数"
				},
				tooltip: {},
				xAxis: {
					data: ["12-1", "12-2", "12-3", "12-4", "12-5"]
				},
				yAxis: {},
				series: [{
						name: "人数",
						type: "bar",
						data: [20, 50, 80, 30, 50],
						// 渐变颜色，圆角
						itemStyle: {
							color: mycolor,
							borderRadius: [100, 100, 0, 0]
						}
					},
					{
						name: "人数",
						type: "line",
						smooth: true,
						data: [20, 30, 70, 100, 70],
						lineStyle: {
							width: 10,
							cap: "round"
						},
						areaStyle: {
							corlr: mycolor2
						}
					},
				]
			};

			// 设置参数
			echart.setOption(option)
		</script>
	</body>
</html>