溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在JavaScript中使用ECharts插件繪制餅圖，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
首先需要在頁面中新建<script>標簽，引入符合AMD規范的加載器，如esl.js
關于AMD規范的詳細介紹，可以參考阮一峰的博文：Javascript模塊化編程（二）：AMD規范
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
然后在頁面中添加一個容器，為填充ECharts繪制的圖形做準備。
<body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" ></div> </body>
新建<script>標簽中為模塊加載器配置echarts和所需圖表的路徑（相對路徑為從當前頁面鏈接到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>標簽內動態加載echarts和所需圖表，回調函數中可以初始化圖表并驅動圖表的生成
require(
[
'echarts',
'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基于準備好的dom，初始化echarts圖表
myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text: 'ECharts實例',
subtext: '餅圖（Pie Chart）',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} (aegqsqibtmh%)"
},
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對象加載數據
myChart.setOption(option);
}關于怎么在JavaScript中使用ECharts插件繪制餅圖就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
