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

}

]

};

相关推荐
qq_5895681023 分钟前
数据可视化echarts学习笔记
学习·信息可视化·echarts
m0_748244967 小时前
echarts画风向杆
前端·数据库·echarts
学前端的小朱9 小时前
Echarts实现大屏可视化
websocket·echarts·nodejs·vue3·vite·koa·cors
图表制作解说(目标1000个图表)2 天前
ECharts柱状图-柱图42,附视频讲解与代码下载
echarts·统计分析·数据可视化·柱状图·大屏可视化
图表制作解说(目标1000个图表)2 天前
ECharts散点图-SymbolShapeMorph,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·大屏可视化
图表制作解说(目标1000个图表)2 天前
ECharts关系图-关系图11,附视频讲解与代码下载
echarts·统计分析·数据可视化·关系图·大屏可视化
图表制作解说(目标1000个图表)2 天前
ECharts柱状图-柱图32,附视频讲解与代码下载
echarts·统计分析·数据可视化·柱状图·大屏可视化
图表制作解说(目标1000个图表)2 天前
ECharts热力图-笛卡尔坐标系上的热力图,附视频讲解与代码下载
echarts·统计分析·数据可视化·热力图·大屏可视化
小茗同学阿3 天前
Vue + ECharts 实现山东地图展示与交互
前端·vue.js·echarts
漫天绯羽4 天前
使用echarts 绘制县级以下 乡镇地图并标注若干坐标点。获取县级以下乡镇的边界坐标
前端·javascript·echarts