ECharts折线图(详细案例)

最新推荐文章于 2024-09-04 23:40:14 发布

GRAY_KEY

最新推荐文章于 2024-09-04 23:40:14 发布

阅读量8.7k

点赞数 3

分类专栏： ECharts ECharts图表模板文章标签： ECharts 折线图案例图表代码示例

本文链接：https://blog.csdn.net/gray_key/article/details/80077332

版权

ECharts 同时被 2 个专栏收录

14 篇文章 4 订阅

订阅专栏

ECharts图表模板

14 篇文章 10 订阅

订阅专栏

该折线图有几个特性：有数据平均线、有占位背景、X(Y)轴轴线以及轴线刻度不显示。

图表效果如下:

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>折线图案例</title>
		<!-- 引入 ECharts 文件 -->
		<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
		<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #FF0000;"></div>
	</body>
</html>
<script type="text/javascript">
	// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
	var chart1 = echarts.init(document.getElementById("chart1"));
	
	// 指定图表的配置项和数据
	var dataX = ['18~30岁', '31~40岁', '41~50岁', '51~60岁', '61~70岁'];
	var dataY = ['200', '102', '422', '189', '12'];
	var dataZ = [500, 500, 500, 500, 500];
	var option = {
		title: {
			text: '折线图标题',
			link: 'https://blog.csdn.net/gray_key',
			target: 'blank',
			left: '5%',
			textStyle: {
				color: '#fff',
				fontSize: 15,
				bottom: 20
			}
		},
		grid: {
			left: 40,
			right: 40,
			top: 30,
			bottom: 25,
		},
		backgroundColor: 'rgba(0,0,0,0.8)',		// 背景颜色
		tooltip: {
			trigger: 'item',
			formatter: "{a}<br/>{b} : {c}人"
		},
		xAxis: {
			type: 'category',
			position: 'bottom',
			// 等同于 axisLine: true    开始
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			// 等同于 axisLine: true    结束
			axisLabel: {
				color: '#fff',
				fontSize: 12
			},
			data: dataX,
		},
		yAxis: {
			splitNumber: 5, // 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效。
			// 等同于 axisLine: true    开始
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			// 等同于 axisLine: true    结束
			splitLine: {
				show: true,
				lineStyle: {
					color: '#fff',
					opacity: 0.2
				}
			},
			axisLabel: {
				color: '#fff',
				fontSize: 12
			}
		},
		series: [{
			name: '各年龄段人数',
			type: 'line',
			data: dataY,
			smooth: true,
			symbol: 'emptyCircle',
			symbolSize: 5,
			itemStyle: {
				normal: {
					color: '#fff'
				}
			},
			lineStyle: {
				normal: {
					color: {
					    type: 'linear',
					    x: 0,
					    y: 0,
					    x2: 0,
					    y2: 1,
					    colorStops: [{
					        offset: 0, color: 'rgba(255,0,0,0.8)' // 0% 处的颜色
					    }, {
					        offset: 1, color: 'rgba(0,0,238,0.8)' // 100% 处的颜色
					    }],
					    globalCoord: false // 缺省为 false
					},
					width: 3
				}
			},
			areaStyle: {
				normal: {
					color: "rgba(51,255,255,0.3)",
				}
			},
			markLine: { // 图表标线。
				silent: false, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
				symbol: ["", "arrow"], // 标线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定，具体格式见 data.symbol。
				// 标线的数据数组。每个数组项可以是一个两个值的数组，分别表示线的起点和终点，每一项是一个对象，有下面几种方式指定起点或终点的位置。
				data: [{ // 直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。 
					name: '平均数',
					type: 'average' // 支持 'average', 'min', 'max'
				}],
				precision: 0, // 标线数值的精度，在显示平均值线的时候有用。
				label: { // 标线的文本。
					normal: {
						formatter: '平均数:\n{c}人'
					}
				},
				lineStyle: { // 标线的样式  
					normal: {
						color: '#fff',
					}
				}
			}
		}, {
			name: '占位背景',
			type: 'bar',
			itemStyle: {
				normal: {
					show: true,
					color: '#fff',
					opacity: 0
				}
			},
			silent: true, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
			barWidth: '50%', // 柱条宽度
			data: dataZ, // 占位背景在y轴上的值(高度)
			animation: false // 是否开启动画
		}, {
			name: '占位背景',
			type: 'bar',
			itemStyle: {
				normal: {
					show: true,
					color: '#fff',
					opacity: 0.1
				}
			},
			silent: true,
			barWidth: '50%',
			barGap: 0, // 柱间距离
			data: dataZ,
			animation: false
		}],
	};
	
	// 使用刚指定的配置项和数据显示图表
	chart1.setOption(option)
</script>

想要使用该图表,只需要复制以上代码 ,再下载 echarts.js 在页面文件中引入即可.

echarts.js 下载链接: http://echarts.baidu.com/download.html