效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d16932766950e3f5cee239a33bc75651.png)
js代码
function showBar1 (x,data) {
var chart = echarts.init(document.getElementById('bar2'))
chart.setOption(
{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter:function(datas){
var res = datas[0].name + '<br/>', val;
let percent = '';
if(datas[0].value=='0'){
percent = 0;
}
else{
percent = ((datas[1].value / datas[0].value) * 100).toFixed(2);
}
let dotColor0 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + datas[0].color + '"></span>'
let dotColor1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + datas[1].color + '"></span>'
res += dotColor0 + datas[0].seriesName + ": " + datas[0].value + '</br>';
res += dotColor1 + datas[1].seriesName + ": " + datas[1].value + '</br>';
res += '覆盖率: ' + percent + '%' + '</br>'
return res;
}
},
legend: {
data: ['企业数', '安责险企业数'],
textStyle: {
color: '#97B8C9',
fontSize: 16
},
left: '50%',
top: '10%',
},
grid: {
top: '30%',
left: '3%',
right: '5%',
bottom: '15%',
containLabel: true
},
dataZoom: [
{
show: true,
bottom: '4%',
start: 0,
end: 70,
height: 20,
backgroundColor: 'rgba(9,75,127,0.2)',
fillerColor: '#094B7F',
borderColor: '#094B80',
textStyle: {
color: '#97B8C9'
}
}
],
xAxis: [
{
type: 'category',
data: x,
splitLine: {
lineStyle: {
color: '#07274D'
}
},
axisLine: {
lineStyle: {
color: '#07274D'
}
},
axisTick: {
lineStyle: {
color: '#1178C9'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#97B8C9',
fontSize: 14
},
formatter: function (v) {
if (v.length > 5) {
return v.substring(0, 5) + '...';
}
return v;
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
textStyle: {
color: '#97B8C9',
fontSize: 16
}
},
axisLine: {
show: true,
lineStyle: {
color: '#07274D'
}
},
axisTick: {
lineStyle: {
color: '#1178C9'
}
},
splitLine: {
show: false
}
}
],
series: [
{
name: '企业数',
type: 'bar',
barGap: '-100%',
yAxisIndex: 0,
data: data.entNum,
itemStyle: {
normal: {
color: '#199ed8'
}
},
label: {
normal: {
show: true,
position: 'top',
fontSize: 16
}
},barWidth : 35
},
{
name: '安责险企业数',
type: 'bar',
yAxisIndex: 0,
data: data.entBxNum,
itemStyle: {
normal: {
color: '#008000'
}
},
label: {
normal: {
show: true,
position: 'top',
fontSize: 16
}
},barWidth : 35
}
]
}
)
$(window).resize(function () {
chart.resize()
}
)
return chart
}