<div id="solvetime" style="width:100%;height:210px"></div>
mounted(){
var chartDom = document.getElementById('solvetime');
var myChart = echarts.init(chartDom);
var dataLine = [50, 66, 33, 25,22,43,11]
let positionLeft = 0.7,
max = 100 + 2*positionLeft
var option = {
grid: [
{
left: '3%',
top: '10%',
right: '0%',
bottom: '-10%',
containLabel: true
}
],
xAxis: [{
max:max,
show: false
}],
yAxis: [{
axisTick: 'none',
axisLine: 'none',
offset: '10',
axisLabel: {
textStyle: {
color: '#000000', //y轴字体颜色
fontSize: '12'
}
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}, {
axisTick: 'none',
axisLine: 'none',
show: false,
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: '14'
},
},
data: [1, 1, 1, 1, 1, 1, 1]
}, {
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)' //y轴线颜色
}
},
data: []
},
{ //设置柱状图右边参数
show: true,
inverse: true,
data: dataLine,
axisLabel: {
textStyle: {
fontSize: '12',
rich: {
oneone: {
color:'#0F97FF',
fontSize: '14',
},
},
},
formatter:'{oneone|{value}} 小时 '
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [
{
name: '条',
type: 'bar',
stack: 'b',
yAxisIndex: 0,
data: dataLine,
barWidth: 10,
itemStyle: {
normal: {
color: '#0F97FF',
barBorderRadius:[100, 100, 100, 100,100, 100, 100],
}
},
z: 2
}, { //背景灰框
name: '白框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',//设置-100% 则表示灰色柱状图与红色柱状图重合
data: [100, 100, 100, 100,100, 100, 100],
barWidth: 10,
itemStyle: {
normal: {
color: '#EDF0F6',
barBorderRadius:[100, 100, 100, 100, 100, 100, 100],
},
},
z: 1 // 设置维度越高这表示覆盖低的
},
]
}
option && myChart.setOption(option);
}