455 lines
12 KiB
HTML
455 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
|
||
<title>ECharts</title>
|
||
<!-- 引入 echarts.js -->
|
||
<script src="echarts/echarts.min.js" charset="utf-8"></script>
|
||
<style type="text/css">
|
||
.clear_box::after{
|
||
content: "";
|
||
display: block;
|
||
clear: both;
|
||
}
|
||
.div_float{
|
||
width: 25%;
|
||
float: left;
|
||
padding: 0px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="sjzs_top">
|
||
|
||
</div>
|
||
<div class="sjzs_cont clear_box">
|
||
<div class="div_top">
|
||
<div id="main" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
||
</div>
|
||
<div class="div_float">
|
||
<div id="main1" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
||
</div>
|
||
<div class="div_float">
|
||
<div id="main2" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
||
</div>
|
||
<div class="div_float">
|
||
<div id="main3" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
||
</div>
|
||
<div class="div_float">
|
||
<div id="main4" style="width: 100%;height:400px;margin: 0 auto;"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
var colors = ['#5793f3', '#d14a61', '#675bba'];
|
||
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data:['职业病人数', '职业禁忌证人数','体检人数', '培训人数']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['2014','2015', '2016', '2017', '2018', '2019']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: '职业病人数',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [180,210, 180, 170, 120, 50]
|
||
},
|
||
{
|
||
name: '职业禁忌证人数',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [205,580, 780, 829, 1228, 1362]
|
||
},
|
||
{
|
||
name: '体检人数',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [300,483,846,865,871,939]
|
||
},
|
||
{
|
||
name: '培训人数',
|
||
type: 'line',
|
||
stack: '总量',
|
||
data: [80,150,120,130,100,80]
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
var myChart1= echarts.init(document.getElementById('main1'));
|
||
|
||
option1 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataView: {show: true, readOnly: false},
|
||
magicType: {show: true, type: ['line', 'bar']},
|
||
restore: {show: true},
|
||
saveAsImage: {show: true}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['已体检', '未体检']
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['2015', '2016', '2017', '2018', '2019'],
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '体检人数',
|
||
min: 0,
|
||
max: 1300,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '未体检人数',
|
||
min: 0,
|
||
max: 1300,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '已体检',
|
||
type: 'bar',
|
||
data: [580, 780, 829, 1028, 1162],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[
|
||
{offset: 0, color: '#0381de'},
|
||
{offset: 1, color: '#330099'}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
},
|
||
{
|
||
name: '未体检',
|
||
type: 'bar',
|
||
data: [279, 322, 283, 172,95],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[
|
||
{offset: 0, color: '#0381de'},
|
||
{offset: 1, color: '#330099'}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart1.setOption(option1);
|
||
var myChart2= echarts.init(document.getElementById('main2'));
|
||
|
||
option2 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataView: {show: true, readOnly: false},
|
||
magicType: {show: true, type: ['line', 'bar']},
|
||
restore: {show: true},
|
||
saveAsImage: {show: true}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['培训人数', '未培训人数']
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['2015', '2016', '2017', '2018', '2019'],
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '培训人数',
|
||
min: 0,
|
||
max: 1300,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '培训人数',
|
||
min: 0,
|
||
max: 1300,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '培训人数',
|
||
type: 'bar',
|
||
data: [583,846,865,971,1039],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[
|
||
{offset: 0, color: '#330099'},
|
||
{offset: 1, color: '#6600FF'}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
},
|
||
{
|
||
name: '未培训人数',
|
||
type: 'bar',
|
||
data: [276, 256, 247, 229, 218],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[
|
||
{offset: 0, color: '#6633CC'},
|
||
{offset: 1, color: '#330099'}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart2.setOption(option2);
|
||
var myChart3= echarts.init(document.getElementById('main3'));
|
||
|
||
option3 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataView: {show: true, readOnly: false},
|
||
magicType: {show: true, type: ['line', 'bar']},
|
||
restore: {show: true},
|
||
saveAsImage: {show: true}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['职业病人数', '正常人数']
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['2015', '2016', '2017', '2018', '2019'],
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '职业病人数',
|
||
min: 0,
|
||
max: 1300,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '正常人数',
|
||
min: 0,
|
||
max: 1300,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '职业病人数',
|
||
type: 'bar',
|
||
data: [210, 180, 170, 120, 94],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[
|
||
{offset: 0, color: '#3366CC'},
|
||
{offset: 1, color: '#3333CC '}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
},
|
||
{
|
||
name: '正常人数',
|
||
type: 'bar',
|
||
data: [649, 922, 942, 1080, 1163],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[
|
||
{offset: 0, color: '#3366CC'},
|
||
{offset: 1, color: '#3333CC'}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart3.setOption(option3);
|
||
|
||
var myChart4= echarts.init(document.getElementById('main4'));
|
||
|
||
option4 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
dataView: {show: true, readOnly: false},
|
||
magicType: {show: true, type: ['line', 'bar']},
|
||
restore: {show: true},
|
||
saveAsImage: {show: true}
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['职业禁忌症人数', '正常人数']
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['2015', '2016', '2017', '2018', '2019'],
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '职业禁忌症人数',
|
||
min: 0,
|
||
max: 1300,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '正常人数',
|
||
min: 0,
|
||
max: 1300,
|
||
interval: 100,
|
||
axisLabel: {
|
||
formatter: '{value} 人'
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '职业禁忌症人数',
|
||
type: 'bar',
|
||
data: [153,121,138,109,86],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[
|
||
{offset: 0, color: '#003399'},
|
||
{offset: 1, color: '#006699'}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
},
|
||
{
|
||
name: '正常人数',
|
||
type: 'bar',
|
||
data: [706, 1031, 974, 1091, 1171],
|
||
color: new echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
|
||
[
|
||
{offset: 0, color: '#003399'},
|
||
{offset: 1, color: '#006699'}
|
||
] //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
|
||
),
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart4.setOption(option4);
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html> |