ECharts-旭日图（Sunburst）带时间轴

常见结构

var dom = document.getElementById("container");
//定义echarts对象
var myChart = echarts.init(dom);
//构建图表的参数var option = {//定义标题title: {text: '揽件汇总',textStyle: {fontSize: 14,align: 'center'}},//鼠标悬停显示，旭日图的{d}百分比 显示不出来tooltip: {trigger: 'item',formatter: "{b}: {c}"},//参数列表series: {type: 'sunburst',highlightPolicy: 'ancestor',//数据源data: 数据源,radius: [0, '95%'],//排序，null表示依据后台传的数据排序sort: null,levels: [{}, {//内环r0: '15%',r: '40%',itemStyle: {borderWidth: 2},label: {rotate: 'tangential'}}, {//中环r0: '40%',r: '69%',label: {align: 'right'}}, {//外环r0: '69%',r: '77%',label: {position: 'outside',padding: 3,silent: false,color:'black'},itemStyle: {borderWidth: 3}}]}}myChart.setOption(iption);

添加时间轴和加载动画

echarts是一次把所有数据都获取到之后才构建图表的，时间轴的每一个节点都是一个旭日图，以前的option{}变为options[{},{}]。\
这时获取的数据就是单一旭日图的好n倍，加载时间必然会加长，需要添加等待动画

注意点：

数据结构，与单一旭日图相比，除了需要传每个时间点的数据，还是要传每个时间节点，如果要查询的时间点是固定不变的可不传

    public JSONObject getData(Map<String, Object> map) throws ParseException {JSONObject totinfo = new JSONObject();//7天数据集合List<Object> resAll = new ArrayList<>();//7天时间节点List<String> daylist = new ArrayList<>();//查询第一天时保存最大日期和日期列表String  maxDate = effect_echartsDao.getmaxDate();Calendar c = Calendar.getInstance();Date date = new SimpleDateFormat("yyyy-MM-dd").parse(maxDate);c.setTime(date);int i=0;do {daylist.add(maxDate);//获取某一天的数据List<Echarts_torusVO> areaList = getOneDayinfo(maxDate);resAll.add(areaList);i++;//天数往前推一天c.add(Calendar.DATE, -1);maxDate = new SimpleDateFormat("yyyy-MM-dd").format(c.getTime());}while (i<7);totinfo.put("rows",resAll);totinfo.put("daylist",daylist);return totinfo;}

myChart.showLoading();是echarts自带的加载动画，使用前提是ajax使用异步加载，否则页面整个锁住（即便等待gif显示都会卡成静态图）。\
然而使用异步加载会导致后面构建图表时数据源和时间节点参数还没赋值。\
所以我使用的定时函数，每0.1秒执行一次，判断ajax执行完没有，如果执行完了，那么我的两个变量不为null,这时就可以开始绘制图表了，否则就一直等待
其他一些小问题

baseOption:{timeline: {axisType:'category',/* autoPlay: true,playInterval:3000,*///时间节点必须是字符数组，后台的List可以使用data.toString().split(",");转化data: daylist},title: {subtext: '大区省分拨规划达成票数统计'}},options:[{title: {//标题跟随时间切换动态显示text: daylist[0]+'揽件汇总',textStyle: {fontSize: 14,align: 'center'}},tooltip: {trigger: 'item',formatter: "{b}: {c}"},series: {type: 'sunburst',highlightPolicy: 'ancestor',data: alldata[0],。。。}},{...},{...},{...},{...}]

优化代码（官方方案）

补上前面的坑，后来有空看了一下官方文档，官网提供的请求数据方式ajax结构简单，又不需要考虑同步异步的问题，简直完美

ECharts-旭日图（Sunburst）带时间轴相关推荐

带时间轴歌词示例_带有示例JavaScript externalHTML
带时间轴歌词示例 In this tutorial, I will tell you about outerHTML in javascript. outerHTML provides devel ...
《AI上字幕》基于openAI研发的whisper模型，语音（视频）一键转文本/字幕/带时间轴/支持多语言/自带翻译《桌面版教程》
简介: OpenAI的chatGPT非常火爆,其实OpenAI旗下的另一个模型实力也十分强大,它就是开源免费的Whisper语音转文本模型,目前为止它是较为顶尖的语音转文本模型当前github上也有 ...
android时间轴折线图,带时间轴的折线图
8.20折线图数据 click document.getElementById('btn').οnclick=function() { // 基于准备好的dom,初始化echarts实例 var my ...
极致呈现系列之：Echarts旭日图的绚丽奇观
目录什么是旭日图旭日图的特性及应用场景旭日图的特性应用场景旭日图常用的配置项创建基本的旭日图自定义旭日图样式样式旭日图的高级应用什么是旭日图旭日图是一种可视化图表,用于展示层级结构 ...
echarts旭日图添加图例
echarts官网中的示例如下,我们只能看到一个visualMap的属性中加了inRange,便可以出来一个渐变色的图例但往往业务需求要的图例是这种格式的先贴一个实现的效果图,铛铛啷挡~~ 实现这 ...
Laya动画，整图动画，序列图动画，时间轴动画，龙骨动画
Laya动画基础 Egret帧动画工具类版本:2.1.1.1 序列图动画白鹭的序列图动画,使用TexureMerger合图,然后使用MovieClip类播放. Laya的话,使用图集打包工具合图, ...
Laya的动画制作，整图动画，序列图动画，时间轴动画，龙骨动画
参考: Laya动画基础 Egret帧动画工具类序列图动画白鹭的序列图动画,使用TexureMerger合图,然后使用MovieClip类播放. Laya的话,使用图集打包工具合图,然后使用Ani ...
echarts旭日图数据重构处理
网上对于旭日图的数据结构处理资料很少,所以自己记录一下. 首先看旭日图需要的数据结构: // 旭日图{name: '淘宝',children: [{name: '女装',children:[{name ...
带时间轴歌词示例_Web设计中时间轴的20个精彩示例
我可以肯定你们中的大多数人都知道设计中使用了时间轴,特别是因为现在所有的Facebook个人资料都是以这种方式显示的 . 此外,一些智能手机应用(例如Path或Tweetbot)也使用基于时间轴的设计 ...

ECharts-旭日图（Sunburst）带时间轴

常见结构

添加时间轴和加载动画

注意点：

优化代码（官方方案）

ECharts-旭日图（Sunburst）带时间轴相关推荐

最新文章

热门文章