地圖常見效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.min.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<div style="width: 800px;height: 600px"></div>
</body>
</html>
<script>
var mcharts=echarts.init(document.querySelector('div'))
$.get('json/china.json',function (ret) {
//ret是中國各個省份的矢量地圖資料
echarts.registerMap('chinaMap', ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam:true,//設定允許縮放及拖動
label:{
show:true,//顯示資料
},
zoom:1,//設定初始化縮放比例
center:[87,43]//設定地圖中心點
}
}
mcharts.setOption(option)
})
</script> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var hwScore = [80, 90, 80, 82, 90]
var zxScore = [70, 82, 75, 70, 78]
var dataMax = [
{
name: '易用性', max: 100
},
{
name: '功能', max: 100
},
{
name: '拍照', max: 100
},
{
name: '跑分', max: 100
},
{
name: '續航', max: 100
}
]
var mCharts = echarts.init(document.querySelector("div"))
var option = {
radar: {
indicator: dataMax
},
series: [
{
type: 'radar',
data: [
{
name: '華為手機1',
value: hwScore
},
{
name: '中興手機1',
value: zxScore
}
]
}
]
}
mCharts.setOption(option)
</script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div style="width:600px;height:800px "></div>
</body>
</html>
<script>
var mcharts=echarts.init(document.querySelector('div'))
var option={
series:[
{
type:'gauge',
data:[
{value:99,
itemStyle:{
color:'red',
}
},
{value:66}
],
min:60,
}
]
}
mcharts.setOption(option)
</script> ![Ajax——模闆引擎[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)