echarts中如何使用timeline组件
来源:互联网 发布:冷暴力孩子知乎 编辑:程序博客网 时间:2024/06/06 01:00
1.吃碗面
这里关于echarts3 官网的示例我不得不吐槽一下,逼格真高!一小部分示例动不动数据就是国家统计局搞出来的,你脸真大。当然他们做的示例的确是很好,这一点毫无疑问。当我看了echarts3关于timeline的使用,我就觉得我有必要写一篇Echarts中timeline组件的使用。这玩意东西时间久了,真心容易忘,就当是做个备忘吧。
这里还是要再说两句,百度的echarts 官方文档写很简略,然而事例代码又比较难,冗长,看一遍看两遍基本上不能让人马上就会用,尤其是这个timeline组件,所以我写个事例希望帮助其他人,也能快速上手这个timeline。
2.官方解释 Echarts Timeline组件
timeline
组件,提供了在多个 ECharts option
间进行切换、播放等操作的功能。
适用的范围是:非动态数据,坐标轴的数据已经确定好数据才便于展示。当然要实现动态数据也是可行的。
官方注意的:
使用注意与最佳实践:
公有的配置项,推荐配置在
baseOption
中。timeline
播放切换时,会把options
数组中的对应的option
,与baseOption
进行 merge 形成最终的option
。options
数组中,如果某一数组项中配置了某个属性,那么其他数组项中也必须配置某个属性,而不能缺省。否则这个属性的执行效果会遗留。复合 option 中的
options
不支持 merge。也就是说,当第二(或三、四、五 ...)次
chart.setOption(rawOption)
时,如果rawOption
是复合 option(即包含options
列表),那么新的rawOption.options
列表不会和老的options
列表进行 merge,而是简单替代。当然,rawOption.baseOption
仍然会正常和老的 option 进行merge。
3.示例效果图
4.示例代码
var option = { //timeline基本配置都写在baseoption 中 baseOption: { timeline: { //loop: false, axisType: 'category', show: true, autoPlay: true, playInterval: 1000, data: ['1', '2', '3'] }, grid: { containLabel: true }, xAxis: [{ type: 'category', name: '企业', }, ], yAxis: { type: 'value', name: 'Mwh' }, series: [ { type: 'line', }, ], tooltip: {} }, //变量则写在options中 options:[ { xAxis: [{ data: ['能化国际电力股份有限公司', '大唐国际发电公司', '北京华夏发电公司'] }], title: { text: '电量使用总计', subtext: '单位:Mwh' }, series: [ { data: [120, 450, 140] }, ] }, { xAxis: [{ data: ['能化国际电力股份有限公司', '大唐国际发电公司', '北京华夏发电公司'] }], title: { text: '电量使用总计', subtext: '单位:Mwh' }, series: [ { data: [530, 130, 780] }, ] }, { xAxis: [{ data: ['能化国际电力股份有限公司', '大唐国际发电公司', '北京华夏发电公司'] }], title: { text: '电量使用总计', subtext: '单位:Mwh' }, series: [ { data: [560, 350, 180] }, ] }, ] }
timeline.data
中的每一项,对应于 options
数组中的每个 option
。5.示例下载
6.总结:
作者:张林
标题:echarts中如何使用timeline组件 原文地址:http://blog.csdn.net/kebi007/article/details/53167003
转载随意注明出处- echarts中如何使用timeline组件
- QT5中使用Echarts图表组件
- 什么是Echarts?Echarts如何使用?
- 如何使用timeline profile tensorflow 程序
- react中使用echarts
- vuejs中使用echarts
- React中使用ECharts
- angular中使用ECharts
- webpack中使用echarts
- 如何在vue脚手架里面使用echarts 组件显示中国地图---亲测
- 如何将Timeline用于网络游戏的剧情系统中
- echarts介绍及如何使用
- Android项目中使用echarts
- vue项目中使用echarts
- 在 webpack 中使用 ECharts
- Extjs中使用Echarts(自适应)
- Vue.js中,使用echarts
- Unity2017 Timeline使用初探
- 简单却又复杂的FizzBuzz面试编程问题
- json数组小综合
- Scala特点-2
- Android Studio模板之文件组
- 【杭电2824】欧拉函数
- echarts中如何使用timeline组件
- static关键字注意事项
- Android随笔之动态加载布局
- poj 2513(字典树等部分借鉴网上代码)
- python——配置环境变量
- string类
- 在代码段中使用数据(0601)
- Opencv 和 c++ 框出图片中的目标
- leetcode 504. Base 7 python