echart 柱状图 ---- 坐标轴、网格、柱体配置

代码如下：

var maintainTypeChart;
function loadMaintainTypeChart() {var option = {grid: {left: '3%',right: '3%',bottom: '15%',top: '5%',containLabel: true},xAxis: {type: 'category',axisTick: {show: false//隐藏x坐标轴刻度},//x轴字体样式axisLabel: {show: true,textStyle: {color: '#42436A',fontSize:'12',},rotate:"30" //字体倾斜角度},//x轴颜色axisLine: {lineStyle: {color: "#e4e4e4",}},data: ['wifi', '视频', '车辆', '人脸', '小电']},yAxis: {type: 'value',minInterval: 1,//只显示整数axisLine: {show: false//隐藏y坐标轴},//y轴字体样式axisLabel: {show: true,textStyle: {color: '#9495ab',fontSize:'12'}},//网格样式splitLine: {show: true,lineStyle:{color: '#e4e4e4',width: 1,type: 'solid'}},axisTick: {show: false//隐藏y坐标轴刻度}},tooltip: {trigger: 'axis',axisPointer : {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'},formatter: "{a} {b} : {c}"},series: [{name: '',type: 'bar',barWidth : 6,//柱体宽度itemStyle: {normal: {//柱体圆角barBorderRadius:[10, 10, 0, 0],//柱体颜色渐变color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#6A88FF'}, {offset: 1,color: '#3787FF'}]),}},data: [5, 5, 5, 5, 5]},{name: '',type: 'bar',barWidth : 6,//柱体宽度itemStyle: {normal: {//柱体圆角barBorderRadius:[10, 10, 0, 0],//柱体颜色渐变color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FFCA41'}, {offset: 1,color: '#FBAD54'}]),}},data: [3, 3, 3, 2, 2]}]};maintainTypeChart = echarts.init(document.getElementById('maintain-type-chart'));maintainTypeChart.setOption(option);
}
loadMaintainTypeChart();

效果图：

echart 柱状图 ---- 坐标轴、网格、柱体配置相关推荐

echart柱状图Y轴最小间隔问题,Y轴不显示小数
今天来说说echart 柱状图 Y轴的最小值.间隔问题. 最近项目中用到柱状图,数据量少的时候,Y轴会出现小数,但是我们产品小哥哥说不能出现小数,好了,那就开干! option = {xAxis: { ...
echart柱状图偏移位置设置
echart柱状图因为有title和信息的问题,导致顶部显得空间很大得不到有效利用如图 echart配置项中有grid属性,里面可以配置图表的偏移位置,通过调整可以充分利用空间 var option ...
R语言ggplot2可视化柱状图并自定义柱体的宽度（通过变量指定条形的宽度）实战、条形图并自定义条形的宽度实战
R语言ggplot2可视化柱状图并自定义柱体的宽度(通过变量指定条形的宽度)实战.条形图并自定义条形的宽度实战目录
echart 柱状图横坐标文字过长，如何旋转
echart 柱状图横坐标文字过长,如何旋转有时候,在用柱状图表的时候,如果横坐标文字过长,某些文字就会消失不显示,我们可以将其旋转一下,调整到合适的角度,就能正常显示横坐标文字了. 比如下面这样, ...
echart异步刷新图表，详细配置注释
echarts刷新技巧: echartData.chear(); //当异步改变数据时,配合echartData .setOption(option)才会有动画效果 echartData.resize ...
echart柱状图堆叠总计显示
本文主要记录一下使用echart的柱状图堆叠时,需要在柱状图顶部显示总计数值的问题.参考一篇文章的实现,它的实现方式是替换最后一列的formater属性来达到实现总计的方式.我的实现方式是使用再堆叠一 ...
echart柱状图、电池图、3D柱图、3D圆柱图
电池图 let backgroundColor = 'rgba(0,0,0,1)'; let chartdata = [[111, 222, 333, 444],['石油', '煤矿', '汽油', ...
echarts柱状图多组数据配置
一共三组数据 var map4_data1=[320, 332, 301, 334, 390,360,320, 332, 301, 334, 390,360]; var map4_data2=[220 ...
网格环境配置(三):安装SGE
安装 SGE 开始安装 SGE. vm1作为 sge的 master主机.用户账号和系统服务这些信息都通过 NIS服务器来统一管理. master主机和执行机通过 NFS服务共享 $SGE_ROOT. ...

echart 柱状图 ---- 坐标轴、网格、柱体配置

echart 柱状图 ---- 坐标轴、网格、柱体配置相关推荐

最新文章

热门文章