<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
margin:0;
border:0;
}
#container {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script type='text/javascript' src='https://obs-helf.woyun.cn/anov-resources/anov-echarts/5.2.2/echarts.min.js'></script>
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));
// 指定图表的配置项和数据
const barColors = ['#2aa7ff', '#fde943', '#33ffbb', '#FF7D34', '#ec6565']
option = {
backgroundColor: '#0E1327',
tooltip: {
trigger: 'axis',
textStyle: {
align: 'left',
color: '#fff',
textStyle: {
align: 'left',
color: '#fff'
},
backgroundColor: 'rgba(16, 32, 40, 0.88)',
borderRadius: 4,
borderColor: '#20749e'
},
axisPointer: {
type: 'shadow'
},
formatter: params => {
return params[0].marker + params[0].name + ': ' + params[0].value
}
},
grid: {
left: '5%',
right: '0%',
top: '20%',
bottom: '5%',
containLabel: true
},
xAxis: [{
type: 'category',
//boundaryGap: true,
//坐标轴文字
axisLabel: {
color: 'rgba(230, 246, 255, 0.6)',
fontSize: 14,
interval: 0,
width: 60,
overflow: 'truncate'
},
//坐标轴
axisLine: {
width: 1,
type: 'solid',
color: 'rgba(230, 246, 255, 0.49)'
},
//刻度
axisTick: null,
data: ['党委', '工委']
},
{
type: 'category',
show:false,
boundaryGap: true,
//坐标轴文字
axisLabel: {
show:false
},
//坐标轴
axisLine: {
show:false,
width: 1,
type: 'solid',
color: 'rgba(230, 246, 255, 0.49)'
},
//刻度
axisTick: null,
data: ['党委', '工委']
}],
yAxis: [
{
splitNumber: 3,
name: '个',
nameTextStyle: {
color: 'rgba(230, 246, 255, 0.8)',
fontSize: 14,
padding: [0, 40, 0, 0]
},
axisTick: {
show: true,
inside: true
},
axisLine: {
show: true
},
minorTick: {
show: true
},
// axisLabel: {
// show: false
// },
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(230, 246, 255, 0.3)'
}
},
axisLabel: {
color: 'rgba(230, 246, 255, 0.6)',
fontSize: 14
}
}
],
series: [
{
type: 'bar',
id:1,
itemStyle: {
color: function(params) {
return barColors[params.dataIndex]
},
opacity: 1.0
},
label: {
show: true,
position: 'insideBottom',
distance: 20,
fontSize: 14,
color: 'inherit'
},
z: 12,
silent: true,
barWidth: '49%',
data: [130, 120]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option,{
});
var yMax = myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
console.log(yMax)
myChart.setOption({
series:[
{
id:2,
type: 'pictorialBar',
symbol: 'rect',
barWidth:'80%',
symbolSize: ['100%', 2],
// symbolSize: '100%',
symbolOffset: [0, -0],
symbolPosition: 'end',
z: 10,
itemStyle: {
color: function(params) {
return barColors[params.dataIndex]
},
opacity: 0.5
},
data: [yMax, yMax]
},
{
id:3,
name: "",
xAxisIndex:1,
type: 'bar',
z:0,
data: [yMax, yMax],
barWidth: '80%',
itemStyle: {
normal: {
color: 'rgba(41,22,34,0.8)' // 0% 处的颜色
}
},
},
]
})
</script>
</html>
echarts柱状图(带背景和上边框)
最新推荐文章于 2024-06-20 10:44:50 发布