仿Echart效果千层饼图创意ppt图表，ppt图表――51PPT模板网
热门搜索：&&&&&&&
仿Echart效果千层饼图创意ppt图表
版本：powerpoint2013
模板大小：51.44 KB
下载次数：次
静/动态：PPT图表
屏幕比例：标屏：4:3
来源：←点击进入作品集
所属栏目：ppt图表
推荐星级：4 颗星
简介：浏览器占比变化ppt图表，仿Echart效果创意，千层饼图创意ppt图表。标签：,,。
与仿Echart效果千层饼图创意ppt图表相关的PPT模板还有↓
热门ppt图表
大小：414.26 KB 下载：67714次 大小：2.66 MB 下载：15354次 大小：17.01 MB 下载：14047次 大小：1.22 MB 下载：11678次 大小：1.82 MB 下载：11245次 大小：15.47 MB 下载：9918次
为您推荐的优秀ppt图表
大小：396.13 KB 下载：449次大小：194.31 KB 下载：829次大小：262.57 KB 下载：662次大小：267.56 KB 下载：2344次大小：455.87 KB 下载：948次大小：2.24 MB 下载：1943次web前端（1）
第一次写博客，有点小激动。公司正在开发的web版固定资产管理软件，需要做报表，需要直观的显示一些领导感兴趣的数据。就想到百度的echarts啦，关于echarts的更多信息请移步。
&言归正传。第一步，在jsp页面，需要引入esl.js,它是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理（必须要引入）。如我的项目“&script type=&text/javascript& src=&${rootPath}/capital_assets/common/echarts/esl.js& &&/script&”。第二部，在项目中加入echarts包和zrender包，两者的包必须在同一目录下，如：
下面是我的JSP页面：
&script type=&text/javascript& src=&${rootPath}/capital_assets/common/echarts/jquery-1.7.2.min.js&&&/script&
&script type=&text/javascript& src=&${rootPath}/capital_assets/common/echarts/esl.js& &&/script&
&script type=&text/javascript&&
//配置路径
require.config({
packages:[
name: 'zrender',
location: '../common/zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
name: 'echarts',
location: '../common/echarts2.2.7/src',
main: 'echarts'
// 按需加载(需要用什么图标就引入包，如柱状图：'echarts/chart/bar',)
'echarts',
'echarts/chart/bar',
'echarts/chart/pie'
function (ec) {
var chart1=document.getElementById('chart1');
var echart1 = ec.init(chart1);
var chart2
= document.getElementById('chart2');
var echart2 = ec.init(chart2);
var categories = [];
var values = [];
var orgs=[];
var orgVal=[];
$.ajaxSettings.async =
// 加载数据
$.getJSON(&${request.pageContext.contextPath}/capital_assets/reporter/reporter_classfy.action&, function (json) {
categories = json.
values = json.
orgs=json.
orgVal=json.orgV
var option1={
backgroundColor:'rgba(12,121,123,0.1)',
text: '资产概览',
subtext: '饼图',
x:'center',
backgroundColor:'rgba(12,121,123,0.1)'
tooltip : {
trigger: 'item',
formatter: &{a} &br/&{b} : {c} ({d}%)&
orient : 'vertical',
x : 'left',
data:categories,
toolbox: {
show : true,
feature : {
restore : {show: true},
calculable : true,
series : [
name:'详情',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data: (function(){
var res = [];
var len = values.
while (len--) {
res.push({
name: categories[len],
value: values[len]
var option2 = {
text:'资产科室分布',
subtext:'柱状图',
x:'center'
tooltip: {
show: true
orient :'vertical',
x : 'left',
data:['科室总资产'],
type: 'category',
data: orgs
type: 'value'
'name': '详情',
'type': 'bar',
'data': orgVal,
'itemStyle': {
'normal': {
color: function(params) {
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
return colorList[params.dataIndex];
show: true,
position: 'top',
formatter: '{b}\n{c}'
echart1.setOption(option1);
echart2.setOption(option2);
&div id=&chart1& style=&height:500&&&/div&&br/&&hr&
&div id=&chart2& style=&height:500&&&/div&
通过上面的代码，我们可以看出，页面通过ajax请求action(servlet)接受返回的json格式数据，然后进行图表信息的构建。我的action中部分代码如下：
&span style=&font-size:18&&public String classfy() throws IOException{
HttpServletResponse response=getResponse();
response.setCharacterEncoding(&UTF-8&);
response.setContentType(&text/charset=UTF-8&);
PrintWriter out=response.getWriter();
&span style=&background-color: rgb(255, 255, 255);&&
&span style=&color:#FF0000;&&Map&String, Object& json = new HashMap&String, Object&();
int i=reporterService.getTotalClassfy();
String[] classfies=reporterService.getZCFLName();
json.put(&categories&, classfies);
&/span&&/span&
double[] values=reporterService.getCountByName();
json.put(&values&, values);
}catch(Exception e) {
(&Service.getCountByName()从配置文件读取sql语句出现异常&);
e.printStackTrace();
&span style=&color:#FF0000;&&String[] orgs=reporterService.getOrgNames();
json.put(&orgs&,orgs);
double[] orgVal=reporterService.getCountByOrgName();
json.put(&orgVal&,orgVal);&/span&
out.write(JSONObject.fromObject(json).toString());
上边标红的为核心代码。到此，就可以完整显示啦。效果图：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：649次
排名：千里之外&&&&&&&&&&&
一、引入js文件
&!--Step:1 引入一个模块加载器，如esl.js或者require.js--&
&script src="~/Scripts/esl.js" type="text/javascript"&&/script&
二、创建div
&!--Step:2 为ECharts准备一个具备大小（宽高）的Dom--&
&div id="chart1" style="width:100%;height:500border:1px solid #ccc"&
三、在easyui datagrid 数据加载成功后展现报表
， onLoadSuccess: function (data) {
//拼接数据
var legenddata = '[';
var seriesdata = '[';
for (var i = 0; i & data.rows. i++) {
legenddata += '"' + data.rows[i].GROUPNAME + '",'
seriesdata += '{"name":"' + data.rows[i].GROUPNAME + '","value":' + data.rows[i].TOTALPEOPLE + '},';
if (legenddata.length & 1) {
legenddata = legenddata.substring(0, legenddata.length - 1);
if (seriesdata.length & 1) {
seriesdata = seriesdata.substring(0, seriesdata.length - 1);
legenddata += ']';
seriesdata += ']';
//展现报表
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js
require.config({
echarts: '../../Scripts/echarts'
// Step:4 动态加载echarts然后在回调函数中开始使用
['echarts'],
function (ec) {
var myChart = ec.init(document.getElementById('chart1'));
var option = {
text: '按会员购买次数推广统计',
x: 'center',
tooltip: {
show: true,
formatter: "{a}&br/&{b}:{c}个({d}%)"
orient: 'vertical',
x: 'right',
y: 'center',
data: $.parseJSON(legenddata)
toolbox: {
show: true,
feature: {
mark: true,
dataView: { readOnly: false },
restore: true,
saveAsImage: true
calculable: true,
name: '会员分布',
type: 'pie',
center: [, 225],
radius: [0, 110],
data: $.parseJSON(seriesdata)
myChart.setOption(option);
阅读(...) 评论()echart饼图--使用技巧
如下，“报毒引擎数量”要显示在环形图中间
两种方法：
1.& &data数据如下：（将“报毒引擎数量”作为一条数据，通过控制显示位置达到目的）
& && &{name:'1', value:335},
& && &{name:'2', value:310},
& && &{name:'3', value:234},
& && &{name:'4', value:135},
& && &{name:'&=5', value:1548},
& && &{name:&报毒引擎数量&, value:0,itemStyle: {normal : {
& && && & label : {
& && && && &&&show : true,
& && && && &&&position : 'center',
& && && && &&&formatter : '{b}',
& && && && &&&textStyle: {
& && && && && && &fontFamily:font_family,
& && && && && && &baseline : 'bottom',
& && && && && && &fontSize : '20',
& && && && && && &color:&rbga(51,51,51,1)&,
& && && && &&&}
& && && & },
& && && & labelLine : {
& && && && &&&show : false
& && && & }
& && &title : {
& && && & text: &报毒引擎数量&,
& && && & x:'center',
& && && & y:'center',
& && && & textStyle: {
& && && && &fontFamily:font_family,
& && && && &fontSize:16,
& && && && &fontWeight:'normal',
& && && && &color:'#717b82'
& && && & }
& && &&&},
长知识了。
13 总笔记数
4363 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：最近我一直在做数据可视化的前端工作，我用的最多的绘图工具是d3。d3有点像photoshop，功能很强大，例子也很多，但是学习成本也不低，做项目是需要较大人力投入的。3月底由在亚马逊工作的同学介绍下使用了一下echart，一个由百度前端发起的canvas国产类库（官网：）。这个echart其实是在canvas类库zrender的基础上做的主题图库，优点有数据驱动，图例丰富，功能强大，支持数据拖拽重计算，数据区域漫游，全中文文档非常过瘾。跟同样是国产的前端脚手架fis一样（官网），都是诚意满满的国产套餐，体现了现今国内不俗的前端开发实力。使用它们的感觉就像想自己做个平板电脑，去华强北一转，主板、CPU、屏幕等各种套餐一订购，东西就哗哗地组装起来了。极其高效，非常适合商业项目开发。而且，即使是为了研究，用这些也可以打一个很好的基础。
Echart图表库层次关系
1.引入目录
废话不多说了，看到好东西，第一步是从github上把相关文件全下下来，然后到build目录翻箱倒柜把东西找齐。新建目录如下：
echarts-1.3.8&-zrender & //zrender是echart依赖的绘图库，官网要求下载，但是目前我的程序中并没有直接引用它，可以说普通情况下echart可以自己独立运行&&&zrender.js&-excanvas_r3 //excanvas是实现IE7，8兼容canvas绘图的利器，实现了大部分canvas的API，在绘图方面其核心是通过IE的VML去实现的，效率较低&&&excanvas.js&-echarts.js &//echarts主程序，包含除map以外所有的主题图库。注意这个是压缩过的，并且只能通过requirejs或者esl.js模块化加载；想用标签或sea.js加载请用echarts-plain.js&-echarts-orginal.js &//没有压缩过的echarts.js&-echarts-map.js &//echarts的map主题图库
2.在自己的项目中实现其demo
这个echart是百度前端做的，他们推荐使用模块式开发。好在我之前的项目，就是采用requirejs + angularjs开发的。所以引入比较容易。
首先，在requirejs的入口配置文件main.js里加上echart:
require.config({
baseUrl:'application/views/frontEnd/build/'
//这里省略若干配置信息...
//echart及其组件
,echarts: 'lib/echarts-1.3.8/echarts'
,"echarts/chart/line": 'lib/echarts-1.3.8/echarts'
,"echarts/chart/bar": 'lib/echarts-1.3.8/echarts'
,'echarts/chart/scatter': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/k': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/pie': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/radar': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/map': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/chord': 'lib/echarts-1.3.8/echarts'
,'echarts/chart/force': 'lib/echarts-1.3.8/echarts'
,zrender: 'lib/echarts-1.3.8/zrender/zrender'
,priority:[
//,urlArgs:'v=1.1'
然后，在要引入echart的具体页面控制js文件里，加载相关依赖。
'echarts',
'echarts/chart/pie',
], function (ec) {
function common_chart_staff_assess_ctrl($http, $scope) {
// angularjs的控制器....
return common_chart_staff_assess_
以上两步，熟悉dojo或者requirejs的朋友应该都毫无压力，但是还是有很多朋友没用过这些，所以还是有必要说一下的。
接着就是把官网的例子放在自己的页面里实现。这里我选取了一个特别的千层饼图，点击去官网查看原图。
那么我们把例子里的静态数据（option对象）搬运到我们自己的JS文件中，然后仿照官网的例子写一个渲染&刷新函数
//渲染&刷新函数
$scope.refresh = function(option,isBtnRefresh){
if (isBtnRefresh) {
needRefresh = true;
if (needRefresh) {
myChart.showLoading();
setTimeout($scope.refresh(option), 500);
needRefresh = false;
if (myChart && myChart.dispose) {
myChart.dispose();
myChart = ec.init(domMain);
window.onresize = myChart.
myChart.setOption(option, true);
domMessage.innerHTML = '';
//测试数据
$scope.option = {
text: '浏览器占比变化',
subtext: '纯属虚构',
x:'right',
y:'bottom'
tooltip : {
trigger: 'item',
formatter: "{a} &br/&{b} : {c} ({d}%)"
orient : 'vertical',
x : 'left',
data:['Chrome','Firefox','Safari','IE9+','IE8-']
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
calculable : false,
series : (function(){
var series = [];
for (var i = 0; i & 30; i++) {
series.push({
name:'浏览器（数据纯属虚构）',
type:'pie',
itemStyle : {normal : {
label : {show : i & 28},
labelLine : {show : i & 28, length:20}
radius : [i * 4 + 40, i * 4 + 43],
{value: i * 128 + 80,
name:'Chrome'},
{value: i * 64
name:'Firefox'},
{value: i * 32
name:'Safari'},
{value: i * 16
name:'IE9+'},
{value: i * 8
+ 1280, name:'IE8-'}
series[0].markPoint = {
symbol:'emptyCircle',
symbolSize:series[0].radius[0],
effect:{show:true,scaleSize:12,color:'rgba(250,225,50,0.8)',shadowBlur:10,period:30},
data:[{x:'50%',y:'50%'}]
setTimeout(function(){
var _ZR = myChart.getZrender();
// 补充千层饼
_ZR.addShape({
shape : 'text',
x : _ZR.getWidth() / 2,
y : _ZR.getHeight() / 2,
color: '#666',
text : '恶梦的过去',
textAlign : 'center'
_ZR.addShape({
shape : 'text',
x : _ZR.getWidth() / 2 + 200,
y : _ZR.getHeight() / 2,
brushType:'fill',
color: 'orange',
text : '美好的未来',
textAlign : 'left',
textFont:'normal 20px 微软雅黑'
_ZR.refresh();
然后在页面上找个div，显示echart就可以了。
不过请注意一定要给这个div设置宽度高度，否则图显示不出来不要怪我。
&section class="span12"&
&div id="graph" class="graph chart-area" style="height:500px"&&/div&
&/section&
我这里用了bootstrap，宽度是按栅格系统的百分比值变化的，所以上面的代码中没有指定宽度。最后调试调试，没有问题我这里也可以显示。
当然，仅仅停留在引用别人的例子是不能让我满意的。
首先，要进行数据绑定。
这里细分为3步：
分析数据格式（就是分析option对象，这一步需要注意把后台获取的数据和样式信息分开。故而我在代码里设置了$scope.option对象存储默认的样式配置信息，之后ajax获取数据后将二者再extend即可。）
在后台组装相应的数据（根据不同需求而异，我这里只取数值信息，不多言）
前台ajax获取真实数据（这一点相信大家都很纯熟，不过我的代码里是使用angularjs封装过的$.post对象来做到这一点的）
//设置真实数据格式
$scope.default_option = {
text: '故障类型时序变化年轮图',
subtext: '本图由内向外展示了各种故障类型的出现频率所占百分比，及其随时间变化的规律',
x:'right',
y:'bottom'
tooltip : {
trigger: 'item',
formatter: "{a} &br/&{b} : {c} ({d}%)"
orient : 'vertical',
x : 'left',
selected: $scope.faultnameSelected
,data:$scope.faultname
toolbox: {
show : true,
feature : {
mark : true,
dataView : {readOnly: false},
restore : true,
saveAsImage : true
calculable : false,
series : {}
$scope.ajaxChartData = function(dataname){
myChart.showLoading({
text: '正在努力的读取数据中...',
//loading话术
$http.post("index.php/main/readfaultnum", null).success(function(alldata){
console.log(alldata);
var option = $scope.default_
option.series = $scope.setData(alldata);
$scope.refresh(option,true);
$scope.order =
myChart.hideLoading();
}).error(function(){
domMessage.innerHTML = '网络故障，获取数据失败';
5.进一步定制
虽然我使用了官网的例子实现了需求，但是我还有些自己的想法。
官网的千层饼图中，代表时间的年轮宽度是固定的。但是我们从后台读取的数据（以月为颗粒度）在时间上是变化的，随着系统使用时间增长而增长。这就导致一个问题，就是在只有一个月时，年轮只有小小一个，有50个月时，年轮多到超过了显示范围。这样很不美观，并且丧失了一定的可用性。
我决定要对其进行优化。当使用月份很少导致数据很少的时候，年轮会很宽；当使用月份很多导致数据很多的时候，年轮会很细&&这样就可以同时避免数据量小的时候不美观和数据量大的时候丧失可用性的问题了。当然，如果数据量过大，年轮就会过细，同样会丧失可用性。因此我们要设置一个最大数据量的阈值，把超过的部分砍掉。
解决方案就是要对根据数据量对年轮宽度进行缩放，也就是使用比例尺函数。在echart里我暂时没有找到这样的比例尺函数。当然，线性比例尺很简单，函数可以自己写。但是其他类型的比例尺缩放就稍微要一些技巧了。好在之前我一直是使用d3类库来做可视化的，我知道d3里有这样的比例尺函数可以很容易地解决我的问题。那就是d3.scale对象，其中包含线性比例尺、平方比例尺、指数比例尺、集合比例尺，完全可以满足需要。我可以从开源的d3库中把比例尺函数抽取出来，也引入到这个页面。根据实际数据的测试结果，我选择了平方比例尺。那么接下来就很好写了：
var maxTime = 36; //本千层饼图最多显示60个月的数据（最多显示60个圈）
//原始数据的加工工厂函数
$scope.setData = function(data){
//这是D3的平方比例尺函数，用于根据数据大小缩放环的宽度
var rScale = d3.scale.sqrt()
.domain([maxTime, 1])
.range([3, 30])
console.log(rScale(1), rScale(12), rScale(36))
//如果数据量超过60（即有60个月），则删除60个月之前的数据，只显示最近60个月的内容
if(data.length & maxTime){
data.splice(0, maxTime);
//经过D3比例尺计算的环的宽度
var R = rScale(data.length);
console.log(R);
for(var i=0; i&data. i++){
data[i]['type'] = 'pie';
data[i]['radius'] = [i * R + 40, i * R + 40 + R];
//if(typeof($scope.times[i])!= null)
data[i]['name'] = $scope.times[i];
data[i]['itemStyle'] = {normal : {
label : {show : i & (data.length-2)},
labelLine : {
show : i & (data.length-2),
length:40,
color : '#f0f',
width : 10,
type : 'dotted'
//显示中央文字
setTimeout(function(){
var myDate = new Date();
var myMouth = myDate.getMonth()+1;
var myYear = myDate.getFullYear();
//获取完整的年份(4位,1970-????)
// 补充千层饼中央的说明文字
var _ZR = myChart.getZrender();
_ZR.addShape({
shape : 'text',
x : _ZR.getWidth() / 2,
y : _ZR.getHeight() / 2,
color: 'orange',
text : data.length + '个月前',
textAlign : 'center'
_ZR.addShape({
shape : 'text',
x : _ZR.getWidth() / 2 + data.length * R +50,
y : _ZR.getHeight() / 2,
color: 'orange',
strokeColor: 'pink',
text : '今日 ' + myYear + "年" + myMouth + "月" ,
textAlign : 'left',
textFont:'normal 14px 微软雅黑'
_ZR.refresh();
这样，无论数据量大小，年轮图都有可用性：
只有4个月数据时的年轮图
30个月的测试数据的年轮图
当然，做到这一步，虽然实现了需求，但毕竟是照着别人的例子修改，没有自己创作来的有深度。不过如何自己创作，就超过了本文的范畴，并且也不是这一篇博客所能包含得了的，日后再议。
5.浏览器兼容性：
最后必须一提浏览器兼容性问题。IE8、IE7浏览器不兼容canvas绘图（IE6请允许我直接无视），为了实现兼容需要引入excanvas_r3库。
&!--Le HTML5 shim,forIE6-8supportofHTML5elements--&
&&&&&!--[ifltIE9]&
&&&&&&&script src="application/views/frontEnd/build/lib/html5shiv.js"&&/script&
&&&&&&&script src="application/views/frontEnd/build/lib/echarts-1.3.8/excanvas/excanvas.js"&&/script&
&&&&&![endif]--&
有时IE8中绘图错位，加入以下代码启用IE7兼容模式即可解决：
&!--解决IE8中canvas绘图错位--&
&&&&&!--[iflt IE9]&
&&&&&meta http-equiv="X-UA-Compatible"content="IE=7"/&
&&&&&![endif]--&
&& 本文固定链接:
阅读(...) 评论()
这里是我的博客备份，我的个人主站点地址是：http://www./zhangdi/