JavaWeb-新冠疫情信息數據展示
Echars的簡單入門使用
https://echarts.apache.org/examples/zh/index.html
可以上看上面的地址進行學習，基本的教程啊。
不會的5分鐘教你上手一波，，一波操作666.
注意：
引入js文件不能少啊。並且要注意順序，大胸弟。。。
<!-- 1、引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<!-- 注意引入echarts-wordcloud.min.js -->
<script src="js/echarts-wordcloud.min.js"></script>
<script src="js/dark.js"></script>
Echarts中製作餅狀圖-疫情
<!-- left2 -->
<script>
/* 3、基於準備好的dom，初始化echarts實例 */
var myChart = echarts.init(document.getElementById('left2'),'dark');
option = {
title: {
text: '現存確診',
subtext: '丁香數據',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '現存確診',
type: 'pie',
radius: '50%',
data: [
{
value: 1048, name: '河北省'},
{
value: 735, name: '黑龍江省'},
{
value: 580, name: '北京市'},
{
value: 484, name: '山西省'},
{
value: 300, name: '上海市'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//5、使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
Echarts中製作柱狀圖-疫情
<!-- right1 -->
<script type="text/javascript">
/* 3、基於準備好的dom，初始化echarts實例 */
var myChart = echarts.init(document.getElementById('right1'),'dark');
// 4、指定圖表的配置項和數據
var option = {
title: {
/* 主標題文本 */
text: '全國確診省市TOP5',
left:'left',
textStyle:{
color:'white',
fontWeight:'bolder',
fontSize: 18
}
},
color:['#3398DB'],
tooltip: {
/* 提示框組件。*/
trigger : 'axis',
axisPointer:{
type : 'shadow'
}
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true
},
xAxis: [
{
type:'category',
data: ["湖北省","香港","廣東省","上海市","黑龍江省"],
axisTick:{
alignWithLabel:true
},
axisLabel:{
show:true,
color:'white',
fontSize:10
}
}
],
yAxis: {
},
series: [{
name: '累計確診',
type: 'bar',
data: [68150, 10222, 2115, 1660, 1476]
}]
};
// 5、使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
Echarts中製作折線圖-疫情
<!-- left1 折線圖 -->
<script>
/* 3、基於準備好的dom，初始化echarts實例 */
var myChart = echarts.init(document.getElementById('left1'),'dark');
option = {
/* title: {
text: '折線圖堆疊'
}, */
tooltip: {
trigger: 'axis'
},
legend: {
data: ['累計確診', '現存確診', '治癒', '死亡']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1-23', '3-16', '5-23', '8-19', '10-12', '11-11', '12-25']
},
yAxis: {
type: 'value'
},
series: [
{
name: '累計確診',
type: 'line',
/* stack: '總量', */
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '現存確診',
type: 'line',
/* stack: '總量', */
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '治癒',
type: 'line',
/* stack: '總量', */
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '死亡',
type: 'line',
/* stack: '總量', */
data: [320, 332, 301, 334, 390, 330, 320]
},
]
};
myChart.setOption(option);
</script>
好了。基本操作先到這裏，一頓操作猛如虎，回頭一看哈哈哈。
喜歡的關注一下。