【ECharts】柱状图

柱状圆角

label显示在圆柱中

数值为0不展示0

悬浮显示数据线

悬浮柱状渐变色

每个柱的颜色

单个柱的颜色

柱子重叠

柱子堆叠

柱子背景

柱子顶部加入图片效果

仿3D柱状图

柱状圆角

柱子的顶部是圆角。主要是 barBorderRadius: [50, 50, 0, 0]。分别对应的是：左上，右上，右下，左下。

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',itemStyle: {normal: {barBorderRadius: [50, 50, 0, 0], // 左上，右上，右下，左下}}    }]
};

label显示在圆柱中

label显示在柱子中，主要是position: 'inside' 起到的作用。

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',label: { normal: { show: true,position: 'inside' } },}]
};

数值为0不展示0

数据为0的时候展示在坐标轴线上很丑。可以控制为0的值直接展示空字符串' '。

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 0, 150, 80, 0, 110, 130],type: 'bar',label:{normal:{show:true,formatter:function  (params) {if (params.value > 0){return params.value;} else {return ''}}}}}]
};

悬浮显示数据线

option = {grid: {left: '2%',top: '10%',right:0,bottom:'5%',containLabel: true//grid 区域是否包含坐标轴的刻度标签。},tooltip : {trigger: 'axis',// 坐标轴悬浮axisPointer: {type: 'cross',label: {backgroundColor: '#B248CA'}}},xAxis : [{type : 'category',data : ['优秀', '良好', '合格', '未合格', '不及格', '零分'],axisTick: { //坐标轴刻度show:true,alignWithLabel: true//刻度和文字对齐},nameLocation:'start',//坐标轴名称显示位置nameGap:'9',//坐标轴名称与轴线之间的距离。boundaryGap:['1%','4%'],//不从0%开始textStyle:{width:'54'},axisLabel:{interval:0,//文字间没有间隔rotate:'45',formatter : function(params){//五个字一行var newParamsName = "";var paramsNameNumber = params.length;var provideNumber = 5;var rowNumber = Math.ceil(paramsNameNumber / provideNumber);if (paramsNameNumber > provideNumber) {for (var p = 0; p < rowNumber; p++) {var tempStr = "";var start = p * provideNumber;var end = start + provideNumber;if (p == rowNumber - 1) {tempStr = params.substring(start, paramsNameNumber);} else {tempStr = params.substring(start, end) + "\n";}newParamsName += tempStr;// 最终拼成的字符串}} else {newParamsName = params;}return newParamsName},formatter:function(value) { //文字竖直显示return value.split("").join("\n");  } ,formatter : function(params,index){//隔一个换行if (index % 2 != 0) {return '\n\n' + params;}else {return params;}}}}],yAxis : [{type : 'value',axisLabel: {  show: true,  formatter: '{value} %'  }, }],series : [{name:'直接访问',type:'bar',barWidth: '6',barGap:'56',data:[56, '38', '42','65', '99',{//设置个别颜色value:'40',itemStyle:{color:'black',}}],itemStyle:{normal:{barBorderRadius:[7,7,0,0],//圆柱圆角color: function (params){ //不同颜色var colorList = ['#50E9C8','#F03869','#AC91DF','#F3CE30','#31B5EC','#D96C70'];return colorList[params.dataIndex];},color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//渐变色offset: 0,color: '#FAD036'}, {offset: 1,color: '#EF2409'}]),}}}]
}

悬浮柱状渐变色

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#83bff6'},{offset: 0.5,color: '#188df0'},{offset: 1,color: '#188df0'}])},emphasis: { // 鼠标悬浮color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#2378f7'},{offset: 0.5,color: '#83bff6'},{offset: 1,color: '#2378f7'}])}}}]
};

每个柱的颜色

let colors = ['lightgreen','pink','purple','orange','lightblue']
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']},yAxis: {type: 'value'},series: [{color: colors,data: [120, 200, 150, 80, 70],type: 'bar',itemStyle: {normal: {color: function(params) {let idx = params.dataIndexreturn colors[idx]},}},}]
};

