echarts 水平柱图 科技风

var category= [{

name: "管控",

value: 2500

},

{

name: "集中式",

value: 8000

},

{

name: "纳管",

value: 3000

},

{

name: "纳管",

value: 3000

},

{

name: "纳管",

value: 3000

}

]; // 类别

var total = 10000; // 数据总数

var datas = [];

category.forEach(value => {

datas.push(value.value);

});

option = {

backgroundColor:'#071347',

xAxis: {

max: total,

splitLine: {

show: false

},

axisLine: {

show: false

},

axisLabel: {

show: false

},

axisTick: {

show: false

}

},

grid: {

left: 80,

top: 20, // 设置条形图的边距

right: 180,

bottom: 80

},

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: {

color: function(params) {

var color;

if(params.dataIndex==19){

color = {

type: "linear",

x: 0,

y: 0,

x2: 1,

y2: 0,

colorStops: [{

offset: 0,

color: "#EB5118" // 0% 处的颜色

},

{

offset: 1,

color: "#F21F02" // 100% 处的颜色

}

]

}

}else if(params.dataIndex==18){

color = {

type: "linear",

x: 0,

y: 0,

x2: 1,

y2: 0,

colorStops: [{

offset: 0,

color: "#FFA048" // 0% 处的颜色

},

{

offset: 1,

color: "#B25E14" // 100% 处的颜色

}

]

}

}else if(params.dataIndex==17){

color = {

type: "linear",

x: 0,

y: 0,

x2: 1,

y2: 0,

colorStops: [{

offset: 0,

color: "#F8E972" // 0% 处的颜色

},

{

offset: 1,

color: "#E5C206" // 100% 处的颜色

}

]

}

}else{

color = {

type: "linear",

x: 0,

y: 0,

x2: 1,

y2: 0,

colorStops: [{

offset: 0,

color: "#1588D1" // 0% 处的颜色

},

{

offset: 1,

color: "#0F4071" // 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:"#061348"

}

},

symbolRepeat: "fixed",

symbolMargin: 6,

symbol: "rect",

symbolClip: true,

symbolSize: [1, 21],

symbolPosition: "start",

symbolOffset: [1, -1],

symbolBoundingData: this.total,

data: category,

z: 2,

animationEasing: "elasticOut"

},

{

// 外边框

type: "pictorialBar",

symbol: "rect",

symbolBoundingData: total,

itemStyle: {

normal: {

color: "none"

}

},

label: {

normal: {

formatter: (params) => {

var text;

if(params.dataIndex==1){

text = '{a| 100%}{f| '+params.data+'}';

}else if(params.dataIndex==2){

text = '{b| 100%}{f| '+params.data+'}';

}else if(params.dataIndex==3){

text = '{c| 100%}{f| '+params.data+'}';

}else{

text = '{d| 100%}{f| '+params.data+'}';

}

return text;

},

rich:{

a: {

color: 'red'

},

b: {

color: 'blue'

},

c:{

color: 'yellow'

},

d:{

color:"green"

},

f:{

color:"#ffffff"

}

},

position: 'right',

distance: 0, // 向右偏移位置

show: true

}

},

data: datas,

z: 0,

animationEasing: "elasticOut"

},

{

name: "外框",

type: "bar",

barGap: "-120%", // 设置外框粗细

data: [total, total, total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total],

barWidth: 25,

itemStyle: {

normal: {

color: "transparent", // 填充色

barBorderColor: "#1C4B8E", // 边框色

barBorderWidth: 1, // 边框宽度

// barBorderRadius: 0, //圆角半径

label: {

// 标签显示位置

show: false,

position: "top" // insideTop 或者横向的 insideLeft

}

}

},

z: 0

}

]

};

相关推荐
_菜鸟果果3 天前
Vue3+echarts 3d饼图
前端·javascript·echarts
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
paopaokaka_luck4 天前
基于SpringBoot+Vue的数码交流管理系统(AI问答、协同过滤算法、websocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·websocket·echarts
麦麦大数据4 天前
F024 RNN+Vue+Flask电影推荐可视化系统 python flask mysql 深度学习 echarts
python·rnn·深度学习·vue·echarts·电影推荐
xiaohe06015 天前
🎉 Uni ECharts 2.0 正式发布:原来在 uni-app 中使用 ECharts 可以如此简单!
uni-app·echarts
码界筑梦坊7 天前
267-基于Django的携程酒店数据分析推荐系统
python·数据分析·django·毕业设计·echarts
HashTang8 天前
2025年10月实时最新获取地图边界数据方法,省市区县街道多级联动【文末附实时geoJson数据下载】
信息可视化·echarts·geojson·乡镇geojson·街道边界·geomap·街道geo
啦工作呢8 天前
数据可视化 ECharts
前端·信息可视化·echarts
U.2 SSD10 天前
Echart仪表盘示例
javascript·echarts
U.2 SSD11 天前
ECharts漏斗图示例
前端·javascript·echarts