ECharts时间轴与颜色
来源:互联网 发布:日程软件 知乎 编辑:程序博客网 时间:2024/06/06 18:43
最近在做两个网页,用到了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里的数据顺序来。
0 0
- ECharts时间轴与颜色
- ECharts纵坐标时间轴
- echarts图例颜色与地图底色
- echarts时间轴属性参数
- echarts中时间轴单独使用
- echarts折线图时间轴展示
- ECharts横轴为时间轴折线图
- echarts 颜色设置
- Echarts 柱状图颜色控制
- 【echarts】修改柱状图颜色
- ECharts 仪表盘改变颜色
- echarts颜色渐变
- echarts柱状图颜色渐变
- echarts 背景颜色透明
- echarts 柱状图坐标轴颜色
- echarts的x轴y轴的颜色改变
- echarts的x轴y轴的颜色改变
- ECharts颜色渐变、Y轴文字左对齐
- OpenCV—反向投影直方图检测特定图像内容
- Android群英传读书笔记---View测量和绘制
- LintCode | Easy | 爬楼梯 | Climbing Stairs
- Swift快速入门-2-型别安全及推断、整点浮点转换
- POJ 2309:BST lowbit
- ECharts时间轴与颜色
- web前端-js匿名函数
- 欢迎使用CSDN-markdown编辑器
- 软件需求说明书(GB856T—88)
- Quartz2D绘图之绘制文本
- MySQL中的UNIX_TIMESTAMP函数使用总结 :
- web前端-js通过object创建对象
- js从输入框读取内容,比较两个数字的大小
- TCP/IP相关知识点