echarts实现2d柱状_记录echarts比较难实现的图1（一个背景上呈现三个柱状图）

年底了，都没有啥活安排，正打算摸鱼的时候，领导安排给画一个图，内心哭泣泣(灬ꈍ ꈍ灬)，我对echarts不太熟呀。首先，我打开官网，看看实例，咦，怎么没有这个实例。糟糕，柱子好画但是背景怎么加，度娘回我都是堆叠，实现了一下一条柱子堆叠可以，两条怎么弄，越弄越发现怎么成堆叠图了。默默的转战它的官方文档，没有想法，怎么破，我可以拒绝它么。答案是不可以，还想不想混了，这个时候我同事提出一个解决方法：可以画两个坐标系。

两个坐标系，用到了这个两个属性：coordinateSystem，xAxisIndex ；首先在声明两个xAxis: [{type: 'category'},{type: 'category'}]。于是经过一番实验终于搞出来了，给大家以后参考。下面我贴代码啦贴效果啦。

1 var yMax = 500;

2 var dataShadow =[];

3 for (var i = 0; i <4; i++) {

4 dataShadow.push(yMax);

5 } 6 option ={ 7 legend: {}, 8 tooltip: {}, 9 dataset: { 10 source: [ 11 ['product', '2015', '2016', '2017'], 12 ['Matcha Latte', 43.3, 85.8, 93.7], 13 ['Milk Tea', 83.1, 73.4, 55.1], 14 ['Cheese Cocoa', 86.4, 65.2, 82.5], 15 ['Walnut Brownie', 72.4, 53.9, 39.1] 16 ] 17 }, 18 xAxis: [{type: 'category'},{type: 'category'}], 19 yAxis: {}, 20 // Declare several bar series, each will be mapped 21 // to a column of dataset.source by default. 22 series: [ 23 24 {type: 'bar', 25 coordinateSystem:'cartesian2d', 26 xAxisIndex:0, 27 barWidth:12, 28 }, 29 {type: 'bar', 30 coordinateSystem:'cartesian2d', 31 xAxisIndex:0, 32 barWidth:12 33 }, 34 {type: 'bar', 35 coordinateSystem:'cartesian2d', 36 xAxisIndex:0, 37 barWidth:12 38 }, 39 { // 背景 40 type: 'bar', 41 itemStyle: { 42 normal: {color: 'rgba(0,0,0,0.05)'} 43 }, 44 barGap:'-100%', 45 barCategoryGap:'60%', 46 data: dataShadow, 47 animation: false, 48 coordinateSystem:'cartesian2d', 49 50 xAxisIndex:1 51 } 52 ] 53 };

大功告成，吃饭去啦！转载注明出处哈，可以点赞，留言哈，不足的地方就要手动改柱子宽！

echarts实现2d柱状_记录echarts比较难实现的图1（一个背景上呈现三个柱状图）相关推荐

echarts实现2d柱状_堆叠柱状图
介绍堆叠柱状图是柱状图的扩展,不同的是,柱状图的数据值为并行排列,堆叠柱图则是一个个叠加起来的.它可以展示每一个分类的总量,以及该分类包含的每个小分类的大小及占比,因此非常适合处理部分与整体的关系. ...
echarts实现2d柱状_Echart---多项柱状图-2D/H5
//摘自官方示例: 具体参数配置:https://echarts.baidu.com/option.html#title 多看必有收获! // 柱状图 var dom = document.getEl ...
echarts:饼、柱状、折线图的配置说明
文章目录前言柱状图和折线图主要配置项: 饼图的基本配置项 series 数据项有什么功能组件? 渐进式案例: vue中画一个基本的饼图为它添加提示组件tooltip dataZom,用柱状图演 ...
android 分组柱状图_整理了一个 android 上的波形图及柱状图绘制控件
SimpleWaveform [说明:以前画过波形图,最近又需要画,略不同,但还得重复写.在网上搜了一下,只找到一个复杂的框架,而我们往往只需要画简单的波形或柱状图.所以我整理提取了过去的代码,有了这 ...
echarts 统计图周月切换_用echarts做报表按统计时间数据记录
自己也来整理一下,好记好消化↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑ 按日查询: createtime:数据表里面的时间字段 t_voipchannelrecord :表名 SELECT ...
echarts做企业关系图谱_使用Echarts呈现天善用户的关系图
前一个博客:"<Python网络数据采集>读后总结 --第3章及天善用户关系分析实例"提到了怎么获取天善用户的关系数据,但没有说如何更好呈现关系图,这次介绍一下使用Ec ...
echarts地图文字重叠解决方案_基于Echarts的百度地图叠加arcgis server的WMS图层服务...
前言前阵子利用echarts+百度地图做系统的门户首页,遇到一个要地图上叠加产业城影响范围示意图的需求.查阅文档之后,发现百度地图API确实提供了叠加自定义图层的方法,详情请看: 百度地图API的M ...
在地图上添加柱状_如何做出一份惊艳的PPT地图页？这2个字，你一定要知道！...
这篇文章,咱们就从一个读者私信给我的案例来说,就是这张PPT: 他当时问我的问题是,怎么把这个表格优化的更美观? 坦白讲,这是一个无解的问题,为什么这么说呢? 咱们简单对这个图表分析,就能知道,它其实 ...
移植mysql到安卓手机_记录dbnet文本检测转ncnn并移植到安卓上
目前,文本检测主要分为基于检测网络和分割网络实现,上文(风影:记录densenet-ocr识别网络转ncnn并移植到安卓手机)讲到将yolo3文本检测+densenet识别网络转ncnn推理,并成功移 ...
Echarts柱状纵向横向、圆角、渐变、x轴字体倾斜或垂直显示
1.柱状纵向变横向将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 //纵向xAxis: [{type: 'value'}],yAxis: [{ ...

echarts实现2d柱状_记录echarts比较难实现的图1（一个背景上呈现三个柱状图）

echarts实现2d柱状_记录echarts比较难实现的图1（一个背景上呈现三个柱状图）相关推荐

最新文章

热门文章