var allUseDayChartTwo;lxbjDtbPp function allUseDayChartTwoFun(obj,xdata,ydata,zdata){ allUseDayChartTwo = echarts.init(obj); var category = xdata; var lineData = zdata; var barData = ydata; option = { // backgroundColor:'#F00', tooltip: { trigger: 'axis', backgroundColor:'rgba(0,0,0,.5)', axisPointer: { type: 'shadow', label: { show: true, backgroundColor: '#F1F1F1', color:'#5A5A5A' } }, confine: true }, grid: { left: '1%', right: '3%', bottom: '5%', top: '5%', containLabel: true }, xAxis: { axisLine: { lineStyle: { color: '#B4B4B4' } }, axisTick:{ show:false, }, axisLine:{ show:false }, axisTick:{ show:false }, splitLine:{ show:false }, axisLabel:{ textStyle: { fonlxbjDtbPptSize: 14, }, formatter:'{value} ', }, }, yAxis: [{ data: category, splitLine: {show: false}, axisLine: { lineStyle: { color: '#B4B4B4', } }, axisLabel:{ textStyle: { fontSize: 14, // color: '#B2B2B2' }, formatter:'{value} ', }, axisLine:{ show:false }, axisTick:{ show:false }, splitLine:{ show:false } } // ,{ // data: category, // splitLine: {show: false}, // axisLine: { // lineStyle: { // color: '#B4B4B4', // } // }, // axisLabel:{ // formatter:'{value} ', // } // } ], series: [{ name: '用量', type: 'bar', barWidth: 15, barGap: '-100%', itemStyle: { normal: { barBorderRadius: 5, color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: 'rgba(88,228,88,0.8)'}, {offset: 1, color: 'rgba(88,228,88,0.8)'} ] ) } }, data: barData },{ name: '阈值', type: 'bar', barGap: '-100%', barWidth: 15, itemStyle: { normal: { barBorderRadius: 5, color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: 'rgba(234,234,234,0.8)'}, {offset: 0.2, color: 'rgba(234,234,234,1)'}, {offset: 1, color: 'rgba(234,234,234,1)'} ] ) } }, z: -12, data: lineData } // ,{ // name: '背景', // type: 'bar', // barGap: '-100%', // barWidth: 15, // itemStyle: { // normal: { // barBorderRadius: 5, // color: new echarts.graphic.LinearGradient( // 0, 0, 0, 1, // [ // {offset: 0, color: 'rgba(0,0,0,0.2)'}, // {offset: 0.2, color: 'rgba(0,0,0,0.)'}, // {offset: 1, color: 'rgba(0,0,0,0.24)'} // ] // ) // } // }, // z: -20, // data: [50,50,50,50,50,50,50,50,50] // } ] }; allUseDayChartTwo.setOption(option); }
补充知识:echarts 柱状图实现进度条,进行数据驱动
echarts 柱状图实现进度条,进行数据驱动
效果图
直接写上配置项,根据自己的需求更改
option = {
backgroundColor: '#0a1d53',
grid: {
left: '2%',
top: '2%',
right: '2%',
bottom: '2%',
containLabel: true
},
tooltip: {
www.cppcns.com trigger: 'item',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
textStyle: {
color: '#fff'
},
xAxis: {
show: false,
type: 'value',
// 设置x轴显示几段
min: 0,
max: 100,
inverse: true,
splitLine: {
show: false
},
interval: 50
},
yAxis: {
show: true,
type: 'category',
data: [
'周一',
'周二',
'周三',
'周五',
'周五',
'周六',
'周日'
],
axisTick: { show: false },
axisLine: {
show: false,
lineStyle: {
color: 'red'
}
},
splitLine: {
show: false
},
inside: true,
textStyle: {
color: '#000c45'
}
},
series: [
{
type: 'b编程客栈ar',
itemStyle: {
normal: {
color: '#000c45', // 定义柱形的背景色
barBorderRadius: [5, 5, 5, 5] // 定义背景柱形的圆角
}
},
barGap: '-100%', // 设置柱形重合的重要步骤
data: [100, 100, 100, 100, 100, 100, 100],
z: 0,
silent: true,
animation: false, // 关闭动画效果
barWidth: '10px' // 设置柱形宽度
},
{
type: 'bar',
data: [50, 50, 50, 50, 50,50, 50],
barWidth: '10px',
barGap: '-100%', // 设置柱形重合的重要步骤
label: {
normal: {
show: true, //是否显现,不显示的话设置成false
http://www.cppcns.composition: "left", //显示的位置
distance: 10, //距离侄子的值 // label要显示的值比如: 20%
formatter: function(param) {
return param.value;
},
textStyle: {
//这个地方颜色是支持回调函数的这种的,如果是一种颜色则可以写成: color :'#1089E7'
color: function(params) {
var num = myColor.length; //得到myColor颜色数组的长度
return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
},
fontSize: "16"
}
}
},
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'#bbb743',
'#bbae43',
'#bb9d43',
'#bb8c43',
'#bb7e43',
'#bb5c43',
'#bb4643'
]
return colorList[params.dataIndex]
},
barBorderRadius: [5, 5, 5, 5] // 定义柱形的圆角
}
}
}
]
}
以上这篇解决echarts 一条柱状图显示两个值,类似进度条的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
本文标题: 解决echarts 一条柱状图显示两个值,类似进度条的问题
本文地址: http://www.cppcns.com/wangluo/javascript/325690.html
© 著作权归作者所有
举报
发表评论
0/200