[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区

[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区

2017-04-17 14:12:09  阅读数 4162
 https://blog.csdn.net/aglne/article/details/70210379

  最近发生了很多事情，去到了一个新环境学习。但是不论在哪里，我都需要不忘初心，坚持做自己喜欢的事情，在CSDN写博客、教学、爱娜、生活等等。
        这篇文章主要是通过Echarts可视化介绍入门知识、中国地图和贵州地区各省份的数据分析。其中贵州地图才是这篇文章的核心内容。这是一篇入门文章，希望对您有所帮助，如果文章中存在不足之处，还请海涵~
        官网地址：http://echarts.baidu.com/index.html

 

一. 入门介绍-第一张图

        强烈推荐大家阅读官网的教程进行学习，这里的入门就参考官网内容了。
        官网地址：http://echarts.baidu.com/tutorial.html

        ECharts 特性介绍
        ECharts，一个纯 JavaScript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

        ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

        ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。ECharts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。

        Echarts入门代码
        ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。
        1.首先下载最新的 echarts.min.js 文件
        下载地址：http://echarts.baidu.com/download.html

 

        2.在Script中调用该文件，核心代码格式如下：

[html] view plain copy
 
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <!-- 引入 ECharts 文件 -->  
  6.     <script src="echarts.min.js"></script>  
  7. </head>  
  8. </html>  
        3.绘制图形
        下面代码参考我的文章：Echarts字体和线条颜色设置操作笔记
[html] view plain copy
 
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <title>ECharts</title>    
  6.     <!-- 引入 echarts.js -->    
  7.     <script src="echarts.min.js"></script>    
  8. </head>    
  9.     
  10. <body>    
  11.     <!-- 为ECharts准备一个具备大小的Dom -->    
  12.     <div align="left" id="main" style="width: 900px;height:500px;"></div>    
  13.     <script type="text/javascript">    
  14.         //基于准备好的dom，初始化echarts实例    
  15.         var myChart = echarts.init(document.getElementById('main'));    
  16.        
  17.         option = {    
  18.             title: {    
  19.                 text: '2016年上半年全国规模以上工业企业用水情况（单位：亿立方米）',     
  20.                 subtext: '数据来源：国家统计局',    
  21.                 x: 'center',    
  22.             },    
  23.             tooltip : {    
  24.                 trigger: 'axis',    
  25.                 axisPointer : {           
  26.                     //坐标轴指示器，坐标轴触发有效  
  27.                     //默认为直线，可选为：'line' | 'shadow'  
  28.                     type : 'shadow'             
  29.                 }    
  30.             },    
  31.             legend: {    
  32.                 orient: 'vertical',    
  33.                 x: 'left',    
  34.                 y:"top",    
  35.                 padding:50,       
  36.                 data: ['用水量', '减少量',]    
  37.             },    
  38.             grid: {    
  39.                 left: '10',    
  40.                 right: '60',    
  41.                 bottom: '3%',    
  42.                 height: '30%',      
  43.                 top: '20%',    
  44.                 containLabel: true    
  45.             },    
  46.             xAxis:  {    
  47.                 type: 'value',    
  48.                 //设置坐标轴字体颜色和宽度    
  49.                 axisLine:{    
  50.                     lineStyle:{    
  51.                         color:'yellow',    
  52.                         width:2    
  53.                     }    
  54.                 },    
  55.             },    
  56.             yAxis: {    
  57.                 type: 'category',      
  58.                 axisLine:{    
  59.                     lineStyle:{    
  60.                         color:'yellow',    
  61.                         width:2    
  62.                     }    
  63.                 },    
  64.                 data: ['东部地区','中部地区','西部地区',]    
  65.             },    
  66.             series: [    
  67.             {    
  68.                 name: '用水量',    
  69.                 type: 'bar',    
  70.                 stack: '总量',    
  71.                 label: {    
  72.                     normal: {    
  73.                         show: true,    
  74.                         position: 'insidelift'    
  75.                     }    
  76.                 },    
  77.                 data: [109.2, 48.2, 41 ]    
  78.             },    
  79.             {    
  80.                 name: '减少量',    
  81.                 type: 'bar',    
  82.                 stack: '总量',    
  83.                 label: {    
  84.                     normal: {    
  85.                         show: true,    
  86.                         position: 'insidelift'    
  87.                     }    
  88.                 },    
  89.                 data: [1.638, 1.0122, 1.025]    
  90.             },    
  91.         ]    
  92.     };    
  93.     myChart.setOption(option);    
  94.     </script>    
  95. </body>    
  96. </html>   
        运行结果如下图所示：



 

 

二. 绘制中国地图

        下面是绘制中国地图的代码，网上非常常见，下面简单介绍。
        官方模块地址：http://echarts.baidu.com/download-map.html


        然后下载中国地图的JS或JSON文件，文件名为china.js和china.json。
        代码如下，核心代码是获取id为main的div模块：
        var chart = echarts.init(document.getElementById('main'));
[html] view plain copy
 
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>ECharts</title>  
  6.      
  7. </head>  
  8.   
  9. <body>  
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
  11.     <div id="main" style="width: 600px;height:400px;"></div>  
  12.     <!-- 引入 echarts.js -->  
  13.     <script src="echarts.min.js"></script>  
  14.     <script src="china.js"></script>  
  15.     <script>  
  16.     var chart = echarts.init(document.getElementById('main'));  
  17.     chart.setOption({  
  18.         series: [{  
  19.             type: 'map',  
  20.             map: 'china'  
  21.         }]  
  22.     });  
  23.     </script>  
  24.     </div>  
  25. </body>  
  26. </html>  
        运行结果如下：

 

 

三. 绘制贵州地图

        这是这篇文章的重点是绘制贵州相关的地图，具体步骤如下。
        从官方下载贵州省的guizhou.js和guizhou.json文件
        官方模块地址：http://echarts.baidu.com/download-map.html
        代码如下：

[html] view plain copy
 
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>ECharts</title>  
  6.      
  7. </head>  
  8.   
  9. <body>  
  10.     <!-- 为ECharts准备一个具备大小的Dom -->  
  11.     <div id="main" style="width: 600px;height:400px;"></div>  
  12.     <!-- 引入 echarts.js -->  
  13.     <script src="echarts.min.js"></script>  
  14.       <script src="guizhou.js"></script>  
  15.     <script>  
  16.      var myChart = echarts.init(document.getElementById('main'));  
  17.      var option = {  
  18.       title: {  
  19.        text : '贵州地图',  
  20.        subtext : '各市区显示'  
  21.       },  
  22.       series: [  
  23.         {  
  24.             name: '数据名称',  
  25.         type: 'map',  
  26.         mapType: '贵州',  
  27.         selectedMode : 'single',  
  28.         itemStyle:{  
  29.              normal:{label:{show:true}},  
  30.              emphasis:{label:{show:true}}  
  31.             },  
  32.             data:[  
  33.              {name: '贵阳市',value: Math.round(Math.random()*1000)},  
  34.              {name: '遵义市',value: Math.round(Math.random()*1000)},  
  35.              {name: '六盘水市',value: Math.round(Math.random()*1000)},  
  36.              {name: '毕节市',value: Math.round(Math.random()*1000)},  
  37.              {name: '铜仁市',value: Math.round(Math.random()*1000)},  
  38.              {name: '安顺市',value: Math.round(Math.random()*1000)},  
  39.              {name: '黔西南布依族苗族自治州',value: Math.round(Math.random()*1000)},  
  40.              {name: '黔东南苗族侗族自治州',value: Math.round(Math.random()*1000)},  
  41.              {name: '黔南布依族苗族自治州',value: Math.round(Math.random()*1000)},    
  42.             ]  
  43.         }]  
  44.       };  
  45.      myChart.setOption(option);      
  46.     </script>  
  47.     </div>  
  48. </body>  
  49. </html>  
        运行结果如下所示，其中每个省份对应的市州可以在json文件中查找。

核心代码如下，它即可显示贵州省地图。
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
           text : '贵州地图',
           subtext : '各市区显示'
      },
      series: [
        {
            name: '数据名称',
            type: 'map',
            mapType: '贵州',
            selectedMode : 'single',
            itemStyle:{
                 normal:{label:{show:true}},
                 emphasis:{label:{show:true}}
            }
        }]
      };
     myChart.setOption(option);  
