使用echarts的方法

最新推荐文章于 2025-06-07 14:30:58 发布

cruise-peng

最新推荐文章于 2025-06-07 14:30:58 发布

阅读量390

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u010393325/article/details/85165088

本文介绍如何使用ECharts库在网页上创建一个动态图表，展示某地区的月度降水量与蒸发量数据。通过加载echarts.js文件并设置HTML结构，配置图表选项，包括标题、提示、图例、工具箱、坐标轴和数据系列，最终实现了一个包含标记点和标记线的交互式柱状图。

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

1，第一步：下载 echarts.js ,创建一个文件如echarts.html，如图：

2，第二步：编写 echarts.html，如图：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="echarts.js"></script>

</head>
<body>
	<div class="row">
		<div class="col-1"></div>
		<div  class="col-10 Echarts1 row">
			<div class="col-12">
				<h5 class="Eheader">2015-2017年度税收前三名企业对比</h5>
				<div id="Echarts" style="width: 750px; height: 400px;margin: 20px auto;"></div>    
			</div>
		</div>   
	</div>
</div>
</body>
<script type="text/javascript">

		var myChart = echarts.init(document.getElementById('Echarts'));
		var option = {
			title : {
				text: '某地区蒸发量和降水量',
				subtext: '纯属虚构'
			},
			tooltip : {
				trigger: 'axis'
			},
			legend: {
				data:['蒸发量','降水量']
			},
			toolbox: {
				show : true,
				feature : {
					mark : {show: true},
					dataView : {show: true, readOnly: false},
					magicType : {show: true, type: ['line', 'bar']},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable : true,
			xAxis : [
			{
				type : 'category',
				data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			}
			],
			yAxis : [
			{
				type : 'value'
			}
			],
			series : [
			{
				name:'蒸发量',
				type:'bar',
				data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
				markPoint : {
					data : [
					{type : 'max', name: '最大值'},
					{type : 'min', name: '最小值'}
					]
				},
				markLine : {
					data : [
					{type : 'average', name: '平均值'}
					]
				}
			},
			{
				name:'降水量',
				type:'bar',
				data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
				markPoint : {
					data : [
					{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
					{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
					]
				},
				markLine : {
					data : [
					{type : 'average', name : '平均值'}
					]
				}
			}
			]
		};
		myChart.setOption(option);
	</script>
</html>

3，第三步，用浏览器打开