echarts实现上海地域PM值（map、timeline）
生活随笔
收集整理的這篇文章主要介紹了
echarts实现上海地域PM值（map、timeline）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>echarts圖形插件使用</title>
<script src="jquery.min.js"></script>
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/2-0-8/esl.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
// 路徑配置
require.config({
packages: [{
name: 'echarts',
location: 'echarts/src',
main: 'echarts'},
{name: 'zrender',
location: 'echarts/zrender/src', // zrender與echarts在同一級目錄
main: 'zrender'
}
]
});
require(
[
'echarts',
'echarts/chart/map' // 使用柱狀圖就加載bar模塊，按需加載
],
function (echarts) {
var myChart = echarts.init(document.getElementById('main'));
var option = {
timeline:{
data:[
'2002-01-01','2003-01-01'
],
label : {
formatter : function(s) {
return s.slice(0, 4);
}
},
autoPlay : true,
playInterval : 1000
},
options:[
{
title: {
text : '上海地圖',
subtext : '-。-'
},
tooltip : {
trigger: 'item',
formatter: function(a){
return a[2];
}
},
legend: {
orient: 'vertical',
x:'right',
data:['數據名稱']
},
dataRange: {
x: 'left',
y: 'bottom',
splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（自定義label）'},
{start: 5, end: 5, label: '5（自定義特殊顏色）', color: 'black'},
{end: 10}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'上海': true
}
},
title : {'text':'2002上海PM均值'},
series : [
{
type:'map',
mapType: '上海',
//'selectedMode' : 'single',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
'data': [{name: '崇明縣',value: Math.round(Math.random()*1000)},
{name: '寶山區',value: Math.round(Math.random()*1000)},
{name: '嘉定區',value: Math.round(Math.random()*1000)},
{name: '青浦區',value: Math.round(Math.random()*1000)},
{name: '楊浦區',value: Math.round(Math.random()*1000)},
{name: '虹口區',value: Math.round(Math.random()*1000)},
{name: '閘北區',value: Math.round(Math.random()*1000)},
{name: '普陀區',value: Math.round(Math.random()*1000)},
{name: '靜安區',value: Math.round(Math.random()*1000)},
{name: '黃浦區',value: Math.round(Math.random()*1000)},
{name: '盧灣區',value: Math.round(Math.random()*1000)},
{name: '長寧區',value: Math.round(Math.random()*1000)},
{name: '徐匯區',value: Math.round(Math.random()*1000)},
{name: '浦東新區',value: Math.round(Math.random()*1000)},
{name: '松江區',value: Math.round(Math.random()*1000)},
{name: '閔行區',value: Math.round(Math.random()*1000)},
{name: '金山區',value: Math.round(Math.random()*1000)},
{name: '奉賢區',value: Math.round(Math.random()*1000)},
{name: '南匯區',value: Math.round(Math.random()*1000)}]
}
]
},
{
title : {'text':'2003上海PM均值'},
series : [
{'data': [{name: '崇明縣',value: Math.round(Math.random()*1000)},
{name: '寶山區',value: Math.round(Math.random()*1000)},
{name: '嘉定區',value: Math.round(Math.random()*1000)},
{name: '青浦區',value: Math.round(Math.random()*1000)},
{name: '楊浦區',value: Math.round(Math.random()*1000)},
{name: '虹口區',value: Math.round(Math.random()*1000)},
{name: '閘北區',value: Math.round(Math.random()*1000)},
{name: '普陀區',value: Math.round(Math.random()*1000)},
{name: '靜安區',value: Math.round(Math.random()*1000)},
{name: '黃浦區',value: Math.round(Math.random()*1000)},
{name: '盧灣區',value: Math.round(Math.random()*1000)},
{name: '長寧區',value: Math.round(Math.random()*1000)},
{name: '徐匯區',value: Math.round(Math.random()*1000)},
{name: '浦東新區',value: Math.round(Math.random()*1000)},
{name: '松江區',value: Math.round(Math.random()*1000)},
{name: '閔行區',value: Math.round(Math.random()*1000)},
{name: '金山區',value: Math.round(Math.random()*1000)},
{name: '奉賢區',value: Math.round(Math.random()*1000)},
{name: '南匯區',value: Math.round(Math.random()*1000)}]}
]
}
]
};
myChart.setOption(option);
}
);
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的echarts实现上海地域PM值（map、timeline）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电容器图片及型号图片_电容电阻图片大全(
- 下一篇： 【spring5】spring5.x概览