本文介绍了如何使用ECharts实现一条时间轴控制多个饼图的交互效果，详细解析了通过时间轴切换显示不同饼图数据的实现过程，并讲解了如何修改饼图区域颜色，提供了一段包含完整选项的示例代码。
最近在做两个网页，用到了ECharts和Highstock图表，确实比Chart.js更漂亮、更直观。
今天分享一下我用ECharts的一些心得。
1.用一条时间轴控制多个饼图
ECharts的官网给出的实例说到时间轴的基本上都是一条时间轴控制一个图表，例如下图
但是有些时候我们可能需要用一个时间轴控制多个图，例如下图
其实大家多看看ECharts实例的代码，会发现做出这样一个效果并不难
首先直接用ECharts官网给出的标签式单文件引入饼图
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>接下来将所有的option内的代码封装到options内，并在option内加入timeline代码：
var option = {
timeline: {
data: [
'2013', '2014', '2015'
],//控制时间轴的节点数
label: {
formatter: function(s) {
return s.slice(0, 4);
}
},//控制时间轴节点的显示
autoPlay: false//禁止自动播放
},
options:[{
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
}]
};此时显示为一个饼图加时间轴，如果需要再加一个饼图，需要在series中再加入另外的饼图元素：
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['20%', '60%'],//饼图圆心的位置
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],//饼图圆心的位置
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['80%', '60%'],//饼图圆心的位置
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}]饼图的圆心位置一定要改，不然你会发现即使你series里面有再多的饼图都只显示一个，因为重叠在同一个位置。
此时时间轴的控制还没有做出来，其实有了上面的思想，下面做时间轴确实很简单。
时间轴要做的就是点击时间点的时候切换显示的数据，我们只要在options内再复制之前的series，修改里面的数据就可以了，你们会发现options结构是这样的：
options:[{},{},{}] //我们添加的series封装在第二个和第三个中括号内即可下面是options全部代码：
options:[{
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['20%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
},{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['80%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]},{
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['20%', '60%'],
data:[
{value:235, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:134, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:235, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:134, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:548, name:'搜索引擎'}
]
},{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['80%', '60%'],
data:[
{value:235, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:134, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:548, name:'搜索引擎'}
]
}
]
},{}] //在最后一个{}里添加series即可控制最后一个时间点数据有了上面的思想便可以做出一个时间轴控制多个图表的效果，如下图所示：
2.修改饼图区域颜色
ECharts中有专门的语句修改颜色，如果想修改饼图每个区域的颜色，只需要在options中加入以下代码：
color: ['rgb(46,199,201)', 'rgb(182,162,222)', 'rgb(90,177,239)', 'rgb(255,185,128)', 'rgb(216,122,128)'],颜色的顺序按照data里的数据顺序来。
扫一扫
512
到【灌水乐园】发言
