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

}

]

};

相关推荐
dasseinzumtode3 小时前
ECharts 保留 tooltip.trigger: 'axis'的情况下 实现markPoint tooltip独立自定义悬浮框 功能
前端·echarts
lh_125417 小时前
ECharts 地图开发入门
前端·javascript·echarts
胡八一1 天前
如何在 Dialog 中安全初始化 ECharts 并自动监听容器大小变化
前端·安全·echarts
图表制作解说(目标1000个图表)2 天前
ECharts散点图-散点图15,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·大屏可视化
沉迷...2 天前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts
晚风3083 天前
el-tab组件与echarts的影响
echarts·element
serve the people4 天前
vue中将elementUI和echarts转成pdf文件
vue.js·elementui·echarts
图表制作解说(目标1000个图表)5 天前
ECharts散点图-散点图13,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·大屏可视化
Danny_FD5 天前
ECharts中的markPoint使用,最大值,最小值,展示label数值
前端·echarts
雪梅零落5 天前
Echart 地图放大缩小
echarts