JavaScript使用百度ECharts插件繪制餅圖操作示例
本文實例講述了JavaScript使用百度ECharts插件繪制餅圖操作。分享給大家供大家參考，具體如下：
百度ECharts是一款由百度前端團(tuán)隊開發(fā)與維護(hù)的，基于HTML5的開源JavaScript圖表庫。E是Enterprise的簡稱，意思是商業(yè)級數(shù)據(jù)圖表。
本文簡述使用ECharts繪制餅圖(Pie Chart)的過程，下圖為使用ECharts繪制的餅圖實例。
首先需要在頁面中新建<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>
然后在頁面中添加一個容器，為填充ECharts繪制的圖形做準(zhǔn)備。
<body> <!-- 為ECharts準(zhǔn)備一個具備大?。▽捀撸┑腄om --> <div id="main" style="height:400px"></div> </body>
新建<script>標(biāo)簽中為模塊加載器配置echarts和所需圖表的路徑（相對路徑為從當(dāng)前頁面鏈接到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)動態(tài)加載echarts和所需圖表，回調(diào)函數(shù)中可以初始化圖表并驅(qū)動圖表的生成
require(
[
'echarts',
'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基于準(zhǔn)備好的dom，初始化echarts圖表
myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: 'ECharts實例',
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:'餅圖實例',
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對象加載數(shù)據(jù)
myChart.setOption(option);
}
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
Select下拉框的問題，想在選擇一個選項后，前臺顯示做出變動，并且知道選擇的是第幾個選項。 怎么解決這個問題呢？下面小編給大家?guī)砹薆ootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展，需要的朋友參考下吧2016-11-11
這篇文章主要為大家介紹了簡單易懂的JSONP和CORS跨域方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
微信小程序+騰訊地圖開發(fā)實現(xiàn)路徑規(guī)劃繪制
這篇文章主要介紹了微信小程序+騰訊地圖開發(fā)實現(xiàn)路徑規(guī)劃繪制，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了微信小程序 scroll-view的使用案例分析，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要給大家介紹了關(guān)于理解JSONP并拓展的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
Bootstrap每天必學(xué)之進(jìn)度條，對Bootstrap進(jìn)度條小編也了解的很少，希望通過這篇文章和大家更多的去學(xué)習(xí)Bootstrap進(jìn)度條，從中得到收獲。2015-11-11
一般來說，顯示在最前面的窗口都是因為窗口被激活獲得焦點，要使窗口永遠(yuǎn)顯示在最前面，可以人為的設(shè)置窗口在blur時立刻focus，或者用模式、無模式對話框?qū)崿F(xiàn)2013-07-07
這篇文章主要介紹了javascript閉包，閉包（closure）是Javascript語言的一個難點，也是它的特色，很多高級應(yīng)用都要依靠閉包實現(xiàn)，感興趣的小伙伴們可以參考一下2016-01-01
js不能獲取隱藏div的的寬度，現(xiàn)在的辦法是先將其顯示出來，再獲取其寬度，計算位置，下面的示例，大家可以參考下2014-09-09
今天小編就為大家分享一篇layui自定義工具欄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09