java圆饼图插件,JavaScript使用百度ECharts插件绘制饼图操作示例

本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考，具体如下：

百度ECharts是一款由百度前端团队开发与维护的，基于HTML5的开源JavaScript图表库。E是Enterprise的简称，意思是商业级数据图表。

本文简述使用ECharts绘制饼图(Pie Chart)的过程，下图为使用ECharts绘制的饼图实例。

首先需要在页面中新建

关于AMD规范的详细介绍，可以参考阮一峰的博文：Javascript模块化编程(二)：AMD规范

然后在页面中添加一个容器，为填充ECharts绘制的图形做准备。

新建

由于本例为饼图，因此在paths中添加'echarts/chart/pie'

// 路径配置

require.config({

paths:{

'echarts' : 'http://echarts.baidu.com/build/echarts',

'echarts/chart/pie' : 'http://echarts.baidu.com/build/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}
{b} : {c} ({d}%)"

},

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);

}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。