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

}

]

};

相关推荐
U.2 SSD1 天前
ECharts 日历坐标示例
前端·javascript·echarts
paopaokaka_luck2 天前
基于SpringBoot+Vue的志行交通法规在线模拟考试(AI问答、WebSocket即时通讯、Echarts图形化分析、随机测评)
vue.js·人工智能·spring boot·后端·websocket·echarts
卷Java6 天前
饼状图修复总结
java·spring boot·uni-app·echarts
用户3266094936177 天前
Echarts常用配置项参数总结
echarts
四月_h8 天前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
java水泥工8 天前
基于Echarts+HTML5可视化数据大屏展示-智慧消防大屏
前端·echarts·html5
泰迪智能科技019 天前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
麦麦大数据10 天前
D018 vue+django 旅游图谱推荐问答系统|neo4j数据库|智能问答
vue.js·django·echarts·知识图谱·旅游·neo4j·智能问答
我的div丢了肿么办10 天前
echarts4升级为echarts5的常见问题
前端·javascript·echarts