echarts 移动端地图数据可视化开发教程
如上效果图：
以下未代码：
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0″ />
<meta name=”format-detection” content=”telephone=no”>
<title>ECharts地图选择器</title>
<script src=”../../static/awareness_day/js/jquery.min.js”></script>
</head>
<body>
<!– 为ECharts准备一个具备大小（宽高）的Dom –>
<div id=”main” style=”height:26rem”></div>
<script src=”../../static/awareness_day/js/echarts.js”></script>
<script type=”text/javascript”>
// 路径配置
require.config({
paths: {
echarts: \’http://echarts.baidu.com/build/dist\’
}
});
// 使用
require(
[
\’echarts\’,
\’echarts/chart/map\’ // 使用柱状图就加载bar模块，按需加载
],
function(ec) {
var myChart = ec.init(document.getElementById(\’main\’));
// 过渡———————
// myChart.showLoading({
// text: \’正在努力的读取数据中…\’,
// effect: \’whirling\’
// });
// ajax getting data……………
var colorbg;
var selected;
var option = {
backgroundColor: \’#000\’,
borderWidth: 10,
borderColor: \’#ffffff\’,
dataRange: {
min: 0,
max: 1000,
color: [\’rgba(255,222,0,1)\’, \’rgba(110,0,0,1)\’],
text: [\’高\’, \’低\’],
splitNumber: 0,
calculable: false,
show: false,
},
series: [{
name: \’Map\’,
type: \’map\’,
mapLocation: {
x: \’4%\’,
y: \’8%\’,
height: 400
},
selectedMode: \’multiple\’,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: \’#9c1a1a\’,
color: \’#6e0000\’,
label: {
show: false
}
},
emphasis: { // 也是选中样式
borderWidth: 1,
borderColor: \’#a95901\’,
color: colorbg,
label: {
show: false,
textStyle: {
color: \’#fff\’
}
}
},
},
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: \’甘肃\’,
// selected: false
// },
{
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)
},
{
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)
},
],
},
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>
版权声明：本文为xiaohuizhang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。