这次业务需要一张地理散点图，于是接触到了EChats，基于业务简单记录一下
最终实现的效果如图，DEMO地址：Examples - Apache ECharts (incubating)
（顺带吐槽Apache无孔不入）
实现这张散点图，需要接触到EChats的文档：ECharts Documentation
期间我需要的属性简单梳理一下（主属性下的子属性在ECharts Documentation都可以找到用法及注解）：
1.option：可以理解为图上所有元素的集合
option = {
backgroundColor: '#a7c0e0',
title: {
show: true,
text: '全国主要城市存货量',
subtext: 'data from CMS',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
return params.name + "-----货量：" + data.Data[params.dataIndex].value;
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: true
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#F4F2EF',
borderColor: '#C0DBB8'
},
emphasis: {
areaColor: '#C0DBB8'
}
}
},
series: series
};
backgroundColor：图例的底色
title：图例的标题（插一句闲话，小时候刚学title这个单词的时候觉得音同“抬头”，感觉和title的本意很贴切，于是这个词成了我小时候记住的为数不多的单词之一）
tooltip：浮窗，其中内容以及触发方式都可以自定义
geo：地图属性，包括地图范围，显示内容，颜色等都可以进行自定义
series：系列列表，我的理解是，如果option是图例的大致轮廓自定义，那series就是细化到最小模块的自定义，不要走开，分割线后更精彩
2.series：系列列表，每个系列通过 type 决定自己的图表类型
series.push(
{
name: 'Top 5',
type: 'effectScatter',
effectType: 'ripple',
coordinateSystem: 'geo',
//hoverAnimation: true,
showEffectOn: 'emphasis',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: function (params, ticket, callback) {
return "Top" + (params.dataIndex + 1) + "：" + params.name;
}
}
},
symbolSize: function (val) {
return 15;
},
itemStyle: {
normal: {
color: '#9370DB',
shadowBlur: 10,
shadowColor: '#333'
}
},
data: convertData(data.Data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5))
},
{
name: '',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
symbolSize: function (val) {
return 5;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
//label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// }
//},
itemStyle: {
normal: {
color: '#9370DB'
}
},
data: data.Data.map(function (dataItem) {
return {
name: dataItem.name,
value: geoCoordMap[dataItem.name],
};
})
});
下面由type为effectScatter的元素为例：
name：列表名，可写可不写
type：决定该列表的类型
effectType：特效类型，目前只有一种涟漪特效
coordinateSystem：该系列使用的坐标系，可选：
'cartesian2d'
使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。'polar'
使用极坐标系，通过 polarIndex 指定相应的极坐标组件'geo'
使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
hoverAnimation：鼠标事件，可以自定义触发形式，如点击，经过，焦点变动等
showEffectOn：配置何时显示特效，可选：
'render'绘制完成后显示特效。'emphasis'高亮（hover）的时候显示特效。
zlevel：图形的 zlevel 值，我的理解是在图例分层（图层显示优先级），zlevel值小的图形会被zlevel值大的图形覆盖。
rippleEffect：特效详细配置，见文档ECharts Documentation
label：每一个散点后的显示文字配置
symbolSize：散点大小配置
itemStyle：散点样式配置，包括颜色阴影等
data：数据，从后台得到，表示散点所代表的意义，根据业务灵活运用
3.注意事项
html页引用js
<script type="text/javascript" src="@Url.Content("~/Scripts/HeatMapForCMS/package/dist/echarts.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/HeatMapForCMS/package/dist/echarts-gl.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/HeatMapForCMS/package/dist/ecStat.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/HeatMapForCMS/package/dist/extension/dataTool.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/HeatMapForCMS/package/map/js/china.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/HeatMapForCMS/package/map/js/world.js")"></script>
html页代码：
<div class="row" style="height:680px">
<div id="container" style="width: 100%;height:100%;padding-left:5px;padding-right:5px"></div>
<script src="@Url.Content("~/Scripts/HeatMapForCMS/HeatMapForCMS.js")" charset="GB2312"></script>
</div>
.js文件代码：
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
这里值得一提的就是.js文件的引用顺序，因为echarts的初始化依赖于echarts.min.js等文件，所以我们自己的.js文件需要在最后引用（引用顺序可能是个很基础的东西，但新手容易踩坑，比如我）
EChats的玩法很多，不仅仅散点图，包括K线图热力图雷达图等等，这里不再赘述，送上网站链接：
Apache ECharts (incubating)echarts.apache.org
.js文件仓库链接：
echarts CDN by jsDelivrcdn.jsdelivr.net