深入浅出ECharts系列（一）地图+散点图

深入浅出ECharts系列（一）

1. 目标

本次教程的目标是实现“微博签到点亮中国”散点图，实现结果如图：

2. 准备工作

a)         首先下载ECharts插件，你可以根据自己的实际需求选择你想要下载的版本，也可以自己定制相应功能的版本，下面附上插件的下载地址：

http://echarts.baidu.com/download.html

我们下载完整版为大家进行演示。

b)         因为本次教程涉及地图，所以需要引入地图资源，下面附上中国地图JS地址：

http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js

我们选择中国地图。

c)         下载微博签到数据，用于数据展示，下面附上下载地址：

http://echarts.baidu.com/gallery/data/asset/data/weibo.json

将数据保存为weibo.json即可。

3. 正式开始

首先，我新建了一个MVC4项目，将下载的文件放到对应的位置：

然后新建一个控制器和对应的视图，添加对这些文件的引用，同时引用最新版的JQuery插件，然后新增一个id为main的div做为地图的容器来展现地图。如图：

接着开始写JS脚本来实现我们想要的效果：

通过 echarts.init方法初始化一个 echarts实例并通过 setOption方法生成散点图

<script>

//初始化

var myChart = echarts.init(document.getElementById('main'));

myChart.showLoading();//加载数据前显示的动画效果

//读取微博JSON数据

$.getJSON('/Json/weibo.json', function (weiboData) {

myChart.hideLoading();//加载数据完成后隐藏动画

//定义一个Data方法将读取的微博数据根据经纬度组合成新的JSON，用于显示

Data = function (index) {

data = weiboData[index];

var px = data[0] / 1000;

var py = data[1] / 1000;

var res = [[px, py]];

for (var i = 2; i < data.length; i += 2) {

var dx = data[i] / 1000;

var dy = data[i + 1] / 1000;

var x = px + dx;

var y = py + dy;

res.push([x, y, 1]);

px = x;

py = y;

}

return res;

};

//设置参数

myChart.setOption(

option = {

backgroundColor: '#404a59',

title: {         //标题组件

text: '微博签到数据点亮中国',

subtext: 'From ThinkGIS',

sublink: 'http://www.thinkgis.cn/public/sina',

left: 'center',

top: 'top',

textStyle: {

color: '#fff'

}

},

legend: {        //图例组件

left: 'left',

data: ['强', '中', '弱'],

textStyle: {

color: '#ccc'

}

},

geo: {           //地理坐标系组件

name: '强',

type: 'scatter',

map: 'china',

label: {

emphasis: {

show: false

}

},

itemStyle: {

normal: {

areaColor: '#323c48',

borderColor: '#111'

},

emphasis: {

areaColor: '#2a333d'

}

}

},

series: [{              //系列列表

name: '弱',

type: 'scatter',

coordinateSystem: 'geo',

symbolSize: 1,

large: true,

itemStyle: {

normal: {

shadowBlur: 2,

shadowColor: 'rgba(37, 140, 249, 0.8)',

color: 'rgba(37, 140, 249, 0.8)'

}

},

data: Data(0)

}, {

name: '中',

type: 'scatter',

coordinateSystem: 'geo',

symbolSize: 1,

large: true,

itemStyle: {

normal: {

shadowBlur: 2,

shadowColor: 'rgba(14, 241, 242, 0.8)',

color: 'rgba(14, 241, 242, 0.8)'

}

},

data: Data(1)

}, {

name: '强',

type: 'scatter',

coordinateSystem: 'geo',

symbolSize: 1,

large: true,

itemStyle: {

normal: {

shadowBlur: 2,

shadowColor: 'rgba(255, 255, 255, 0.8)',

color: 'rgba(255, 255, 255, 0.8)'

}

},

data: Data(2)

}]

});

});

</script>

具体参数含义可参考,不再赘述：

http://echarts.baidu.com/option.html#title

4. 最终效果

更多精彩文章请关注 =》 我爱学框架