<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
color: '#2482ff',
backgroundColor: '#000',
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
legend: {
top: 10,
// left: 10,
// orient: 'vertical',
textStyle: {
fontSize: 16,
color: 'rgba(255,255,255)'
},
data: ['极重', '严重', '一般', '轻微'],
//circle圆形,rect长方形,roundRect圆角长方形,triangle三角形,diamond菱形,pin不规则圆,arrow不规则三角形,none没有图标
icon: 'roundRect'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
showContent: true,
formatter: function(params) {
var res = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i += 2) {
res += '<p>' + params[i].seriesName + ':' + params[i].value + '</p>'
}
return res;
}
},
yAxis: {
type: 'category',
//去掉坐标轴刻线
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
data: ['刑事事件', '民事事件', '消防事件', '医疗事件']
},
xAxis: {
type: 'value',
min: 0,
max: 400,
interval: 100,
axisLabel: {
color: 'rgba(255,255,255,0)'
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
//去掉坐标轴刻线
axisTick: {
show: false
}
},
series: [{
name: '极重',
type: 'bar',
stack: 'all',
barWidth: 40,
itemStyle: {
color: '#1afefd'
},
data: [45, 55, 35, 75]
},
{
name: '极重',
type: 'bar',
stack: 'all',
barWidth: 40,
itemStyle: {
color: '#27a3e1'
},
data: [55, 45, 65, 25]
},
{
name: '严重',
type: 'bar',
stack: 'all',
barWidth: 40,
itemStyle: {
color: '#fecb89'
},
data: [60, 42, 45, 35]
},
{
name: '严重',
type: 'bar',
stack: 'all',
barWidth: 40,
itemStyle: {
color: '#015ea1'
},
data: [40, 58, 55, 65]
},
{
name: '一般',
type: 'bar',
stack: 'all',
barWidth: 40,
itemStyle: {
color: '#0ad5fe'
},
data: [40, 35, 45, 65]
},
{
name: '一般',
type: 'bar',
stack: 'all',
barWidth: 40,
itemStyle: {
color: '#e05828'
},
data: [60, 65, 55, 35]
},
{
name: '轻微',
type: 'bar',
stack: 'all',
barWidth: 40,
itemStyle: {
color: '#ff81cb'
},
data: [70, 50, 35, 45]
},
{
name: '轻微',
type: 'bar',
stack: 'all',
barWidth: 40,
itemStyle: {
color: '#ffb602'
},
data: [30, 50, 65, 55]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