单个柱的颜色

方法一：更推荐

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar',itemStyle: {normal: {color:(val) => {if (val.value < 80) {return '#F7782C'} else{return '#5470c6'}},},},}]
};

方法二：

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{type: 'bar',data: [120, 200, 150, 80,{value: 70,itemStyle:{color: '#F7782C'}}, 110, 130],}]
};

柱子重叠

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value'},series: [{data: [20, 120, 130, 60, 80, 100, 100],type: 'bar'},{data: [130, 202, 180, 80, 90, 200, 130],type: 'bar',barGap:'-100%',// 第二个柱子的位置实现重叠z:'-1',//  柱子的层级}]
};

柱子堆叠

let colors = ["#FC4540",new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#00C6FF" },{ offset: 1, color: "#003B87" },]),
];
option = {color: colors,xAxis: {type: "category",data: ['1月','2月','3月','4月','5月','6月'],},yAxis: {type: "value",},series: [{name: "男",data: [1,2,3,4,5,6],type: "bar",stack: "total",barWidth: 36,label: {show: true,position: "outside",color: "#fff",formatter: function (params) {if (params.value > 0) {return params.value;} else {return "";}},},},{name: "女",data: [3,2,1,1,1,1],type: "bar",stack: "total",barWidth: 36,label: {show: true,position: "outside",color: "#00C6FF",formatter: function (params) {if (params.value > 0) {return params.value;} else {return "";}},},},],
};

柱子背景

option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value'},series: [{data: [20, 120, 130, 60, 80, 100, 100],type: 'bar'},{data: [130, 202, 180, 80, 90, 200, 130],type: 'bar',barWidth: '60%', //俩柱之间的距离showBackground: true, //柱状背景backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}}]
};

柱子顶部加入图片效果

