关于echarts套娃柱状图（嵌套柱）的实现

嘻嘻嘻先上图看效果：

是不是有一种套娃的感觉。

这个图表的实现其实就是多个柱状图叠在一起，然后个别设置宽度，重点看 xAxis 和 series -> xAxisIndex 的对应。

注意：由于有多个 xAxis，所以对于 tooltip -> formatter 的格式重置也是很重要的。

 var myChartc = echarts.init(document.getElementById('echarts'));// 显示标题，图例和空的坐标myChartc.showLoading();    //数据加载完之前先显示一段简单的loading动画myChartc.setOption({title: {text: ''},tooltip: {trigger: 'axis',show:true,formatter: function(params) { //设置滑过显示小圆点以及对应数据的位置 方便看数var result = params[0].name+'<br>';params.forEach(function(item) {result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';result +=item.seriesName+": "+'<span style="color:#fff">'+ item.data+"</span><br>"});return result;},},grid: {left: '0'},legend: {data: ['A**数', 'B**数', 'C**数', '', 'D**数','E**数', 'F**数'],textStyle:{color:'#fff'},padding:20,margin:20},toolbox: {show: false,feature: {mark: {show: true},dataView: {show: true, readOnly: false},magicType: {show: true, type: ['line', 'bar']},restore: {show: true},saveAsImage: {show: true}}},calculable: true,grid: {y: 70, y2: 30, x2: 60,tooltip:{show:true}},yAxis:{name: '人数',nameTextStyle:{color:'#fff'},splitLine: {show: true},//去除网格线type: 'value',axisLabel: {show: true,interval:0,textStyle: {color: '#fff'}},axisTick: {show: false},axisLine: {show: false}},xAxis: [//x轴只显示一个就可以 对应 xAxisIndex: 0,A***数           {axisLabel :{interval:0,textStyle: {color: '#fff'},show:true},axisTick: {show: false},axisLine:{lineStyle:{color:'#fff'},show:false},data: monthD, // 日期X轴 },//对应 xAxisIndex: 1,B***数 {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitArea: {show: false},splitLine: {show: false},data: monthD},//对应 xAxisIndex: 2,C***数 {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitArea: {show: false},splitLine: {show: false},data: monthD},//对应 xAxisIndex: 3,D***数 {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitArea: {show: false},splitLine: {show: false},data: monthD},//对应 xAxisIndex: 4,E***数 {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitArea: {show: false},splitLine: {show: false},data: monthD},//对应 xAxisIndex: 5,F***数 {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitArea: {show: false},splitLine: {show: false},data: monthD}],series: [{name: 'A**数',type: 'bar',barGap: '0',barWidth: '90%',itemStyle: {normal: {color: '#ff735c', label: {show: false, textStyle: {color: '#fff'}}}},data: A},{name: 'B**数',type: 'bar',barGap: '0',barWidth: '75%',xAxisIndex: 2,itemStyle: {normal: {color: '#84c66e',label: {show: false, textStyle: {color: '#27727B'}}}},data: B},{name: 'C**数',type: 'bar',barGap: '0',barWidth: '65%',xAxisIndex: 1,itemStyle: {normal: {color: '#ffce55',label: {show: false, textStyle: {color: '#27727B'}}}},data: C},{name: 'D**数',type: 'bar',barGap: '0',barWidth: '50%',xAxisIndex: 3,itemStyle: {normal: {color: '#22ccdb',label: {show: false, textStyle: {color: '#27727B'}}}},data: D},{name: 'E**数',type: 'bar',barGap: '0',barWidth: '35%',xAxisIndex: 4,itemStyle: {normal: {color: '#009eed',label: {show: false, textStyle: {color: '#27727B'}}}},data: E},{name: 'F**数',type: 'bar',barGap: '0',barWidth: '20%',xAxisIndex: 5,itemStyle: {normal: {color: '#8686ff',label: {show: false, textStyle: {color: '#27727B'}}}},data: F}]
})myChartc.hideLoading(); //隐藏加载动画

切记写demo的时候，对应的data数据这些处理不要大意了。

关于echarts套娃柱状图（嵌套柱）的实现相关推荐

圈叉棋、套娃圈叉棋、嵌套圈叉棋、九个井字棋
目录一,圈叉棋(Tic-Tac-Toe) 二,套娃圈叉棋 1,规则 2,解空间分析 1,节点 2,解空间结构 3,复杂度分析 1,总节点数目 2,思路一--关键节点 3,思路二--对称性 4,数据结 ...
论Flutter开发如何改善套娃地狱问题
/ 今日科技快讯 / 近日,滴滴旗下自动驾驶公司宣布与广汽埃安新能源汽车有限公司达成战略合作.滴滴出行董事长兼CEO程维与广汽集团董事长曾庆洪,共同见证签约仪式. / 作者简介 / 本 ...
当你试图将【圣杯布局】无限套娃__
刚学会圣杯布局突发奇想... 先是简单的嵌套限界だ同理可得{ 再用iframe再嵌套自我的克隆体_ 再在克隆体中用iframe嵌套自我的克隆体_ 再再在克隆体的克隆体中用iframe嵌套自我的克 ...
Echars柱状图嵌套居中对齐柱子占比宽度由大到小嵌套包含并用小箭头标记当前产出位置
效果图: <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
BUUCTF [GXYCTF2019] 禁止套娃
题目分析这题对我这个小白来说好难理解,慢慢补坑吧.PHP很多常用的函数都不是很了解,命令执行也是呜呜呜感觉学得还不是很精通. 打开题目,只有如下: 看源码也没有什么东西,常见的信息泄露:robots ...
长安大学第四届ACM-ICPC“迎新杯”程序设计竞赛-重现赛 G - 彩虹岛套娃
题目描述俄罗斯套娃是俄罗斯特产的木制玩具,一般由多个一样图案的空心木娃娃一个套一个组成,最多可达十多个,通常为圆柱形,底部平坦可以直立.颜色有红色,蓝色,绿色,紫色等.最普通的图案是一个穿着俄罗斯民 ...
Flutter 改善套娃地狱问题（仿喜马拉雅PC页面举例）
前言这篇文章是我一直以来很想写的一篇文章,终于下定决心动笔了. 写Flutter的小伙伴可能都感受到了:掘金的一些热门的Flutter文章下,知乎的一些Flutter的话题下或者一些论坛里面,喷Fl ...
套娃成功！在《我的世界》里运行Win95、玩游戏，软件和教程现已公开
晓查发自凹非寺量子位报道 | 公众号 QbitAI <我的世界>(MineCraft)真是一款高自由度的神奇游戏,几乎每隔几天都会有大神用它实现一些奇妙的创意. 最近有一个叫uD ...
github访问不了_用ssh套娃翻到大陆公网给校园内网服务器装R包以及使用GitHub
碎碎念... 某学校的服务器装R包真把我搞吐了! 最近我用的学校某计算服务器平台除了ssh登录,竟然连curl www.baidu.com都给封了,离谱好,既然你给我留ssh还让我用,那我就用ssh ...

关于echarts套娃柱状图（嵌套柱）的实现

关于echarts套娃柱状图（嵌套柱）的实现相关推荐

最新文章

热门文章