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

}

]

};

相关推荐
魔都吴所谓19 小时前
【Echarts】 电影票房汇总实时数据横向柱状图比图
javascript·ecmascript·echarts
JosieBook1 天前
【web应用】若依框架中,使用Echarts导出报表为PDF文件
前端·pdf·echarts
小彭努力中3 天前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
姜太小白4 天前
【ECharts】多个ECharts版本共存解决方案
前端·javascript·echarts
患得患失9495 天前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
zhaocarbon6 天前
vue2 echarts中国地图、在地图上标注经纬度及标注点
前端·javascript·echarts
白白李媛媛6 天前
vue3中实现echarts打印功能
前端·vue.js·echarts
Hexene...7 天前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
晓得迷路了9 天前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
徊忆羽菲9 天前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts