JavaScript使用百度ECharts插件繪制餅圖操作示例
本文實(shí)例講述了JavaScript使用百度ECharts插件繪制餅圖操作。分享給大家供大家參考，具體如下：
百度ECharts是一款由百度前端團(tuán)隊(duì)開發(fā)與維護(hù)的，基于HTML5的開源JavaScript圖表庫(kù)。E是Enterprise的簡(jiǎn)稱，意思是商業(yè)級(jí)數(shù)據(jù)圖表。
本文簡(jiǎn)述使用ECharts繪制餅圖(Pie Chart)的過程，下圖為使用ECharts繪制的餅圖實(shí)例。
首先需要在頁(yè)面中新建<script>標(biāo)簽，引入符合AMD規(guī)范的加載器，如esl.js
關(guān)于AMD規(guī)范的詳細(xì)介紹，可以參考阮一峰的博文：Javascript模塊化編程（二）：AMD規(guī)范
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
然后在頁(yè)面中添加一個(gè)容器，為填充ECharts繪制的圖形做準(zhǔn)備。
<body> <!-- 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om --> <div id="main" style="height:400px"></div> </body>
新建<script>標(biāo)簽中為模塊加載器配置echarts和所需圖表的路徑（相對(duì)路徑為從當(dāng)前頁(yè)面鏈接到echarts.js）
由于本例為餅圖，因此在paths中添加'echarts/chart/pie'
<script type="text/javascript">
// 路徑配置
require.config({
paths:{
'echarts' : 'http://echarts.baidu.com/build/echarts',
'echarts/chart/pie' : 'http://echarts.baidu.com/build/echarts'
}
});
</script>
<script>標(biāo)簽內(nèi)動(dòng)態(tài)加載echarts和所需圖表，回調(diào)函數(shù)中可以初始化圖表并驅(qū)動(dòng)圖表的生成
require(
[
'echarts',
'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基于準(zhǔn)備好的dom，初始化echarts圖表
myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: 'ECharts實(shí)例',
subtext: '餅圖（Pie Chart）',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/> : {c} (wppm3vysvbp%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['part1','part2','part3','part4']
},
toolbox: {
show : true,
feature : {
//mark : {show: true},
//dataView : {show: true, readOnly: false},
restore : {show: true},
//saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'餅圖實(shí)例',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:100, name:'part1'},
{value:200, name:'part2'},
{value:300, name:'part3'},
{value:400, name:'part4'}]
}
]
};
// 為echarts對(duì)象加載數(shù)據(jù)
myChart.setOption(option);
}
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
$$()函數(shù)應(yīng)用實(shí)例...2006-10-10
JavaScript中while循環(huán)的基礎(chǔ)使用教程
這篇文章主要給大家介紹了關(guān)于JavaScript中while循環(huán)的基礎(chǔ)使用教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
js replace替換字符串同時(shí)替換多個(gè)方法
這篇文章主要介紹了js replace替換字符串同時(shí)替換多個(gè)方法 的相關(guān)資料,需要的朋友可以參考下2018-11-11
這篇文章詳細(xì)介紹了JavaScript定時(shí)器及實(shí)例，有需要要的朋友可以參考一下2013-08-08
js求數(shù)組最大值的八種具體實(shí)現(xiàn)方法
數(shù)組如何求最大值,想必很多的朋友都不會(huì)吧,下面這篇文章主要給大家介紹了關(guān)于使用js求數(shù)組最大值的八種方法具體實(shí)現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了功能完善的小程序日歷組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家詳細(xì)介紹了canvas繪制刮刮卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
javascript+jQuery實(shí)現(xiàn)360開機(jī)時(shí)間顯示效果
這篇文章主要介紹了javascript+jQuery實(shí)現(xiàn)360開機(jī)時(shí)間顯示效果，在文中給大家提到了js實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11
Javascript 淺拷貝、深拷貝的實(shí)現(xiàn)代碼
Javascript中的對(duì)像賦值與Java中是一樣的,都為引用傳遞.就是說,在把一個(gè)對(duì)像賦值給一個(gè)變量時(shí),那么這個(gè)變量所指向的仍就是原來對(duì)像的地址.那怎么來做呢 答案是克隆.2008-12-12
js實(shí)現(xiàn)ifram取父窗口URL地址的方法
這篇文章主要介紹了js實(shí)現(xiàn)ifram取父窗口URL地址的方法,是javascript操作window.parent對(duì)象非常典型的應(yīng)用技巧,需要的朋友可以參考下2015-02-02