echarts使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.line{
float:left;
}
.main{
float:right
}
</style>
</head>
<body>
<div id="line" class="line" style="width:50%;height:500px;"></div>
<div id="main" class="main" style="width:50%;height:500px;"></div>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
dom=document.getElementById("main");
line_dom=document.getElementById("line");
myCharts=echarts.init(dom);
line_myCharts=echarts.init(line_dom);
var areaName;//地图
var mapStack=[];
var curMap ={};
//折线图
var line;
var lineName;
var lineConfirm;
var lineConfirmAdd;
var lineHeal;
var lineDead;
myCharts.showLoading();
$.ajax({
url:'servlet',
type:'post',
dataType:'text',
async: false,
success:function e(data){
alert("success ajax");
areaName=$.parseJSON(data);
},
error:function test(){
alert("false ajax");
}
})
$.ajax({
url:'lineServlet',
type:'post',
dataType:'text',
async: false,
success:function e(data){
alert("success ajax");
line=$.parseJSON(data);
lineName=line[0].city;
lineConfirm=line[0].confirm;
lineConfirmAdd=line[0].nowConfirm;
lineHeal=line[0].heal;
lineDead=line[0].dead;
},
error:function test(){
alert("false ajax");
}
})
myCharts.hideLoading();
function getArea(data){
myCharts.showLoading();
//获得json
$.get('json/'+data+'.json', function (geoJson) {
myCharts.hideLoading();
echarts.registerMap('HK', geoJson);
myCharts.setOption({
tooltip: {
trigger: 'item',
formatter:function(params)
{
for(var i=0;i<areaName.length;i++)
{
if(params.name==areaName[i].name)
{
return areaName[i].name+'<br/>'
+"新增确诊"+areaName[i].value+'<br/>'
+"累计确诊"+areaName[i].confirm+'<br/>'
+"累计死亡"+areaName[i].dead+'<br/>'
+"累计治愈"+areaName[i].heal;
}
}
}
},
visualMap: {
min: 0,
max: 10,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{
type: 'map',
map:'HK',
mapType: 'HK', // 自定义扩展图表类型
data:areaName
}
]
});
});
//记录上一级
curMap={
mapName:data
};
}
function getLine()
{
option={
title:{
text:'全国疫情曲线图'
},
tooltip:{
trigger:'axis'
},
legend:{
data:['累计确诊','今日确诊','累计死亡','累计治愈']
},
xAxis:{
type: 'category',
data:lineName
},
yAxis: {
type: 'value'
},
series:[
{
name:'累计确诊',
type:'line',
data:lineConfirm
},
{
name:'今日确诊',
type:'line',
data:lineConfirmAdd
},
{
name:'累计死亡',
type:'line',
data:lineDead
},
{
name:'累计治愈',
type:'line',
data:lineHeal
}
]
};
line_myCharts.setOption(option);
}
getArea('china')
getLine();
//下钻
myCharts.on('click',function(params){
mapStack.push({
mapName:curMap.mapName
});
getArea(params.name)
})
//返回上一级
myCharts.getZr().on('click', function (event) {
if (!event.target) {
var map = mapStack.pop();
getArea(map.mapName);
}
});
echarts.connrct([myCharts,line_myCharts]);
</script>
</body>
</html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">.line{float:left;}.main{float:right}</style></head><body><div id="line" class="line" style="width:50%;height:500px;"></div><div id="main" class="main" style="width:50%;height:500px;"></div><script type="text/javascript" src="js/echarts.js"></script><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">dom=document.getElementById("main");line_dom=document.getElementById("line");myCharts=echarts.init(dom);line_myCharts=echarts.init(line_dom);var areaName;//地图var mapStack=[];var curMap ={};//折线图var line;var lineName;var lineConfirm;var lineConfirmAdd;var lineHeal;var lineDead; myCharts.showLoading(); $.ajax({ url:'servlet', type:'post', dataType:'text', async: false, success:function e(data){ alert("success ajax"); areaName=$.parseJSON(data); }, error:function test(){ alert("false ajax"); } }) $.ajax({ url:'lineServlet', type:'post', dataType:'text', async: false, success:function e(data){ alert("success ajax"); line=$.parseJSON(data); lineName=line[0].city; lineConfirm=line[0].confirm; lineConfirmAdd=line[0].nowConfirm; lineHeal=line[0].heal; lineDead=line[0].dead; }, error:function test(){ alert("false ajax"); } }) myCharts.hideLoading(); function getArea(data){myCharts.showLoading();//获得json$.get('json/'+data+'.json', function (geoJson) { myCharts.hideLoading(); echarts.registerMap('HK', geoJson);
myCharts.setOption({ tooltip: { trigger: 'item', formatter:function(params) { for(var i=0;i<areaName.length;i++) { if(params.name==areaName[i].name) { return areaName[i].name+'<br/>' +"新增确诊"+areaName[i].value+'<br/>' +"累计确诊"+areaName[i].confirm+'<br/>' +"累计死亡"+areaName[i].dead+'<br/>' +"累计治愈"+areaName[i].heal; } } } }, visualMap: { min: 0, max: 10, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, series: [ { type: 'map', map:'HK', mapType: 'HK', // 自定义扩展图表类型 data:areaName } ] });});//记录上一级 curMap={ mapName:data }; }function getLine(){option={title:{text:'全国疫情曲线图'},tooltip:{trigger:'axis'},legend:{data:['累计确诊','今日确诊','累计死亡','累计治愈']},xAxis:{type: 'category',data:lineName}, yAxis: { type: 'value' },series:[{name:'累计确诊',type:'line',data:lineConfirm},{name:'今日确诊',type:'line',data:lineConfirmAdd},{name:'累计死亡',type:'line',data:lineDead},{name:'累计治愈',type:'line',data:lineHeal}]};line_myCharts.setOption(option);}getArea('china')getLine();//下钻myCharts.on('click',function(params){mapStack.push({ mapName:curMap.mapName }); getArea(params.name)})//返回上一级myCharts.getZr().on('click', function (event) { if (!event.target) { var map = mapStack.pop(); getArea(map.mapName); }});echarts.connrct([myCharts,line_myCharts]);</script></body></html>
浙公网安备 33010602011771号