JavaScript使用百度ECharts插件繪制餅圖操作示例
本文實(shí)例講述了JavaScript使用百度ECharts插件繪制餅圖操作。分享給大家供大家參考，具體如下：
百度ECharts是一款由百度前端團(tuán)隊(duì)開(kāi)發(fā)與維護(hù)的，基于HTML5的開(kāi)源JavaScript圖表庫(kù)。E是Enterprise的簡(jiǎn)稱(chēng)，意思是商業(yè)級(jí)數(shù)據(jù)圖表。
本文簡(jiǎn)述使用ECharts繪制餅圖(Pie Chart)的過(guò)程，下圖為使用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} (vvxyksv9kd%)"
},
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)容可查看本站專(zhuān)題：《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)文章
BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
Select下拉框的問(wèn)題，想在選擇一個(gè)選項(xiàng)后，前臺(tái)顯示做出變動(dòng)，并且知道選擇的是第幾個(gè)選項(xiàng)。 怎么解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展，需要的朋友參考下吧2016-11-11
這篇文章主要為大家介紹了簡(jiǎn)單易懂的JSONP和CORS跨域方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
微信小程序+騰訊地圖開(kāi)發(fā)實(shí)現(xiàn)路徑規(guī)劃繪制
這篇文章主要介紹了微信小程序+騰訊地圖開(kāi)發(fā)實(shí)現(xiàn)路徑規(guī)劃繪制，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了微信小程序 scroll-view的使用案例分析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要給大家介紹了關(guān)于理解JSONP并拓展的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
Bootstrap每天必學(xué)之進(jìn)度條，對(duì)Bootstrap進(jìn)度條小編也了解的很少，希望通過(guò)這篇文章和大家更多的去學(xué)習(xí)Bootstrap進(jìn)度條，從中得到收獲。2015-11-11
一般來(lái)說(shuō)，顯示在最前面的窗口都是因?yàn)榇翱诒患せ瞰@得焦點(diǎn)，要使窗口永遠(yuǎn)顯示在最前面，可以人為的設(shè)置窗口在blur時(shí)立刻focus，或者用模式、無(wú)模式對(duì)話框?qū)崿F(xiàn)2013-07-07
這篇文章主要介紹了javascript閉包，閉包（closure）是Javascript語(yǔ)言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-01-01
js不能獲取隱藏div的的寬度，現(xiàn)在的辦法是先將其顯示出來(lái)，再獲取其寬度，計(jì)算位置，下面的示例，大家可以參考下2014-09-09
今天小編就為大家分享一篇layui自定義工具欄的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09