ECharts使用

武飞扬头像

一杯彬美式

2024-04-29 帮助1人

使用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);

具体代码如下：

学新通

结果如图下所示：

学新通

好啦，一个ECharts使用实例就做好了，希望可以帮到各位。

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhghckfk

系列文章

同类精品

继续加载