Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图
发表于：2026-11-01 作者：千家信息网编辑
千家信息网最后更新 2026年11月01日，这篇文章主要为大家展示了"Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"Vue echar
千家信息网最后更新 2026年11月01日Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图
这篇文章主要为大家展示了"Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图"这篇文章吧。
电池图
let backgroundColor = 'rgba(0,0,0,1)';let chartdata = [ [111, 222, 333, 444], ['石油', '煤矿', '汽油', '电力'],];var getmydmc = chartdata[1]; //数据点名称var getmyd = chartdata[0]; //收入金额var getmydzd = [];let big = 0;getmyd.forEach((el) => { if (!(el === undefined || el === '')) { if (big < Number(el)) { big = Number(el); } }});for (let i = 0; i < getmyd.length; i++) { getmydzd.push(big * 4);}//计算最大值function calMax(arr) { let max = 0; arr.forEach((el) => { el.forEach((el1) => { if (!(el1 === undefined || el1 === '')) { if (max < Number(el1)) { max = Number(el1); } } }); }); let maxint = Math.ceil(max / 9.5); //不让最高的值超过最上面的刻度 let maxval = maxint * 10; //让显示的刻度是整数 return maxval;}var max = Math.ceil(calMax([getmyd]) / 10) * 10;option = { backgroundColor: backgroundColor, grid: { left: '3%', right: '13%', bottom: '10%', top: '10%', containLabel: true, }, tooltip: { formatter: (params) => { if (params.name !== '') { return params.name+ ' : ' + getmyd[params.dataIndex]; } }, textStyle: { align: 'left', }, }, xAxis: [ { type: 'value', axisLabel: { margin: 5, color: '#fff', formatter: function (val) { return val + ''; }, textStyle: { fontSize: '13', }, }, min: 0, max: max, // 计算最大值 interval: max / 5, // 平均分为5份 splitNumber: 5, splitLine: { show: false, lineStyle: { color: '#fff', }, }, axisLine: { show: true, lineStyle: { color: '#fff', width: 1, opacity: 0.3, }, }, axisTick: { show: false, }, }, { type: 'value', axisLabel: { show: false, }, min: 0, max: max, // 计算最大值 interval: max / 10, // 平均分为5份 splitNumber: 10, splitLine: { show: false, lineStyle: { type: 'dashed', color: '#D8D8D8', }, }, axisLine: { show: false, lineStyle: { color: '#fff', }, }, axisTick: { show: false, }, }, ], yAxis: [ { type: 'category', inverse: true, // boundaryGap:true, axisLabel: { formatter: (value, index) => { if (value.length >= 12) { value = value.slice(0, 12) + `\n` + value.slice(12); } if (value.length >= 26) { value = value.slice(0, 26) + `\n` + value.slice(26); } return value; }, textStyle: { color: 'rgba(255,255,255,0.8)', fontSize: '12', align: 'right', lineHeight: 18, }, }, splitLine: { show: false, }, axisTick: { show: false, }, axisLine: { lineStyle: { color: '#fff', width: 1, opacity: 0.3, }, }, data: getmydmc, }, ], dataZoom: [ { type: 'inside', show: true, height: 15, start: 1, end: 100, orient: 'vertical', zlevel: 66, }, ], series: [ { name: '值', type: 'bar', // zlevel: 1, xAxisIndex: 0, itemStyle: { normal: { // barBorderRadius: [0, 5, 5, 0], color: { colorStops: [ { offset: 0, color: '#40cbe8', // 0% 处的颜色 }, { offset: 1, color: '#3afbc2', // 100% 处的颜色 }, ], }, }, }, barWidth: 15, data: getmyd, z: 0, }, { // 分隔 type: 'pictorialBar', itemStyle: { normal: { color: '#022539', }, }, symbolRepeat: 'fixed', symbolMargin: 4, symbol: 'rect', symbolClip: true, symbolSize: [2, 15], symbolPosition: 'start', symbolOffset: [-1, 0], data: getmydzd, z: 66, animationEasing: 'elasticOut', }, { name: '背景', type: 'bar', barWidth: 15, barGap: '-100%', xAxisIndex: 1, data: getmydzd, itemStyle: { normal: { color: { colorStops: [ { offset: 0, color: 'rgba(24,144,255,0.3)', // 0% 处的颜色 }, { offset: 1, color: 'rgba(99,180,255,0.3)', // 100% 处的颜色 }, ], }, }, }, z: 0, }, { // 外边框 type: 'pictorialBar', symbol: 'rect', itemStyle: { normal: { color: 'none', }, }, label: { normal: { formatter: (params) => { var text; if (params.dataIndex == 1) { text = '{f| ' + params.data + '}'; } else if (params.dataIndex == 2) { text = '{f| ' + params.data + '}'; } else if (params.dataIndex == 3) { text = '{f| ' + params.data + '}'; } else { text = '{f| ' + params.data + '}'; } return text; }, rich: { f: { color: '#ccfff4', fontSize: '22', }, }, position: 'right', padding: [0, 0, 0, -10], show: true, }, }, data: getmyd, z: 77, animationEasing: 'elasticOut', }, ],};3D柱状图+3个柱图+图例不能点击
// mock数据const dataArr = { xdata: ['01.01', '01.02', '01.03', '01.04', '01.05', '01.06', '01.07'], vaccination: [1000, 1300, 1200, 800, 600, 700, 900], unvaccinated: [700, 800, 900, 500, 300, 400, 500], unvaccinatedTwo: [400, 300, 500, 200, 100, 100, 300], rateDataOne: [98, 96, 97, 92, 94, 95, 100], rateDataTwo: [88, 86, 87, 82, 84, 85, 95],}// tooltipconst tooltip = { trigger: "axis", textStyle: { fontSize: '100%' }, formatter: params => { let rander = params.map(item => item.seriesType !== "pictorialBar" ? `${item.seriesName}: ${item.seriesType !== "line" ? item.value : item.value + "%"}` : '').join('') return ` ${params[0].axisValue} ${rander} ` }}const legend = { data: ['应接种', '已完成第一次接种', '已完成第二次接种', '完成第一次接种率', '完成第二次接种率'], textStyle: { fontSize: 14, color: '#fff'}, itemWidth: 25, itemHeight: 15, itemGap: 15, bottom: '5%', selectedMode: false}const grid = { top: '18%', left: '10%', right: '6%', bottom: '25%'}// xAxisconst xAxis = { axisTick: { show: true }, axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } }, axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, }, data: dataArr.xdata}// yAxisconst yAxis = [{ axisTick: { show: false }, axisLine: { show: false, }, splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } }, axisLabel: { textStyle: { fontSize: 16, color: '#fff' } }},{ show: true, max: 100, splitLine: { show:false }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { fontSize: 16, color: '#fff' }, formatter: params => { return `${params}%` } }}]// seriesconst series = [{ z: 1, name: '上部1', type: 'pictorialBar', symbolPosition: 'end', data: dataArr.vaccination, symbol : 'diamond', symbolOffset: ['-50%', '-50%'], symbolSize: [29, 19], itemStyle: { borderColor: '#2fffa4', color: '#2fffa4' },},{ z: 1, type: 'bar', name: '应接种', barWidth: 30, barGap: '-50%', data: dataArr.vaccination, itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [ { offset: 0, color: 'rgba(29, 245, 160, .7)' }, { offset: 0.5, color: 'rgba(29, 245, 160, .7)' }, { offset: 0.5, color: 'rgba(29, 245, 160, .3)' }, { offset: 1, color: 'rgba(29, 245, 160, .3)' } ] } },},{ z: 2, name: '上部1', type: 'pictorialBar', symbolPosition: 'end', data: dataArr.unvaccinated, symbol : 'diamond', symbolOffset: [0, '-50%'], symbolSize: [29, 19], itemStyle: { borderColor: '#32ffee', color: '#32ffee' },},{ z: 2, type: 'bar', name: '已完成第一次接种', barWidth: 30, data: dataArr.unvaccinated, itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [ { offset: 0, color: 'rgba(50, 255, 238, .7)' }, { offset: 0.5, color: 'rgba(50, 255, 238, .7)' }, { offset: 0.5, color: 'rgba(50, 255, 238, .3)' }, { offset: 1, color: 'rgba(50, 255, 238, .3)' } ] } },}, { z: 3, name: '上部1', type: 'pictorialBar', symbolPosition: 'end', data: dataArr.unvaccinatedTwo, symbol : 'diamond', symbolOffset: ['50%', '-50%'], symbolSize: [29, 19], itemStyle: { borderColor: '#ffd11a', color: '#ffd11a' },},{ z: 3, type: 'bar', name: '已完成第二次接种', barWidth: 30, data: dataArr.unvaccinatedTwo, itemStyle: { color: { type: 'linear', x: 0, x2: 1, y: 0, y2: 0, colorStops: [ { offset: 0, color: 'rgba(255, 209, 26, .7)' }, { offset: 0.5, color: 'rgba(255, 209, 26, .7)' }, { offset: 0.5, color: 'rgba(255, 209, 26, .3)' }, { offset: 1, color: 'rgba(255, 209, 26, .3)' } ] } },}, { z: 9, yAxisIndex: 1, name: '完成第一次接种率', type: 'line', symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`, symbolSize: [10, 10], color: { type: 'linear',x: 1, y: 0, x2: 0, y2: 0, // 0% 处的颜色 // 100% 处的颜色 colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5'}], global: false // 缺省为 false }, lineStyle: { color: { type: 'linear',x: 1, y: 0, x2: 0, y2: 0, // 0% 处的颜色 // 100% 处的颜色 colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5'}], global: false // 缺省为 false }}, // 修改的是线下区域的颜色 areaStyle: { color: new echarts.graphic.LinearGradient( // 右/下/左/上 0, 0, 0, 1,[ { offset: 0, color: 'rgba(50, 255, 238, .1)' }, { offset: 1, color: 'transparent' } ]) }, label: { show: true, position: 'insideBottomLeft', formatter: params => { return `${params.value}%` }, textStyle: { fontSize: 16, color: '#32ffee' } }, data: dataArr.rateDataOne}, { z: 9, yAxisIndex: 1, name: '完成第二次接种率', type: 'line', symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`, symbolSize: [10, 10], color: { type: 'linear',x: 1, y: 0, x2: 0, y2: 0, // 0% 处的颜色 // 100% 处的颜色 colorStops: [{ offset: 0, color: '#ffd11a' }, { offset: 1, color: '#fff5cc'}], global: false // 缺省为 false }, lineStyle: { color: { type: 'linear',x: 1, y: 0, x2: 0, y2: 0, // 0% 处的颜色 // 100% 处的颜色 colorStops: [{ offset: 0, color: '#ffd11a' }, { offset: 1, color: '#fff5cc'}], global: false // 缺省为 false }}, // 修改的是线下区域的颜色 areaStyle: { color: new echarts.graphic.LinearGradient( // 右/下/左/上 0, 0, 0, 1,[ { offset: 0, color: 'rgba(255, 209, 26, .2)' }, { offset: 1, color: 'transparent' } ]) }, label: { show: true, position: 'insideBottomRight', formatter: params => { return `${params.value}%` }, textStyle: { fontSize: 16, color: '#ffd11a' } }, data: dataArr.rateDataTwo}]option = { tooltip, xAxis, yAxis, series, grid, legend, backgroundColor: 'rgba(0, 0, 0, .7)' }3D圆筒柱状图
xData = ["正常设备", "报警设备", "离线设备", "故障设备"];yData = [14350, 298, 5037, 239];option = { backgroundColor: '#061326', "grid": { "top": "25%", "left": "-5%", "bottom": "5%", "right": "5%", "containLabel": true }, tooltip: { show: true }, animation: false, "xAxis": [{ "type": "category", "data": xData, "axisTick": { "alignWithLabel": true }, "nameTextStyle": { "color": "#82b0ec" }, "axisLine": { show: false, "lineStyle": { "color": "#82b0ec" } }, "axisLabel": { "textStyle": { "color": "#fff" }, margin: 30 } }], "yAxis": [{ show: false, "type": "value", "axisLabel": { "textStyle": { "color": "#fff" }, }, "splitLine": { "lineStyle": { "color": "#0c2c5a" } }, "axisLine": { "show": false } }], "series": [{ "name": "", type: 'pictorialBar', symbolSize: [40, 10], symbolOffset: [0, -6], symbolPosition: 'end', z: 12, // "barWidth": "0", "label": { "normal": { "show": true, "position": "top", // "formatter": "{c}%" fontSize: 15, fontWeight: 'bold', color: '#34DCFF' } }, color: "#2DB1EF", data: yData }, { name: '', type: 'pictorialBar', symbolSize: [40, 10], symbolOffset: [0, 7], // "barWidth": "20", z: 12, "color": "#2DB1EF", "data": yData }, { name: '', type: 'pictorialBar', symbolSize: [50, 15], symbolOffset: [0, 12], z: 10, itemStyle: { normal: { color: 'transparent', borderColor: '#2EA9E5', borderType: 'solid', borderWidth: 1 } }, data: yData }, { name: '', type: 'pictorialBar', symbolSize: [70, 20], symbolOffset: [0, 18], z: 10, itemStyle: { normal: { color: 'transparent', borderColor: '#19465D', borderType: 'solid', borderWidth: 2 } }, data: yData }, { type: 'bar', //silent: true, "barWidth": "40", barGap: '10%', // Make series be overlap barCateGoryGap: '10%', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{ offset: 0, color: "#38B2E6" }, { offset: 1, color: "#0B3147" } ]), opacity: .8 }, }, data: yData } ]};3D圆筒柱状图+背景
var xData2 = ["容城谷庄","雄县七间房","安新三台","雄县张岗","安新寨里"];var data1 = [200,100,200,200,100];var data2 = [300,200,300,300,400];option = { backgroundColor: '#021132', tooltip: { trigger: 'item', }, grid:{ left:100, bottom:100 }, xAxis: { data: xData2, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { interval:0, textStyle: { color: '#fff', fontSize:20, }, margin: 20, //刻度标签与轴线之间的距离。 }, }, yAxis: { splitLine: { show: false, }, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { textStyle: { color: '#fff', fontSize:20, }, } }, series: [ {//三个最低下的圆片 "name": "", "type": "pictorialBar", "symbolSize": [45, 25], "symbolOffset": [0, 10], "z": 12, itemStyle:{ opacity:1, color: function(params){ var a = params.name.slice(0,2); if(a === '容城'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FF9A22' // 0% 处的颜色 }, { offset: 1, color: '#FFD56E'// 100% 处的颜色 }], false) }else if(a === '雄县' || a === '雄州'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00EC28' // 0% 处的颜色 }, { offset: 1, color: '#5DF076'// 100% 处的颜色 }], false) }else if(a === '安新'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#12B9DB' // 0% 处的颜色 }, { offset: 1, color: '#6F8EF2'// 100% 处的颜色 }], false) } } }, "data": [1,1,1,1,1] }, //下半截柱状图 { name: '2020', type: 'bar', barWidth: 45, barGap: '-100%', itemStyle: {//lenged文本 opacity:.7, color: function(params){ var a = params.name.slice(0,2); if(a === '容城'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FF9A22' // 0% 处的颜色 }, { offset: 1, color: '#FFD56E'// 100% 处的颜色 }], false) }else if(a === '雄县' || a === '雄州'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00EC28' // 0% 处的颜色 }, { offset: 1, color: '#5DF076'// 100% 处的颜色 }], false) }else if(a === '安新'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#12B9DB' // 0% 处的颜色 }, { offset: 1, color: '#6F8EF2'// 100% 处的颜色 }], false) } } }, data: data1 }, { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20 type: 'bar', barWidth: 45, barGap: '-100%', stack: '广告', itemStyle: { color: 'transparent' }, data: data1 }, { "name": "", //头部 "type": "pictorialBar", "symbolSize": [45, 25], "symbolOffset": [0, -10], "z": 12, "symbolPosition": "end", itemStyle:{ color:'#163F7A', opacity:1, }, "data": data2 }, { "name": "", "type": "pictorialBar", "symbolSize": [45, 25], "symbolOffset": [0, -10], "z": 12, itemStyle:{ opacity:1, color: function(params){ var a = params.name.slice(0,2); if(a === '容城'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FF9A22' // 0% 处的颜色 }, { offset: 1, color: '#FFD56E'// 100% 处的颜色 }], false) }else if(a === '雄县' || a === '雄州'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00EC28' // 0% 处的颜色 }, { offset: 1, color: '#5DF076'// 100% 处的颜色 }], false) }else if(a === '安新'){ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#12B9DB' // 0% 处的颜色 }, { offset: 1, color: '#6F8EF2'// 100% 处的颜色 }], false) } } }, "symbolPosition": "end", "data": data1 }, { name: '2019', type: 'bar', barWidth: 45, barGap: '-100%', z:0, itemStyle: { color: '#163F7A', opacity:.7, }, data: data2 } ]};电池图
var category= [{ name: "血糖偏高", value: 2500 }, { name: "血糖偏低", value: 8000 }, { name: "血压偏高", value: 3000 }, { name: "血压偏低", value: 3000 }, { name: "当日新增", value: 3000 }]; // 类别var datas = [];category.forEach(value => { datas.push(value.value);});option = { backgroundColor:'#333', xAxis: { splitLine: { show: false }, axisLine: { show: false }, axisLabel: { show: false }, axisTick: { show: false } }, grid: { left: 80, top: 20, // 设置条形图的边距 right: 80, bottom: 20 }, yAxis: [{ type: "category", inverse: false, data: category, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } }], series: [{ // 内 type: "bar", barWidth: 18, legendHoverLink: false, silent: true, itemStyle: { normal: { barBorderRadius:[4,4,4,4], color: function(params) { var color; if(params.dataIndex==19){ color = { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#66b1ff" // 0% 处的颜色 }, { offset: 1, color: "#409eff" // 100% 处的颜色 } ] } }else if(params.dataIndex==18){ color = { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#66b1ff" // 0% 处的颜色 }, { offset: 1, color: "#409eff" // 100% 处的颜色 } ] } }else if(params.dataIndex==17){ color = { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#66b1ff" // 0% 处的颜色 }, { offset: 1, color: "#409eff" // 100% 处的颜色 } ] } }else{ color = { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#66b1ff" // 0% 处的颜色 }, { offset: 1, color: "#409eff" // 100% 处的颜色 } ] } } return color; }, } }, label: { normal: { show: true, position: "left", formatter: "{b}", textStyle: { color: "#fff", fontSize: 14 } } }, data: category, z: 1, animationEasing: "elasticOut" }, { // 分隔 type: "pictorialBar", itemStyle: { normal:{ color:"#333" } }, symbolRepeat: "fixed", symbolMargin: 6, symbol: "rect", symbolClip: true, symbolSize: [2, 21], symbolPosition: "start", symbolOffset: [1, -1], data: category, z: 2, animationEasing: "elasticOut" }, { // 外边框 type: "pictorialBar", symbol: "rect", itemStyle: { normal: { color: "none" } }, label: { normal: { formatter: (params) => { var text; if(params.dataIndex==1){ text = '{f| '+params.data+'}'; }else if(params.dataIndex==2){ text = '{f| '+params.data+'}'; }else if(params.dataIndex==3){ text = '{f| '+params.data+'}'; }else{ text = '{f| '+params.data+'}'; } return text; }, rich:{ f:{ color:"#ffffff" } }, position: 'right', show: true } }, data: datas, z: 0, animationEasing: "elasticOut" } ]};自动播放+底部可拖拽
var option = { title: { text: '门禁告警数量', textStyle: { fontSize: 25, fontWeight: 'normal', color: '#fff', }, x: 'center' }, backgroundColor:'#323a5e', tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '2%', right: '4%', bottom: '14%', top:'16%', containLabel: true }, legend: { data: ['门禁常开告警', '门禁离线告警'], right: 10, top:12, textStyle: { color: "#fff" }, itemWidth: 12, itemHeight: 10, // itemGap: 35 }, xAxis: { type: 'category', data: ['万城社区','花溪社区','人民社区','齿轮厂家属社区','融创社区','元琦林居社区','花城社区','杨中村'], axisLine: { lineStyle: { color: 'white' } }, axisLabel: { // interval: 0, // rotate: 40, textStyle: { fontFamily: 'Microsoft YaHei' } }, }, yAxis: { type: 'value', max:'150', axisLine: { show: false, lineStyle: { color: 'white' } }, splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.3)' } }, axisLabel: {} }, "dataZoom": [{ "show": true, "height": 12, "xAxisIndex": [ 0 ], bottom:'8%', "start": 10, "end": 90, handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h69.8c2.2,0,4,1.8,4,4V413z', handleSize: '110%', handleStyle:{ color:"#d3dee5", }, textStyle:{ color:"#fff"}, borderColor:"#90979c" }, { "type": "inside", "show": true, "height": 15, "start": 1, "end": 35 }], series: [{ name: '门禁常开告警', type: 'bar', barWidth: '15%', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#fccb05' }, { offset: 1, color: '#f5804d' }]), barBorderRadius: 12, }, }, data: [10, 30, 40, 120, 50, 90, 60, 40, 15] }, { name: '门禁离线告警', type: 'bar', barWidth: '15%', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#8bd46e' }, { offset: 1, color: '#09bcb7' }]), barBorderRadius: 11, } }, data: [5, 40, 60, 110, 40, 100, 70, 50 ,20] }] }; var app = { currentIndex: -1, }; setInterval(function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: app.currentIndex }); app.currentIndex = (app.currentIndex + 1) % dataLen; //console.log(app.currentIndex); // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: app.currentIndex, }); // 显示 tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: app.currentIndex }); }, 1000);比电池图好看一点的进度条
let backgroundColor = 'rgba(0,0,0,1)';let chartData = [ [0,20,333, 0], ['AAA', 'BBB', 'CCC', 'DDD'],];let getmydmc = chartData[1]; //数据点名称let getmyd = chartData[0]; //收入金额let getmydzd = [];let big = 0;getmyd.forEach((el) => { if (!(el === undefined || el === '' || el === 0)) { if (big < Number(el)) { big = Number(el); } } else { big = 100; }});for (let i = 0; i < getmyd.length; i++) { getmydzd.push(big * 4);}//计算最大值function calMax(arr) { let max = 0; arr.forEach((el) => { el.forEach((el1) => { if (!(el1 === undefined || el1 === '' || el1 === 0)) { if (max < Number(el1)) { max = Number(el1); } } else { max == 100; } }); }); let maxint = Math.ceil(max / 9.5); //不让最高的值超过最上面的刻度 let maxval = maxint * 10; //让显示的刻度是整数 return maxval;}const max = Math.ceil(calMax([getmyd]) / 10) * 10;option = { backgroundColor: backgroundColor, grid: { left: '10%', right: '10%', bottom: '0%', top: '5%', // containLabel: true, }, tooltip: { formatter: (params) => { if (params.name !== '') { return params.name + ' : ' + getmyd[params.dataIndex]; } }, textStyle: { align: 'left', }, }, xAxis: [ { type: 'value', axisLabel: { show: false, color: '#fff', formatter: function (val) { return val + ''; }, textStyle: { fontSize: '13', }, }, min: 0, max: max, // 计算最大值 interval: max / 5, // 平均分为5份 splitNumber: 5, splitLine: { show: false, lineStyle: { color: '#fff', }, }, axisLine: { show: false, lineStyle: { color: '#fff', width: 1, opacity: 0.3, }, }, axisTick: { show: false, }, }, { type: 'value', axisLabel: { show: false, }, min: 0, max: max, // 计算最大值 interval: max / 10, // 平均分为5份 splitNumber: 10, splitLine: { show: false, lineStyle: { type: 'dashed', color: '#D8D8D8', }, }, axisLine: { show: false, lineStyle: { color: '#fff', }, }, axisTick: { show: false, }, }, ], yAxis: [ { inverse: false, data: getmydmc, axisLabel: { padding: [0, 0, 20, -10], inside: true, textStyle: { fontSize: 14, fontFamily: 'PingFang SC', fontWeight: 400, color: '#d2d2d2', align: 'left', textShadowColor: '#00d6ff', textShadowOffsetX: 0, textShadowOffsetY: 0, textShadowBlur: 5, }, formatter: '{value}\n{a|占位}', rich: { a: { color: 'transparent', lineHeight: 30, fontFamily: 'digital', fontSize: 14, }, }, }, // offset: 0, splitLine: { show: false, }, axisTick: { show: false, }, axisLine: { show: false, }, }, { //左侧柱状图的Y轴 gridIndex: 0, //y轴所在的 grid 的索引 splitLine: 'none', axisTick: 'none', axisLine: 'none', data: getmyd, inverse: false, axisLabel: { show: true, verticalAlign: 'bottom', align: 'right', padding: [0, 10, 18, 0], textStyle: { color: '#fff', fontSize: '14', }, formatter: function (value) { return '{x|' + value + '}'; // return '{x|' + value + '} {y|' + '%}'; }, rich: { y: { color: '#3dffef', fontFamily: 'Orbitron', fontSize: 14, }, x: { color: '#3dffef', fontFamily: 'Orbitron', fontSize: 14, }, }, }, }, ], dataZoom: [ { type: 'inside', show: true, height: 15, start: 1, end: 100, orient: 'vertical', zlevel: 66, }, ], series: [ { name: '值', type: 'bar', // barGap: '100%', padding: 10, // zlevel: 1, xAxisIndex: 0, label: { show: false, position: 'right', textStyle: { color: '#fff', fontSize: 14, }, }, itemStyle: { normal: { borderRadius: 0, color: { colorStops: [ { offset: 0, color: '#46B7ED', // 0% 处的颜色 }, { offset: 1, color: '#48EDD3', // 100% 处的颜色 }, ], }, }, }, barWidth: 18, data: getmyd, z: 0, }, { // 分隔 type: 'pictorialBar', symbolRotate: '-25', itemStyle: { normal: { color: 'rgba(1, 12, 38, 0.4)', }, }, symbolRepeat: 'fixed', symbolMargin: 6, symbol: 'rect', symbolClip: true, symbolSize: [5, 22], symbolPosition: 'start', symbolOffset: [0, -2], data: getmyd, z: 66, animationEasing: 'elasticOut', }, { name: '背景', type: 'bar', barWidth: 24, barGap: '-118%', data: getmydzd, itemStyle: { normal: { color: 'rgba(5,59,113,0.7)', borderRadius: 0, // borderColor: 'rgba(0, 255, 236, 1)', borderColor: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: '#015EFE', // 0% 处的颜色 }, { offset: 1, color: '#10C2E8', // 100% 处的颜色 }, ], false ), }, }, z: -1, }, { type: 'pictorialBar', name: '左内边框', symbol: 'rect', symbolSize: [3, 22], symbolOffset: [0, -2], animation: false, // symbolKeepAspect: true, // animationEasing: 'none', itemStyle: { normal: { color: 'rgba(5,59,113,1)', }, opacity: 1, }, z: 99, data: new Array(getmyd.length).fill(1), }, ],};以上是"Vue echart如何实现柱状图,电池图,3D柱图和3D圆柱图"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
颜色
柱状
社区
电池
门禁
安新
雄县
最大
接种率
最大值
第一次
设备
容城
圆柱
内容
数据
篇文章
背景
边框
雄州
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
深圳科技互联网
科技服务与互联网
亿策互联网科技
小马过河互联网科技
科技创新互联网企业
友谊互联网络科技
天下捷融互联网科技
中化能源互联网科技招聘
互联网软件和科技
互联网新科技动漫ppt素材
深圳市罗太互联网科技有限公司
伊宁互联网科技做什么的
工业互联网展湾科技股份有限公司
浙南科技城互联网大厦招聘
抖集互联网科技技术咨询
互联网界的黑科技
上海万顺科技互联网有限公司招聘
互联网时代高科技布局
华人运通互联网科技公司
互联网科技创业计划的风险分析
远信互联网科技
碳银互联网科技
互联网科技logo
黑科技闪耀互联网之光
高科技互联网发展前景如何
21世纪互联网科技成就
安徽零酒互联网科技有限公司
广西泛欧互联网科技有限公司
青岛互联网科技园
利用互联网等科技手段
