问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
markPoint : {
symbol :'circle',
normal : {
show : true,
itemStyle : {},
name: '某个屏幕坐标',
同步到新浪微博
分享到微博？
你好! && 看起来你挺喜欢这个内容，但是你还没有注册账户。
当你创建了账户，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知二次元同好交流新大陆
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
PowerPoint-1放到最后了，就不需再作调整，否则，要根据实际需要将需要放置到第二绘图区的若干项数据放到最后（这部分内容可从附录所给相关复合饼图文章地址详细了解）。再将“图表类型”选择为复合饼图，如图-1200320102007
-420102003-2
--20102003-
20032010-5
2003-62010-5
-720037201010201020032010320102003
阅读(17763)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_080064',
blogTitle:'PPT图表自定义动画应用：复合条饼图的动态进入',
blogAbstract:'
饼图和复合饼图是统计报表、项目书、演示文稿中常用的图表，Excel和PPT都可以制作饼图和复合饼图。只不过Excel中的复合饼图是静态的，缺乏一点生气，而PPT制作的饼图和复合饼图却可以按颜色一个个扇形依次动态进入，不仅第一绘图区的主饼，就连第二绘图区的小饼或条状图也可动态显示，这些动态元素能为演示文稿吸引不少眼球。
blogTag:'ppt图表,复合条饼图,自定义动画,动态进入',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:7,
publishTime:5,
permalink:'blog/static/',
commentCount:3,
mainCommentCount:3,
recommendCount:2,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}最近在学百度的echarts,挺认真的看了文档，但是真没找到饼图的下钻功能，highchart有方法叫drilldown,有没有用过echarts的盆友，求指导一下。
是这个么。
已有帐号？
无法登录？
社交帐号登录
www.tuer.me09:30 提问
百度Echarts饼状图关于圆环线设置
你好，想跟你请教个问题：echarts饼图取消calculable拖拽后，外面套的圆环线也消失了。有什么设置能保留那个圆环线呢？多谢大神
141关注|507收录
310关注|1194收录
265关注|156收录
其他相似问题
相关参考资料ECharts使用心得总结（二） - 星星之火116 - 博客园
燎原之势不可挡
posts - 113, comments - 351, trackbacks - 0, articles - 3
Echarts使用心得总结（二）
前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之前写过一篇相关的文章，当时主要是讲了如何引入、使用Echart，最新的Echart版本已经发布，之前讲的很多文件都可以删除了，下边会一一给大家细讲。
为了更好的讲解如何使用这个图形渲染插件，我会通过创建一个解决方案的形式一点点给大家讲解清楚。
1.& EChart最新的文档目录。
首先创建一个解决方案，目录如下：
之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包，最新的版本已经将这些合并在一起了，只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下：
l& Echarts-map.js :主要用来渲染跟地图相关
l& Echarts.js :基本的常规图形相关
l& Esl.js :图像引擎
Statics文件夹下的ECharts.js文件，为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。
2.& 抽象之后的Echarts。
根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下：
Var ECharts={
ChartConfig:function(container,option){ &..},//加载Echarts配置文件
ChartDataFormate:{&.},//数据格式化
ChartOptionTemplates:{&.},//初始化常用的图表类型
Charts:{ RenderChart:function(option){&.},//渲染图表
RenderMap:function(option){&}//渲染地图
2.1 Echarts配置文件的引入
在开始使用时，首先需要引入Echarts 的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：
ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置
var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径
var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径
require.config({//引入常用的图表类型的配置
echarts: chart_path,
'echarts/chart/bar': chart_path,
'echarts/chart/pie': chart_path,
'echarts/chart/line': chart_path,
'echarts/chart/k': chart_path,
'echarts/chart/scatter': chart_path,
'echarts/chart/radar': chart_path,
'echarts/chart/chord': chart_path,
'echarts/chart/force': chart_path,
'echarts/chart/map': map_path
this.option = { chart: {}, option: option, container: container };
return this.
2.2 数据格式化
为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:
& & & &Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}&.]
&&&&&& Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]
具体的代码实现如下：
ChartDataFormate: {
FormateNOGroupData: function (data) {//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
var categories = [];
var datas = [];
for (var i = 0; i & data. i++) {
categories.push(data[i].name || "");
datas.push({ name: data[i].name, value: data[i].value || 0 });
return { category: categories, data: datas };
FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
var chart_type = 'line';
chart_type = type || 'line';
var xAxis = [];
var group = [];
var series = [];
for (var i = 0; i & data. i++) {
for (var j = 0; j & xAxis.length && xAxis[j] != data[i]. j++);
if (j == xAxis.length)
xAxis.push(data[i].name);
for (var k = 0; k & group.length && group[k] != data[i]. k++);
if (k == group.length)
group.push(data[i].group);
for (var i = 0; i & group. i++) {
var temp = [];
for (var j = 0; j & data. j++) {
if (group[i] == data[j].group) {
if (type == "map")
temp.push({ name: data[j].name, value: data[i].value });
temp.push(data[j].value);
switch (type) {
case 'bar':
var series_temp = { name: group[i], data: temp, type: chart_type };
if (is_stack)
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
case 'map':
var series_temp = {
name: group[i], type: chart_type, mapType: 'china', selectedMode: 'single',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
data: temp
case 'line':
var series_temp = { name: group[i], data: temp, type: chart_type };
if (is_stack)
series_temp = $.extend({}, { stack: 'stack' }, series_temp);
var series_temp = { name: group[i], data: temp, type: chart_type };
series.push(series_temp);
return { category: group, xAxis: xAxis, series: series };
2.3 各种图表类型的配置初始化
在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：
ChartOptionTemplates: {
CommonOption: {//通用的图表基本配置
tooltip: {
trigger: 'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
toolbox: {
show: true, //是否显示工具栏
feature: {
mark: true,
dataView: { readOnly: false }, //数据预览
restore: true, //复原
saveAsImage: true //是否保存图片
CommonLineOption: {//通用的折线图表的基本配置
tooltip: {
trigger: 'axis'
toolbox: {
show: true,
feature: {
dataView: { readOnly: false }, //数据预览
restore: true, //复原
saveAsImage: true, //是否保存图片
magicType: ['line', 'bar']//支持柱形图和折线图的切换
Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...
var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
var option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}/%)',
show: true
orient: 'vertical',
x: 'left',
data: pie_datas.category
name: name || "",
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
data: pie_datas.data
return $.extend({}, monOption, option);
Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...
var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, 'line', is_stack);
var option = {
data: stackline_datas.category
type: 'category', //X轴均为category，Y轴均为value
data: stackline_datas.xAxis,
boundaryGap: false//数值轴两端的空白策略
name: name || '',
type: 'value',
splitArea: { show: true }
series: stackline_datas.series
return $.extend({}, monLineOption, option);
Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...
var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'bar', is_stack);
var option = {
legend: bars_dates.category,
type: 'category',
data: bars_dates.xAxis,
axisLabel: {
show: true,
interval: 'auto',
rotate: 0,
margion: 8
type: 'value',
name: name || '',
splitArea: { show: true }
series: bars_dates.series
return $.extend({}, monLineOption, option);
&&..//其他的图表配置，如柱图+折线、地图
2.4 图形的渲染
在配置好图表类型的option之后，就可进行图表的渲染了，具体的代码实现如下：
RenderChart: function (option) {
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie',
'echarts/chart/k',
'echarts/chart/scatter',
'echarts/chart/radar',
'echarts/chart/chord',
'echarts/chart/force',
'echarts/chart/map'
function (ec) {
if (option.chart && option.chart.dispose)
option.chart.dispose();
option.chart = echarts.init(option.container);
window.onresize = option.chart.
option.chart.setOption(option.option, true);
&&..//渲染其他的图表类型，如：地图
3.& 具体页面的使用
经过2步骤中的一些列的配置、处理、初始化，我们就可以具体的使用了，在每一个aspx页面使用之前，我们首先需要在页面的标题引入以下的文件：
&script src="/Scripts/jquery-1.4.1.js" type="text/javascript"&&/script&
&script src="/Statics/echarts/esl.js" type="text/javascript"&&/script&
&script src="/Statics/ECharts.js" type="text/javascript"&&/script&
引入之后就可进行使用了，下面演示几个常用的图表的使用：
首页每个aspx页面上都有一个div用来做渲染图表的容器，如下：
&div id="echart" style="width:100%; height:400"&&/div&
3.1.1 实现代码
&script type="text/javascript"&
function () {
var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];
var option = ECharts.ChartOptionTemplates.Pie(data);
var container = $("#echart")[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
3.1.2 展示效果
3.2.1 实现代码
&script type="text/javascript"&
function () {
var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];
var option = ECharts.ChartOptionTemplates.Bar(data);
var container = $("#echart")[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
function () {
var data = [{ name: '2014-01', value: 20, group: 'A' }, { name: '2014-01', value: 40, group: 'B' }, { name: '2014-02', value: 30, group: 'A' }, { name: '2014-02', value: 10, group: 'B' }, { name: '2014-03', value: 200, group: 'A' }, { name: '2014-03', value: 60, group: 'B' }, { name: '2014-04', value: 50, group: 'A' }, { name: '2014-04', value: 45, group: 'B' }, { name: '2014-05', value: 110, group: 'A' }, { name: '2014-05', value: 80, group: 'B' }, { name: '2014-06', value: 90, group: 'A' }, { name: '2014-06', value: 60, group: 'B'}];
var option = ECharts.ChartOptionTemplates.Bars(data,'Love');
var container = $("#echart")[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
var option = ECharts.ChartOptionTemplates.Bars(data, 'Love', true);
var container = $("#echart1")[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
3.2.2展示效果
3.3 折线图
3.3.1 实现代码
&script type="text/javascript"&
$(function () {
var data = [
{ name: '2013-01', group: 'olive', value: 116 },
{ name: '2013-01', group: 'momo', value: 115 },
{ name: '2013-01', group: 'only', value: 222 },
{ name: '2013-01', group: 'for', value: 324 },
{ name: '2013-02', group: 'olive', value: 156 },
{ name: '2013-02', group: 'momo', value: 185 },
{ name: '2013-02', group: 'only', value: 202 },
{ name: '2013-02', group: 'for', value: 34 },
{ name: '2013-03', group: 'olive', value: 16 },
{ name: '2013-03', group: 'momo', value: 51 },
{ name: '2013-03', group: 'only', value: 22 },
{ name: '2013-03', group: 'for', value: 84 }
var opt = HighChart.ChartOptionTemplates.Line(data, 'Love-Rate', "折线图示例");
var container = $("#container");
HighChart.RenderChart(opt, container);
function () {
var data = [{ name: '2014-01', value: 20, group: 'A' }, { name: '2014-01', value: 40, group: 'B' }, { name: '2014-02', value: 30, group: 'A' }, { name: '2014-02', value: 10, group: 'B' }, { name: '2014-03', value: 200, group: 'A' }, { name: '2014-03', value: 60, group: 'B' }, { name: '2014-04', value: 50, group: 'A' }, { name: '2014-04', value: 45, group: 'B' }, { name: '2014-05', value: 110, group: 'A' }, { name: '2014-05', value: 80, group: 'B' }, { name: '2014-06', value: 90, group: 'A' }, { name: '2014-06', value: 60, group: 'B'}];
var option = ECharts.ChartOptionTemplates.Lines(data,'lines',false);
var container = $("#echart")[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
var option = ECharts.ChartOptionTemplates.Lines(data, 'lines', true);
var container = $("#echart1")[0];
opt = ECharts.ChartConfig(container, option);
ECharts.Charts.RenderChart(opt);
3.3.2展示效果
3.4 柱图+折线（增幅）图
3.4.1 展示效果
3.5.3 展示效果
到这里，基本就把echart的抽象跟使用讲完了，因为时间的关系，还有一些图形的配置、数据处理没有列出代码，但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用，敬请期待。}