Echarts（三）：含有时间轴的可视化案例1

这是一篇小白的实现时间轴的可视化的笔记。

Timeline说明

timeline 需要操作多个option。

“我们把传入 setOption 第一个参数，称为 ECOption，称传统的 ECharts 单个 option 为 ECUnitOption。

当 timeline 和 media query 没有被设置时，一个 ECUnitOption 就是一个 ECOption。
当 timeline 或 media query 被使用设置时，一个 ECOption 由几个 ECUnitOption 组成。
ECOption 的各个根属性，形成一个 ECUnitOption，叫做 baseOption，它代表了各种默认设置。
options 数组每项，形成一个 ECUnitOption，我们为了方便也叫做 switchableOption，它代表了每个时间粒度对应的 option。”

简单来说：baseOption（根属性） 和一个 switchableOption（原子属性） 会用来计算最终的 finalOption，图表根据最终结果绘制的。

官网提供的例子：

myChart.setOption({// `baseOption` 的属性.timeline: {...,// `timeline.data` 中的每一项，对应于 `options`// 数组中的每个 `option`data: ['2002-01-01', '2003-01-01', '2004-01-01']},grid: { ... },xAxis: [ ... ],yAxis: [ ... ],series: [{// 系列一的一些其他配置type: 'bar',...}, {// 系列二的一些其他配置type: 'line',...}, {// 系列三的一些其他配置type: 'pie',...}],// `switchableOption`s:options: [{// 这是'2002-01-01' 对应的 optiontitle: {text: '2002年统计值'},series: [{ data: [] }, // 系列一的数据{ data: [] }, // 系列二的数据{ data: [] }  // 系列三的数据]}, {// 这是'2003-01-01' 对应的 optiontitle: {text: '2003年统计值'},series: [{ data: [] },{ data: [] },{ data: [] }]}, {// 这是'2004-01-01' 对应的 optiontitle: {text: '2004年统计值'},series: [{ data: [] },{ data: [] },{ data: [] }]}]
});

在网上也看了很多实例，然后打算按照官网提供的范例自己写一次，第一次完成代码如下：

