JavaScript使用百度ECharts插件繪制餅圖操作示例

更新時間：2019年11月26日 10:30:05 作者：在線瘋狂

這篇文章主要介紹了JavaScript使用百度ECharts插件繪制餅圖操作,結(jié)合實例形式分析了JavaScript使用百度ECharts插件繪制餅圖的原理、步驟及相關(guān)操作注意事項,需要的朋友可以參考下

本文實例講述了JavaScript使用百度ECharts插件繪制餅圖操作。分享給大家供大家參考，具體如下：

百度ECharts是一款由百度前端團隊開發(fā)與維護的，基于HTML5的開源JavaScript圖表庫。E是Enterprise的簡稱，意思是商業(yè)級數(shù)據(jù)圖表。

本文簡述使用ECharts繪制餅圖(Pie Chart)的過程，下圖為使用ECharts繪制的餅圖實例。

首先需要在頁面中新建<script>標簽，引入符合AMD規(guī)范的加載器，如esl.js

關(guān)于AMD規(guī)范的詳細介紹，可以參考阮一峰的博文：Javascript模塊化編程（二）：AMD規(guī)范

<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

然后在頁面中添加一個容器，為填充ECharts繪制的圖形做準備。

<body>
  <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
  <div id="main" style="height:400px"></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>

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/> : {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:'餅圖實例',
     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測試上述代碼運行效果。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: