了解本次学习，先回顾《2019-nCov疫情实时趋势数据可视化Echarts学习(2):获取API数据接口后数据的清洗、处理及JSON标准格式的输出》
一，将JSON数据按照echarts的data要求进行格式化；
var area = [], confirmed = [], confirmedRelative = [], crued = [], died = []; for (var i = 0; i < dataObj.component[0].caseList.length; i++) { area.push(dataObj.component[0].caseList[i].area); confirmed.push(dataObj.component[0].caseList[i].confirmed); confirmedRelative.push(dataObj.component[0].caseList[i].confirmedRelative); crued.push(dataObj.component[0].caseList[i].crued); died.push(dataObj.component[0].caseList[i].died); }
二、引入echarts.min.js，并创建echart的柱图和折线图；
var dom = document.getElementById("echart1"); var myChart = echarts.init(dom); var option = { title: { text: dataObj.component[0].title, subtext: '更新时间：' + dataObj.component[0].mapLastUpdatedTime, x: 'center', top: '3%', textStyle: { color: '#fff', fontSize: '16' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'line' }, confine: true, }, legend: { data: ['确诊人数', '疑是人数', '治愈人数', '死亡人数'], y: 'bottom', textStyle: { color: '#fff', fontSize: '12' } }, gird: { right: '2%', left: '5%', top: '10%', containLabel: true }, xAxis: { type: 'category', axisLine: { lineStyle: { color: '#fff' } }, data: area }, yAxis: [{ type: 'value', axisLine: { lineStyle: { color: '#fff' } } }, { type: 'value', axisLine: { lineStyle: { color: '#fff' } } }], series: [{ data: confirmed, type: 'bar', yAxisIndex: 1, name: '确诊人数', label: { show: true, position: 'top', textStyle: { color: '#fff' } } }, { data: confirmedRelative, type: 'line', name: '疑是人数' }, { data: crued, type: 'line', name: '治愈人数' }, { data: died, type: 'line', name: '死亡人数' } ] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); });
三、实现数据的自动刷新，匹配JSON数据的刷新时间；
var interval; getEcharts1(); clearInterval(interval); interval = setInterval(function () { getEcharts1(); }, 60 * 1000);//60s刷新一次数据;
完整代码：
/*5.echarts的数据利用*/ function getEcharts1() { var area = [], confirmed = [], confirmedRelative = [], crued = [], died = []; for (var i = 0; i < dataObj.component[0].caseList.length; i++) { area.push(dataObj.component[0].caseList[i].area); confirmed.push(dataObj.component[0].caseList[i].confirmed); confirmedRelative.push(dataObj.component[0].caseList[i].confirmedRelative); crued.push(dataObj.component[0].caseList[i].crued); died.push(dataObj.component[0].caseList[i].died); } //console.log(area); var dom = document.getElementById("echart1"); var myChart = echarts.init(dom); var option = { title: { text: dataObj.component[0].title, subtext: '更新时间：' + dataObj.component[0].mapLastUpdatedTime, x: 'center', top: '3%', textStyle: { color: '#fff', fontSize: '16' } }, tooltip: { trigger: 'axis', axisPointer: { type: 'line' }, confine: true, }, legend: { data: ['确诊人数', '疑是人数', '治愈人数', '死亡人数'], y: 'bottom', textStyle: { color: '#fff', fontSize: '12' } }, gird: { right: '2%', left: '5%', top: '10%', containLabel: true }, xAxis: { type: 'category', axisLine: { lineStyle: { color: '#fff' } }, data: area }, yAxis: [{ type: 'value', axisLine: { lineStyle: { color: '#fff' } } }, { type: 'value', axisLine: { lineStyle: { color: '#fff' } } }], series: [{ data: confirmed, type: 'bar', yAxisIndex: 1, name: '确诊人数', label: { show: true, position: 'top', textStyle: { color: '#fff' } } }, { data: confirmedRelative, type: 'line', name: '疑是人数' }, { data: crued, type: 'line', name: '治愈人数' }, { data: died, type: 'line', name: '死亡人数' } ] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } var interval; getEcharts1(); clearInterval(interval); interval = setInterval(function () { getEcharts1(); }, 60 * 1000);//60s刷新一次数据;
上面只是将JSON数据和Echarts进行了整合开发，能不能按照确认人数的降序排列？能不能完成像《2019-nCov疫情实时趋势数据可视化Echarts学习(1)：柱图和折线图》纵向展示呢？
Done!
