<!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: ['#6199be', '#b66047', '#61b845', '#cf6aac'],
backgroundColor: '#000',
legend: {
bottom: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255)'
},
data: ['厦门第一医院', '厦门中山医院', '厦门中医院', '厦门第五医院'],
//circle圆形,rect长方形,roundRect圆角长方形,triangle三角形,diamond菱形,pin不规则圆,arrow不规则三角形,none没有图标
// icon:'arrow'
},
tooltip: {
trigger: 'item',
formatter: '{a}<br/>{b}<br/>{c}人'
},
grid: {
left: 60,
right: 20,
top: 40,
bottom: 70
},
xAxis: [{
name: '',
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255)",
//文本数据倾斜
rotate: 30
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value',
name: '',
min: 0,
max: 1500,
interval: 300,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
axisLabel: {
formatter: '{value} 元',
color: '#fff'
}
}],
series: [{
name: '厦门第一医院',
type: 'line',
// 折线图变曲线图
smooth: true,
data: [0, 20, 40, 80, 300, 800, 700],
// 区域面积样式
areaStyle: {
color: '#6199be',
opacity: 0.3
}
},
{
name: '厦门中山医院',
type: 'line',
smooth: true,
data: [0, 250, 450, 750, 450, 30, 5],
areaStyle: {
color: '#b66047',
opacity: 0.3
}
},
{
name: '厦门中医院',
type: 'line',
smooth: true,
data: [1300, 1100, 600, 300, 100, 80, 20],
areaStyle: {
color: '#61b845',
opacity: 0.3
}
},
{
name: '厦门第五医院',
type: 'line',
smooth: true,
data: [310, 100, 80, 60, 40, 20, 10],
areaStyle: {
color: '#cf6aac',
opacity: 0.3
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
