Echarts--来自官网
生活随笔
收集整理的這篇文章主要介紹了
Echarts--来自官网
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
引入 ECharts
ECharts 3 開(kāi)始不再?gòu)?qiáng)制使用 AMD 的方式按需引入，代碼里也不再內(nèi)置 AMD 加載器。因此引入方式簡(jiǎn)單了很多，只需要像普通的 JavaScript 庫(kù)一樣用 script 標(biāo)簽引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
繪制一個(gè)簡(jiǎn)單的圖表
在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器。
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM -->
<div id="main"></div>
</body>
然后就可以通過(guò)echarts.init方法初始化一個(gè) echarts 實(shí)例并通過(guò)setOption方法生成一個(gè)簡(jiǎn)單的柱狀圖，下面是完整代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門(mén)示例'
},
tooltip: {},
legend: {
data:['銷(xiāo)量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
這樣你的第一個(gè)圖表就誕生了！
接口文檔查看：http://echarts.baidu.com/api.html
總結(jié)
以上是生活随笔為你收集整理的Echarts--来自官网的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： excel中vlookup函数怎么使用？
- 下一篇： CAD选择一个图层上的全部对象的方法