今天分享一个 echarts js 模板制作 地图 案例，有类似需求的筒子可以参考 O(∩_∩)O
需求：因为最近管理的全国各地代理服务器越来越多，有时上级需要看下我们的代理分布，比如带宽，比如供应商，如果用纯excel不是很直观，就套用了前端的Js模板，修改了些代码，填充部分值进去，就出来基本效果了。
上效果图：
基本上把全国各地的资源情况很直观的显示出来了，这里只填充了部分值，后期会将值存入mysql,并且用上ajax 来塞值，这里就列个基本的效果图。
5分钟上手echarts,官网教程：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 很简单的。
我修改的部分：
1.塞值填充
2.因为默认地图只能显示数字，这里通过formatter函数，进行了修改显示，可以显示文本非数值
3.完整核心代码 option 部分
计算
安全
数据库
网络和加速
企业服务
= {
: {
: : : }: {
: : (params) {
res = params.+myseries = .(i = i < myseries.i++) {
res+= myseries[i].(j=j<myseries[i]..j++){
(myseries[i].[j].==params.){
res+=+myseries[i].[j].+}
}
}
res}
}: {
: : :[]
}: {
: -: : : : []: }: {
: : : : : {
: {: }: {}: {}
}
}: [
{
: : : : : {
: {
: }: {
: }
}: {
: {
:::{:}: {
: }
}
}:[
{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: :}{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }
]
}{
: : : : {
: {
: }: {
: }
}:[
{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: :}{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }
]:{
:{
:{
: : (value)
{
value+}
}:{:}
}
}
}{
: : : : {
: {
: }: {
: }
}:[
{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: :}{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }
]
}{
: : : : {
: {
: }: {
: }
}:[
{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: :}{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }
]
}{
: : : : {
: {
: }: {
: }
}:[
{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: :}{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }
]
}{
: : : : {
: {
: }: {
: }
}:[
{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: :}{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }{: : }
]
}
]}这里没有详细讲解基础部分，官网前面5分钟入手教程就可以了。后期陆续更新 ajax,mysql 部分，基本效果就先到这里了。 (*^__^*) .......
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
