使用百度ECharts绘制饼图
百度ECharts是一款由百度前端团队开发与维护的，基于HTML5的开源JavaScript图表库。E是Enterprise的简称，意思是商业级数据图表。
本文简述使用ECharts绘制饼图(Pie Chart)的过程，下图为使用ECharts绘制的饼图实例。
首先需要在页面中新建&script&标签，引入符合AMD规范的加载器，如esl.js
关于AMD规范的详细介绍，可以参考阮一峰的博文：
&script src="/r/www/cache/ecom/esl/1-6-10/esl.js"&&/script&
然后在页面中添加一个容器，为填充ECharts绘制的图形做准备。
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" style="height:400px"&&/div&
新建&script&标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）
由于本例为饼图，因此在paths中添加'echarts/chart/pie'
&script type="text/javascript"&
// 路径配置
require.config({
'echarts' : '/build/echarts',
'echarts/chart/pie' : '/build/echarts'
&script&标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById('main'));
var option = {
text: 'ECharts实例',
subtext: '饼图（Pie Chart）',
x:'center'
tooltip : {
trigger: 'item',
formatter: "{a} &br/&{b} : {c} ({d}%)"
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%'],
{value:100, name:'part1'},
{value:200, name:'part2'},
{value:300, name:'part3'},
{value:400, name:'part4'}]
// 为echarts对象加载数据
myChart.setOption(option);
本文链接：请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。
如果您喜欢这篇博文，欢迎您捐赠书影博客：
没有类似日志
欢迎来到的博客
十一月 2014
周一周二周三周四周五周六周日问题：ECharts 饼图 数据不显示小数点
@Kener-林峰
你好，想跟你请教个问题：
@Kener-林峰
你好，想跟你请教个问题：
想让饼图的数据，不显示小数点。
途中显示为&分区1：20.00%。
我怎么样可以让它变为：分区1：20%解决方案1:
显示什么1:12%？
以上介绍了“ECharts 饼图 数据不显示小数点”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1524996.html
上一篇： 下一篇：实现对统计数据的图形分析之前用过JFreeChar，但它是用纯java实现编码繁琐且效果不佳，后来又使用过Fusioncharts 报表工具，它是基于Flash的图表组件、以XML为数据、提供丰富的Flash动画作为图标模板，实现简单效果不错但flash是老东西了且浏览器需要flash插件的支持，更关键的是手机端浏览器基本上不支持。最近看到百度提供一套ECharts（Enterprise Charts）商业产品图表库，它是基于ZReader（一个全新的轻量级canvas类库），可在pc和移动端流畅的运行，支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）等12类图表。
二、实现应用案例
下面就结合应用看看ECharts的使用
案例效果：
切换折线图
查看图形数据
三、如何使用ECharts
1、环境搭建
下载echarts-2.2.2,官网地址：
将build/dist目录下的内容拷贝到项目中 如图所示：
2、在sell_char.html页面中引入文件
chart目录下存放了12种图形的js文件，可根据需要引入，这也是官方推荐的导入方式（模块化单文件引入）
&script src="echarts/dist/echarts.js"&&/script&
&script src="jquery/jquery-1.7.2.min.js"&&/script&
&script type="text/javascript"&
$(function(){//jquery的文档就绪函数
// 路径配置
require.config({
echarts: 'echarts/dist'
'echarts',//代指echarts设置的路径，即'echarts/dist'
'echarts/chart/bar', // 使用柱状图加载bar模块，引入bar.js
'echarts/chart/line'//加载折线图,引入line.js文件, 按需加载
function (ec) {
var myChart = ec.init(document.getElementById('sell_data'));
var option = { //配置选项，使用echarts的关键部分
myChart.setOption(option);
&!-- 为ECharts准备一个具备大小的区域，必须指定高度 --&
&div id="sell_data" style="height:400px"&&/div&
3、sell_char.html完整的代码
&!-- ECharts单文件引入 --&
&script src="echarts/dist/echarts.js"&&/script&
&script src="jquery/jquery-1.7.2.min.js"&&/script&
&script type="text/javascript"&
$(function(){
//获得后台数据
var category_//类型信息
var soft_//软件部销售数据
var net_//网络部销售数据
var mobile_//移动事业部销售数据
url:'/21-sun/echarts/EChartsDataServelt',
async:false,
success: function(data){
category_data=data.
soft_data=data.soft_
net_data=data.net_
mobile_data=data.mobile_}
// 路径配置
require.config({
echarts: 'echarts/dist'
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('sell_data'));
var option = {
tooltip: {//提示框，鼠标悬浮交互时的信息提示
show: true
toolbox:{//定义工具按钮
show : true,
feature : {
dataView : {show: true, readOnly: false},//数据信息按钮 magicType : {show: true, //显示折线、柱状图等切换按钮
type: ['line', 'bar','stack', 'tiled']} } }, legend: {//图例 data:['软件部','网络板块','移动事业部'] }, xAxis : [//x轴设置 { type : 'category',//x轴显示类别 data : category_data //["第一季度","第二季度","第三季度","第四季度"] } ], yAxis : [//y轴设置 { type : 'value' //y轴显示数据值 } ], series : [ { "name":"软件部", "type":"bar", "data":soft_data //[80, 300, 200, 100] }, { "name":"网络板块", "type":"bar", "data":net_data //[50, 200, 120, 200] }, { "name":"移动事业部", "type":"bar", "data":mobile_data //[20, 60, 30, 15] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); }); &/script& &/head& &body& &div id="sell_data" style="height:400px"&&/div& &!-- ECharts单文件引入 --& &/body& &/html&
4、后台EChartsDataServelt代码
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/ charset=utf-8");
JSONObject jsonObj=new JSONObject();
//后台数据，这里给定数据就不从数据库获取了
Map map=new HashMap();
map.put("category", new String[]{"第一季度","第二季度","第三季度","第四季度"});
map.put("soft_data", new int[]{80, 300, 200, 100} ); map.put("net_data", new int[]{50, 200, 120, 200}); map.put("mobile_data",new int[]{20, 60, 30, 15}); jsonObj.putAll(map); response.getWriter().println(jsonObj.toString()); }
在文章中找不到问题答案？您还可以
热门栏目订阅you have been blocked