let circleList = ['image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFdklEQVRYhY1YTY/bRBh+/BHbiRN7l02bqst+st1dVT0gceXABYk7PfYPwIELv4IfABJ3euuBCxKCKxckBEKi2y1F6Xa3abTZT+fLHxnbaMZje+zE3Y70aiLPzPs888w778xEin/8EO9YJKGbVDEkrvhdWdSKBumGehGJReBVdVZyApsPk/roicSdi4aKb4sUEK38jeLEHIdVRQWOnsgLgORCLWsKzFUDqlmHXEvGRzMCMnEx6XmIgpCDRaU6saMnMTYfRpmMQgzIJdCiNTebqHc6kHUbMYkQBT7ikCReFBWypkNSZUS+A/f0FOOjMSdRtlgglikgypwCK8z0FQPWzgYkpQn/8grT3jFmo0ggjMxhrSWjsWqhcXcP9c4Yo5fH8AYugFDQOSVBx8apAqkzRQBXYd1bhnF7G8HVNZznV4hDhZNWuIkEQm4EkhLC3luGtrwEb9DF8MUV+560R7xmpFXMB1kCYu+1obc3MD7qY9qbAagDqHFTKwhQkBnicIbrgyEaqy6am9uQ5Fdwnp8LfaW0FpcgX3NzvcXARy/6cAchB9e5aZxEqhaEWVGiAQCftU97PuJZH617GzBdH5Njh4/JglKdi3i1XkNzbQuTNwO4A8LBjZJpXAWRAOHgnkBOgjtwoZgD5tM/ewripkHJMFMHuQr2fgehTzB+ORVmTUmYAJoAWgAsAHbJLN7W5H1z1agv6pP6LgZvYRdIkGsKVLOD64Mel1njM6fOGtxxg33rfLwNe3+DjXYOX+H0t64we0nYasnSjLrnWLq/CrnWZ3mDkygSsHdtRLMA/iXhYJqgQELAuvc+9r98BOPWeqbdnU+Ajc+PcfjdDxi+eC2Akywu/MsJ800xrp6epQTkwi5QmzYCZ8yJqYIKCYn6nTYefP1FATwt9Btto31y+TVh16jMN8UQMOWCAnKtgeDaK+SCnISGDx59CrW5PAeeLWhzmfVJ+xe3rMx8yzVTPE+KQSgpOmbD2cKMyBLTzoNK8LQkfcRkJWdKU9+SoolBKJeGS4gjlLZmbkrdupGA0rAqx+e+s1ImEPNVKR+riYX+6EYCoTeqHJ/7XkggRhwGqFk1IYqjQo4fdZ/dSGDUPRTyfij4iZlviiGQSAkkDKPZFJplCMBEyHABuo9/BZlWq0Dbuo9/yfrn4xMi1DfFEC4ossAmBpk4qC01CwdLnts9TE5Ocfjt9wicwRx44CRttE+SkHw+dpaRoL4phoCpZuDURl0HKx9tQVuiW6ac25MMd/l3F79/9Q1WP7uP1vY6l/0YvZ8PEIf07J9yc/nYRAnqU9F1XP/jiAoUCZApAZkO0Npq4+KvMz5YFRJWcuzSdXz90x8A/uTjIz5TnwOnBHIVWlu3mG+KUVoCCCQiOAd9KA0d5pohKJA6pVmSxsCQngAlG/K28ZwC1JfSMJjv/EaEVAFxq0QgLoHbfwlzfQdk2oN/4S3I7W+7D/gF01ckmOsduP3/mO/SJbW4BKkjGguKfgJ7fw3Df9/AO/OEwAxuvBGlshu3FFi7dxFcnjCf+bYsxEB6RUovCSGrr58NYO9FsHY3ob93Aee5w52rhQuHuHzi1rX3bOjtFfjnR/w6Fop3wXRceikt3/9TABX1TgOt7Q12unnnV5icjBB65fhJlkExAHOtBaO9zOQfdV/BPZ1yUlFJgUgkAIFA+V2QkLF2LRjt25BVC2HgI/LpuyCZiaTIkHUdiqYjIkP4F2dcsaiUDefeBSKBRQeIPFerpgJz3YRq1NlDhAlJIhDPxeR4AjKZm2U58BblgfTNFvPnWeHqLMQHQCYSnGd+xeM0fwNWAGbPMv42rHqelx+gVa/lcnnba1gkl5Wq53m587v8NyCOXfR7vgD4H8khvGFl000HAAAAAElFTkSuQmCC','image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFb0lEQVRYhY1YW28bRRT+ZtbrS24mjVu3btPUDoiqFIEQ4gUh8dKX8hf4A/wT+Am88cA7b5GgrxVPFIREL0rapHHbOHGcxM7Fa3u9c9BMZrZn1+umI43W2j2Xb75z5pwZi89/JLznEExMTFGhKb+njtyUD+KCZxaILOfTnvGIAfj3z5/hmjGcnpjyLosBPtPvtB+yfsxIMBCuQWY4komnD09eRVHMoISc1R9jTH0EahcDhIisM5V6mhmugfz75t35qlgOyJTTxJQ3MCcqqIo8yhRBIcQQCmOrmYOPgvAgaYQedbCnXuPUgkhPYsBiBjjNzrGnp1hEUd7CCiTmqIsjtYsmnRllyfSMQTELKa5iQVTxsXcZp6qJJh0gAAwrbjgQWpc4gLTznKxjUSyhgR660Qu8hDLv8w5cCkBEZ4joBU4h0fNWsSjr+IQWsKm2cDQlYQ2AdJKdO2+gIi5hhV6jpXYRAijpHLIzlwXAZAMQ6gBFGziWVxGIG2hIgW21iQ6TFe7JGYhjLmuY187VS7SoYwxr5wU78xaEZ+VhaY2Mc2AEYKi/q10MxRgtHUI5wFDtoGd14qTMpTNeFOHLGupqD23qmBVp58XUzFsWOICxdT5g4AR1EFAJbW2TDvGYBnFSCs5AzIJcRZVGGKtX6AOYsasu2d8lxoafAhDalfPwmOTUtsQi5rXt6DFe8zqSTEIfnphBNdrAG+sgb1fuAMzaZ7FxG40rNaxo5fYOtjefYZOtXrCtZkKjmuh4H+E6fLQQGrbEBACvjjKFGFHXCMxaAJyB2cvXcOPre/h+dgE33SpW7wCffoXmnw/w637LrJBYWExeUBdn2rb2Ea1j3wGQiV0wgzKdmAKSs9PnIOY/QOXb7/ADd+7G3AJu6m9ahoUpz3ZNztieQZn7lJwB4WOGjg2NcS1gIPJffoN7+SIW087d0N+0jJNPbVmpbQvfMCs4A2+TUKKAU0PZREXUhipV3J3m3A0rk2N6MmZa25YGWJyEMqUvSLGkTE0/j4WLAPgFI5Opz2zHIw2AbFDSbfW8k4U4uQhAODIymfrMdiYAgsIIcyZuxDpY5MrsYRtPLwJw2MYzm/1OT8UNSNtWplglWnC8YhqjL+bNvlestrsKN3r0EA/sCqeu/tFD/OHkmb4Bom1rH/yAIhkaQh89MY+5RGN5W9sH3QPsPfwdPwd9tNPOg/75Ny1jC9LQ6oYOhLHdN/0g0Q1jBlQTPe8u6qIMSb2J2m4q3M42Nn/7BT/d/gx3KtXzetDZQ/PZv3hCyvT+vp2B1TVMaJsij0K0HgMwIBIAKMCYBmjLZVSinqlWI9Z0XHmNSGH09B/8BeBvq897QcAAxCzIZVzWtrWPLAAOhFIbaMm7qMgaimrHKPNEdeV1eEE3HHAGtC1RRDH6D+vsRAQHgG8VRQOMqY0tUcOHIsAbOjJG0rX9XeeBIZ9iEULUUFVtPNe2kTqkJkLgDOlckHm8kqtYVlvYoQMDImKrfPeJyNIuluDJOmrUxSttk23LRAjcEckdErSQUM/Rlg0or45bqowDtWkMhLy2pw+lfOvKBsryEpbUIV7a45irC/GJOM2AYB+MoFakE/TlMla8L1CmQxypFk4MuZNVVOn+J6+Z45xuWMNoG09o3yTkGMnjOTJ3AYvn252xj9NoH09lHQtiCVdyVdwifScYYYjIynqmxRSEjwKNcUxdbKkXhjGVqoYqlXMTu4BnO88LqbZwiC10RQmeuI5ZUUAJecvCGIqOEag3OKMgEefM21F6F5hh72xkr2eJozPLD1AAQc9NELIup9x4VkOCu5ZN3A3dC+6MGZt2W06Pd92G3QITY9r1PEHTe/43wHWzfk8OAP8D28XBfaJJ48oAAAAASUVORK5CYII='
]
// 设置每个状图颜色
var colorList = ['#FCD298', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7', '#24FDE7'];
option = {xAxis: {show: false,type: 'value'},yAxis: [{type: 'category',inverse: true,axisLabel: {show: true,textStyle: {color: '#B9E4E6'},},splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']},],backgroundColor: 'rgb(49,69,81)',series: [// 渐变线条{type: 'bar',zlevel: 1,itemStyle: {data: [50, 28, 17, 38, 90],normal: {barBorderRadius: 0,color: function (params) {// 大于等于50%的是黄色 反之为蓝色var colorItemif (params.data >= 50) {colorItem = ['rgba(252, 210, 152, .2)', 'rgba(252, 210, 152, 1)'];} else {colorItem = ['rgba(36, 253, 231, .2)', 'rgba(36, 253, 231, 1)'];}// 设置线条渐变色return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: colorItem[0]},{offset: 1,color: colorItem[1]}], false);}},},barWidth: 4,data:[50, 28, 17, 38, 90]},// 圆点{type: 'pictorialBar',symbol: function (params, value) {// 设置图片if (params >= 50) return circleList[0]return circleList[1]},symbolPosition: 'end',symbolSize: [30, 30],symbolOffset: [10, 0],z: 20,data: [50, 28, 17, 38, 90]}]
};

参考：Vue中Echarts柱状图如何自定义顶部亮点

仿3D柱状图

var data1 = [200, 100, 200, 50, 100];
var data2 = [300, 200, 300, 200, 400];
option = {backgroundColor: 'rgb(49,69,81)',xAxis: {data: ['北京', '上海', '深圳', '广州', '杭州'],splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},axisLabel: {show: false,}},yAxis: {splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},axisLabel: {show: false,}},series: [// 底部的光晕{name: '',type: 'pictorialBar',tooltip: {show: false},symbolSize: [90, 40],symbolOffset: [0, 20],z: 1,itemStyle: {normal: {color: 'transparent',borderColor: '#26B2E8',borderType: 'solid',borderWidth: 4}},data: [1, 1, 1, 1, 1]},// 底部圆片{name: '',type: 'pictorialBar',symbolSize: [45, 25],symbolOffset: [0, 10],z: 12,itemStyle: {opacity: 1,color: '#FFD56E'},data: [0, 0, 0, 0, 0]},{name: '2022',type: 'bar',barWidth: 45,barGap: '-100%',itemStyle: {color: function (params) {var a = params.name.slice(0, 2);return new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: '#FF9A22' // 0% 处的颜色},{offset: 1,color: '#FFD56E' // 100% 处的颜色}],false);}},data: data1},// 顶部圆片{name: '',type: 'pictorialBar',symbolSize: [45, 25],symbolOffset: [0, -10],z: 12,itemStyle: {opacity: 1,color: '#f00'},symbolPosition: 'end',data: data1},]
};

参考链接：echarts 3D 柱状图

【ECharts】柱状图相关推荐

解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
前端vue显示柱状图_Vue—Echarts 柱状图
使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例. ee05abaf9633184a9c012631b642d970.png ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
Echarts 柱状图调整 y 轴单位标题与图表之间的距离
Echarts 柱状图调整 y 轴单位标题与图表之间的距离在我们绘制图标的时候,有时 y 轴单位标题的位置距离图标太近,影响美观,如图所示: 我们想把元离图表远一些,怎么操作? option = ...
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记展示效果如下(主要记录一下如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
echarts 柱状图渐变色背景
如何制作柱状图渐变色背景,我们可以先参考 echarts 柱状图颜色设置.接下来我们来实战一下,看看这次的效果图吧. 首先我们可以看到,X 轴表示数据,Y轴表示类别.柱状图上有该地区的数量,同时柱状图 ...
点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...
echarts柱状图
echarts柱状图图表实例 option = {xAxis: {name: '横坐标',type: 'category', // 设置为类目轴data: ['Mon', 'Tue', 'Wed', ...
echarts柱状图的样式调整及应用
一.在项目中引进echarts echarts官网:快速上手 - Handbook - Apache ECharts,点击左侧导航栏的"入门篇"中的"在项目中引入 Apa ...
echarts柱状图自定义显示内容
echarts柱状图自定义显示内容基础搭建基础搭建 1.引入js <script src="js/echarts.min.js"></script> 2 ...

【ECharts】柱状图

柱状圆角

label显示在圆柱中

数值为0不展示0

悬浮显示数据线

悬浮柱状渐变色

每个柱的颜色

单个柱的颜色

柱子重叠

柱子堆叠

柱子背景

柱子顶部加入图片效果

仿3D柱状图

【ECharts】柱状图相关推荐

最新文章

热门文章