使用Echarts绘制折线图教程-优快云博客

本文链接：https://blog.youkuaiyun.com/LL9504/article/details/103028239

这篇博客介绍了如何使用Echarts库来绘制折线图，包括设置标题、图例、x轴和y轴的属性，如名称、间隔、双轴配置以及数据展示等基本步骤。建议对Echarts感兴趣的读者可以参考官方实例进行更深入的学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考博客的地址:https://blog.youkuaiyun.com/sleepwalker_1992/article/details/82709793

步骤: 标题 , 图示,对x和y轴的设置(名字,间隔,两个y轴或x轴,长度等),接下来是数据(数据显示的类型,line,bar以及对应的data)

这些都是最基本的图形元素,更复杂的可以参考官网上面实例学习.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>统计</title>
    <script src="echarts.min.js"></script>
    <script src="ecStat.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height:650px;margin:0 auto"></div>
    <script type="text/javascript">
		var data1 = [1753, 834, 510, 301, 301, 133, 133, 133, 133, 133];
		var data2= [120, 102, 89, 73, 73, 59, 59, 59, 59, 59];
		var data3= [6.845, 12.230, 17.451, 24.252, 24.252, 44.361, 44.361, 44.361, 44.361, 44.361];
		var data = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
		option = {
			title: {
				text: '个数标记总值-重要值-准确率统计',
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#283b56'
					}
				}
			},
			legend: {
				data:['标记总值', '重要值','准确率']
			},
			xAxis: {
				type: 'category',
				splitLine: {
					lineStyle: {
						type: 'dashed'
					}
				},
				data: data
			},
			yAxis: [{
				type: 'value',
				name: '准确率'
			},
			{
				type: 'value',
				scale: true,
				name: '数值'
			}],
			series: [{
				name: '标记总值',
				type: 'bar',
				yAxisIndex: 1,
				label: {
					emphasis: {
						show: true,
						position: 'left',
						textStyle: {
							color: 'blue',
							fontSize: 16
						}
					}
				},
				data: data1
			},{
				name: '重要值',
				type: 'bar',
				yAxisIndex: 1,
				label: {
					emphasis: {
						show: true,
						position: 'left',
						textStyle: {
							color: 'blue',
							fontSize: 16
						}
					}
				},
				data: data2
			},{
				name: '准确率',
				type: 'line',
				data: data3
			
			}]
		};
		echarts.init(document.getElementById('main')).setOption(option);
    </script>
</body>
</html>

Echarts画折线图