怎么在JavaScript中使用ECharts插件繪制餅圖

發(fā)布時(shí)間：2021-04-14 16:14:37 來源：億速云閱讀：233 作者：Leah 欄目：web開發(fā)

這篇文章給大家介紹怎么在JavaScript中使用ECharts插件繪制餅圖，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

首先需要在頁面中新建<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>

然后在頁面中添加一個(gè)容器，為填充ECharts繪制的圖形做準(zhǔn)備。

<body>
  <!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
  <div id="main" ></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>

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} (ozzstur%)"
   },
   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對象加載數(shù)據(jù) 
 myChart.setOption(option); 
}

關(guān)于怎么在JavaScript中使用ECharts插件繪制餅圖就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

怎么在JavaScript中使用ECharts插件繪制餅圖

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