ECharts使用步骤

最新推荐文章于 2024-09-05 00:31:38 发布

一杯彬美式

最新推荐文章于 2024-09-05 00:31:38 发布

阅读量2.9k

点赞数 3

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/m0_59839948/article/details/124696893

版权

使用ECharts制作图表的步骤如下：

（1）新建HTML页面，一般为HTML5页面。

（2）在HTML页面头部中导入JS文件。（注：JS文件由于发布出来，需要自己进行查找或者私聊我）

（3）在HTML页面正文中使用JavaScript代码实现图表的显示。

使用ECharts制作图表的具体实现如下：

（1）引入ECharts：（HTML代码块）

<head>
		<meta charset="utf-8">
		<title>ECcharts</title>
		<script src="echarts.min.js"></script>
	</head>

（2）准备容器：

<body>
		<div id="main" style="width: 800px;height: 800px;"></div>

</body>

（3）初始化实例：

        <body>
		<div id="main" style="width: 800px;height: 800px;"></div>
		<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
        </script>
        </body>

（4）指定图表的配置项和数据：

var option={
			title:{
				text:'ECharts实例'
			},
			tooltip:{
				trigger:'axis'
			},
			legend:{
				data:['专业实力']
			},
			xAxis:{
				data:["物联网","工业机器人","大数据","计算机网络","软件技术","嵌入式"]
			},
			yAxis:{},
			series:[{
				name:"专业实力",
				type:'line',
				data:[35,30,50,10,40,5]
			}]
		};

（5）显示图表。

myChart.setOption(option);

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ECcharts</title>
		<script src="echarts.min.js"></script>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 800px;"></div>
		<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
		var option={
			title:{
				text:'ECharts实例'
			},
			tooltip:{
				trigger:'axis'
			},
			legend:{
				data:['专业实力']
			},
			xAxis:{
				data:["物联网","工业机器人","大数据","计算机网络","软件技术","嵌入式"]
			},
			yAxis:{},
			series:[{
				name:"专业实力",
				type:'line',
				data:[35,30,50,10,40,5]
			}]
		};
		myChart.setOption(option);
		</script>
	</body>
</html>

结果如图下所示：