var option={//timelinetimeline:{axisType: 'category',autoPlay: true,playInterval: 1500},//basebaseOption:{animationDurationUpdate:playInterval*1.5,animationEasingUpdate:'quinticInOut',title:{text:'一月到三月ABC商品销售情况',subtext:'2021.5.29'},tooltip: {trigger: 'axis'},legend:{data:['A','B','C']},toolbox:{feature:{dataView:{readOnly:false},saveAsImage: {}}},  xAxis:[{type:'category',data:['A','B','C']}],yAxis:[{name:'销售量',type:'value',} ], series: [{// 系列一的一些其他配置seriesLayoutBy: 'row',type: 'bar'}, {// 系列二的一些其他配置seriesLayoutBy: 'row',type: bar'}, {// 系列三的一些其他配置seriesLayoutBy: 'row',type: bar'}],            },options:[]};//timeline中的每一个options: [{// 'A' 对应 optiontitle: {text: '一月份统计值'},series: [{ data: [ 120,89,49]}]}, {// 'B' 对应 optiontitle: {text: '二月份统计值'},series: [{ data:[53,78,99]} ]}, {// 'C' 对应 optiontitle: {text: '三月份统计值'},series: [{data:[94,80,66] }]}               ];

可以说，非常短，精简到基本没有什么功能了，但是仍然运行不了。

参考了很多优秀的图。（eg一张好看的图还是一张好看的图）

error1：猜测和options有关。发现大部分，处理这里需要一个push方法。

for (var n = 0; n<yearlist.length; n++){option.options.push({title:{show:true,text:yearlist[n]+'年世界各国GDP (万亿美元)',left: 'center',textStyle:{fontSize:24}},series:[{type: 'bar',seriesLayoutBy: 'row',encode:{x:'year',y:yearlist[n]}},]});}

然后查了关于push的用法：

*push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

*arrayObject.push(newelement1,newelement2,....,newelementX)

*位置：添加在数组的末尾。

*结果：数组长度改变；返回值是数组的长度。

。。。

这个时候我突然想到：

这说明base里面的options是一个列表，后期push向空列表里面添加东西。如果不用push的方法，只要在baseoption里面把全部option内容补全。

于是这个人把能用不能用的代码全删了……仍然运行不了。

但是，我把别人的options按照这个想法设置了，然后确实正常运行没有问题。

所以下一次再用push方法，现在偷懒把全部options在baseoption里面一次定义好。

error2：后半段option无误，说明问题在前面部分。

1.timeline里面没有data数据。（快被自己蠢死了）

2.animationDurationUpdate:playInterval*1.5,;animationEasingUpdate:'quinticInOut',这句话删掉就好了。(原理不明)

option={//timelinetimeline:{axisType: 'category',autoPlay: true,playInterval: 1500,data:['一月','二月','三月']},//basebaseOption:{title:{text:'一月到三月ABC商品销售情况',subtext:'2021.5.30'},tooltip: {trigger: 'axis'},legend:{data:['A','B','C']},grid: {left: '10%',bottom: '15%',containLabel: true},toolbox:{feature:{dataView:{readOnly:false},saveAsImage: {}}},  xAxis:[{type:'category',data:['A','B','C']}],yAxis:[{name:'销售量',type:'value',} ], series: [{id:'bar',type:'bar',}],            },options: [{// 'A' 对应 optiontitle: {text: '一月份统计值'},series: [{   seriesLayoutBy: 'row',type: 'bar',data: [ 120,89,49]}]}, {// 'B' 对应 optiontitle: {text: '二月份统计值'},series: [{   seriesLayoutBy: 'row',type: 'bar',data:[53,78,99]} ]}, {// 'C' 对应 optiontitle: {text: '三月份统计值'},series: [{   seriesLayoutBy: 'row',type: 'bar',data:[94,80,66] }]}               ]};

成了。虽然确实非常的简陋。

框架总结。

var option={timeline:{},baseOption:{},options:[]};

これ以上，シャレてる時間はない〖没有多余时间可以浪费〗——Butter-Fly

Echarts（三）：含有时间轴的可视化案例1相关推荐

Android实训案例(三)——实现时间轴效果的ListView,加入本地存储，实现恋爱日记的效果！
Android实训案例(三)--实现时间轴效果的ListView,加入本地存储,实现恋爱日记的效果! 感叹离春节将至,也同时感叹时间不等人,一年又一年,可是我依然是android道路上的小菜鸟,这篇讲 ...
android 炫酷时间轴,这38款超级炫酷的时间轴特效代码案例，总有一款是你需要的...
最近,看到一些很漂亮的时间轴图表,效果真的非常不错.这些图表,写到需要的项目中,也是非常棒的.当然,你也可以拿它来当作学习的小练习.时间轴,在很多企业官网或者关于企业历史大事件介绍的时候,使用的频率还 ...
echarts的x时间轴显示的月份是英文缩写
echarts的x时间轴显示的月份是英文缩写这是因为echarts默认是英文的显示,只需要改成中文就可以显示成中文了,在init的时候加上{ locale: "ZH" }(nul ...
echarts散点图搭配时间轴
1.echarts搭配时间轴可以很直观的看到数据的动态变化,那么如何实现呢?请看代码. 2.这次做的散点图是学生的成绩随着时间的变化图,就是学生的成绩随着时间的变化而变化. x轴是时间,年月日,和时间 ...
关于做angular引入echarts图表、时间轴
1. echarts图: 1> 首先在项目中需要安装一下 npm install echarts --save 2> 然后再引入到项目angular.json的scripts中 " ...
Echarts 动态数据+时间轴格式化
最近再项目中遇到实时绘制数据波形图,设计到echarts 的时间轴问题,下面是绘制的图我们直接看option配置项后面画红框的为x横轴时间轴线格式化的重要部分,你可以根据设计原图的格式化自己想要的 ...
Echarts实现带时间轴的疫情地图
效果图如下: 实现了一个小小的demo,来对麻城市发病的人的地理位置.和对应时间进行显示.实现地图的加载时,为了方便,数据和代码我都直接放在服务器的环境下运行了.利用ajax对数据进行请求,每天的患者 ...
echarts 使用 time 时间轴
最少代码量表达: let myChart = this.$echarts.init(document.getElementById('myEcharts'));// 绘制图表let option;op ...
echarts 横轴为时间轴，换行问题
效果图: axisLabel: {//坐标轴刻度标签的相关设置. rotate: 60, margin: 20, formatter: function(params) { var newParams ...

Echarts（三）：含有时间轴的可视化案例1

Timeline说明

Echarts（三）：含有时间轴的可视化案例1相关推荐

最新文章

热门文章