</script>



四. 推荐地图博文

 

        最后推荐一些文章作为在线笔记，全是一些地图操作，希望对你有所帮助。
        1.官网地图浏览：http://echarts.baidu.com/demo.html#map-province

 

        2.枯鸦专栏：百度Echarts 全国省市地图 动态数据图形报表
           程序媛专栏： ECHARTS-MAP的使用: 中国地图及省份边界的查看



        3.hcy12321专栏：一个让echarts中国地图包含省市轮廓的技巧

 

 

        4.liuchonge专栏：Echarts使用二：全国地图与各省市地图联动


        5.dhforsite专栏：echarts 某省下钻某市地图

 
        6.xianwen专栏：ECharts（中国地图篇）的使用
 
 
        7.little2专栏：echarts3 使用总结

 
 
 

echarts 根据经纬度坐标在地图上描点

2019-08-16 08:40:00  阅读数 165
 
原文链接：http://www.cnblogs.com/heyiming/p/11361666.html
var mapData = [
{'latitude':30.67, 'longitude':104.07},
{'latitude':34.76, 'longitude':113.65},
{'latitude':29.65, 'longitude':91.13},
{'latitude':43.82, 'longitude':87.62}
]
 
series: [
//根据经纬度在地图上描点
{
type: 'effectScatter',
coordinateSystem: 'geo',
// animation: true,
rippleEffect: {
brushType: 'stroke'
},
symbolSize: function (val,params) {
return 30;
},
data: dmtData.map(function (itemOpt) {
return {
// name: itemOpt.name,
value: [
itemOpt.longitude,
itemOpt.latitude,
// itemOpt.value //数量
],
label: {
emphasis: {
position: 'right',
show: false
}
},
itemStyle: {
normal: {
// color: itemOpt.color //色值
color: RandomItemStylecolor()
}
}
};
}),
symbolSize: function (val) {
return 5;//描点的大小
},
}
]
 
-----------------------------------------------------------------------------------------------------
 

javaScript向对象数组赋值 存储以下格式的数据：

var mapData = [
{'latitude':30.67, 'longitude':104.07 , 'name':'四川', 'value':1, 'color':'#0394d9'},
{'latitude':34.76, 'longitude':113.65 , 'name':'河南', 'value':3, 'color':'#d94d02'},
{'latitude':29.65, 'longitude':91.13 , 'name':'西藏', 'value':4, 'color':'#b42fd5'},
{'latitude':43.82, 'longitude':87.62 , 'name':'新疆', 'value':5, 'color':'#0394d9'},
]

 

 

//改变成动态数据

$.ajax({
url: "xxxx.do",
type: "POST",
dataType: "json",
data: {
　　treeId:86
},
success: function (data) {


var dmtData = [];

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

latitude= data[i].latitude;
longitude= data[i].longitude;
dmtData.push({latitude:latitude,longitude:longitude});
}

}

}）

转载于:https://www.cnblogs.com/heyiming/p/11361666.html



posted on 2019-11-19 13:19  曹明  阅读(1644)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 曹明
Powered by .NET 9.0 on Kubernetes