大家好，欢迎来到IT知识分享网。
目录
柱状圆角
柱子的顶部是圆角。主要是 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’ 起到的作用。
语义声明位置：
- top
- bottom
- left
- right
- inside
- insideTop
- insideBottom
- insideLeft
- insideRight
- insideTopLeft
- insideTopRight
- insideBottomLeft
- insideBottomRight
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' } }, }] };相对的百分比：
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: { show: true, position: ['10%', '10%'], }, } ] };绝对像素值：
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: { show: true, position: [10, 100], }, } ] };数值为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.dataIndex return 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+yfsxIMBCuQWY4komnD09eRVHMoISc1R9jTH0EahcDhIisM5V6mhmugfz75t35qlgOyJTTxJQ3MCcIo8yhRBIcCmOrmYOPgvAgaYQedbCnXuPUgkhPYsBiBjjNzrGnp1hEUd7CCiTmqIsjtYsmnRllyfSMQTELKa5iQVTxsXcZp6qJJh0gAAwrbjgQWpc4gLTznKxjUSyhgR660Qu8hDLv8w5cCkBEZ4joBU4h0fNWsSjr+IQWsKm2cDQlYQ2AdJKdO2+gIi5hhV6jpXYRAijpHLIzlwXAZAMQ6gBFGziWVxGIG2hIgW21iQ6TFe7JGYhjLmuY187VS7SoYwxr5wU78xaEZ+VhaY2Mc2AEYKi/q10MxRgtHUI5wFDtoGd14qTMpTNeFOHLGupqD23qmBVp58XUzFsWOICxdT5g4AR1EFAJbW2TDvGYBnFSCs5AzIJcRZVGGKtX6AOYsasu2d8lxoafAhDalfPwmOTUtsQi5rXt6DFe8zqSTEIfnphBNdrAG+sgb1fuAMzaZ7FxG40rNaxo5fYOtjefYZOtXrCtZkKjmuh4H+E6fLGrbEBACvjjKFGFHXCMxaAJyB2cvXcOPre/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 colorItem if (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 柱状图
竖向柱状改成横向柱状
xAxis 和 yAxis 的内容互换。
竖向柱状
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', } ] };横向柱状
option = { xAxis: { type: 'value', }, yAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', } ] };免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/141401.html
