echarts柱图分组显示(簇状柱形图)

需求：设计echarts柱图，相同类型数据放在一起，使用不同背景色分割

所用属性：yAxis/xAxis.splitArea

splitArea：坐标轴在 grid 区域中的分隔区域

思路：其实我这个很简单，就是在拿到数据后进行个处理，将相同类型的数据相邻排放，然后在渲染的时候，给每个柱图背景色，这样的话，同类型的柱子背景色一样，就形成了区域分组效果

代码如下
//x轴数据
var _xAxis = ['红1', '红2','绿1','绿2','黄1','黄2','橘1','橘2'];
//y轴数据
var _yAxis = [10, 52,10,13,32,14,3,23];
option = {title: {text: '分组柱图',textStyle:{color:"#666666",fontSize: 16,fontWeight:"normal"},top:"8",left:"17"},color: ['#297E3A'],grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis : [{type : 'category',data : _xAxis,splitArea: {show: true,//柱图背景色，由于数据已经处理，所以可以直接设置背景色，在项目中，可以使用循环方法根据条件往颜色数组去push颜色areaStyle: {color: ['#f00','#f00','#0f0','#0f0','#ff0','#ff0','#f66','#f66']}}}],yAxis : [{type : 'value'}],series : [{name:'柱子',type:'bar',barWidth: '50%',data: _yAxis,itemStyle: {normal: {label: {show: true,//是否展示textStyle: {fontWeight:'bolder',fontSize : '12',fontFamily : '微软雅黑',}}}},label: {normal: {show: true,color: '#000000',position: 'top'}}}]
};

echarts柱图分组显示(簇状柱形图)相关推荐

echarts 柱图分组统计
统计按单位统计每个单位下子系统的信息 html <div id="chart" style="height: 100%;"></div> ...
水平圆柱体计算机表格,《excel表格中数据用簇状柱图形表示》 excel怎么做簇状柱形图...
excel怎么做簇状柱形图 1.首先在电脑上打开Excel软件下来在Excel建一个文档表格. 2.接下来在表格中输入需要处理的数据下为例演示,然后将这些数据全部选中. 3.接下来在上方工具栏中选择& ...
计算机电子表格三维簇状柱形图怎么设置,Excel中怎么制作柱形对比图【excel表格数据生成柱形图】...
怎么创建Excel簇状柱形图并设置图表的格第一步:插入---图表----选择"簇状柱形图" 在图表区域右击---选择数据-----点击" "号-----选择系 ...
excel表格计算机簇状图,excel表格怎么绘制簇状柱形图
在excel表格中,为了让数据更加明晰通常会使用簇状柱形图,这种图表应该怎么绘制呢?下面随学习啦小编一起来看看吧. excel表格绘制簇状柱形图的步骤用excel简单制作可视化图表,首先我们需要添加 ...
Power Bi簇状柱形图显示数值和同比增幅的直观操作
欢迎大家和我交流power bi .数据分析心得. 在power bi 中如果要同事显示数值和同比增幅,可以用"折线和簇状柱形图",这样图表上既有柱子也有折线,但是看着总感觉冗余, ...
python簇状柱形图_Python：matplotlib 和 Seaborn 之簇状柱形图、分面 (三十五)
簇状柱形图为了描绘两个分类变量之间的关系,我们可以将在上节课见到的单变量条形图扩展为簇状柱形图.和标准条形图一样,我们依然需要描绘每组的数据点计数,但是每组现在是两个变量的标签组合.因此我们需要按照 ...
matlab画簇状堆积柱状图怎么调颜色,簇状柱形图实用技巧——“超额”的完美展示与设置！...
原标题:簇状柱形图实用技巧--"超额"的完美展示与设置! 簇状柱形图,也是Excel图表中常见的图表,但是如何有效的使用簇状柱形图,或者利用簇状柱形图形象直观的显示数据,一直是很多 ...
Matplotlib绘制堆积柱形图和簇状柱形图：学生成绩的简单可视化
堆积柱形图首先,导入包. import numpy as np import pandas as pd import matplotlib.pyplot as plt 导入数据并查看. data= ...
python簇状柱形图_python学习之路--可视化利器matplotlib（上）
前几期已经把读写数据.数据预处理等介绍完了,今天我们接着介绍一个可视化的库matplotlib,虽说现在已经有了更为高级的可视化库,如seaborn,ploty,pyecharts等,但是matplo ...

echarts柱图分组显示(簇状柱形图)

需求：设计echarts柱图，相同类型数据放在一起，使用不同背景色分割

所用属性：yAxis/xAxis.splitArea

splitArea：坐标轴在 grid 区域中的分隔区域

思路：其实我这个很简单，就是在拿到数据后进行个处理，将相同类型的数据相邻排放，然后在渲染的时候，给每个柱图背景色，这样的话，同类型的柱子背景色一样，就形成了区域分组效果

代码如下

echarts柱图分组显示(簇状柱形图)相关推荐

最新文章

热门文章