<!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: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
backgroundColor: '#000',
legend: {
top: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255,.7)'
},
data: ['涉恐人员', '涉稳人员', '涉毒人员', '在逃人员', '重点上访人员', '肇事肇祸精神病人', '刑事犯罪前科人员']
},
grid: {
left: 10,
right: 10,
top: 40,
bottom: 10,
containLabel: true
},
xAxis: [{
//类目轴
type: 'category',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
data: ['康定市', '泸定县', '丹巴县', '九龙县', '新龙县', '巴塘县', '得荣县', '理塘县', '甘孜县', '道孚县', '德格县', '色达县']
}],
yAxis: [{
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value} ml'
},
type: 'value'
}
],
series: [
{
name: '涉恐人员',
// 类型：堆积柱形图
type: 'bar',
// 柱形宽度
barWidth: 30,
// 统一的名，代表一类图，实现堆积效果
stack: '搜索引擎',
data: [620, 732, 701, 734, 1090, 1130, 1120, 620, 732, 701, 734, 1090, ]
},
{
name: '涉稳人员',
type: 'bar',
stack: '搜索引擎',
data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
},
{
name: '涉毒人员',
type: 'bar',
stack: '搜索引擎',
data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
}, ,
{
name: '在逃人员',
type: 'bar',
stack: '搜索引擎',
data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
},
{
name: '重点上访人员',
type: 'bar',
stack: '搜索引擎',
data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
},
{
name: '肇事肇祸精神病人',
type: 'bar',
stack: '搜索引擎',
data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
},
{
name: '重大刑事犯罪前科人员',
type: 'bar',
stack: '搜索引擎',
data: [62, 82, 91, 84, 109, 110, 120, 91, 84, 109, 110, 120]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
