jy
/
flask-map


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <!--script src="..\static\js\echarts.min.js"></script-->
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
<!--    <script src="/static/js/bmap.js" type="text/javascript" charset="utf-8"></script>-->
<!--    <script src="/static/js/china.js" type="text/javascript" charset="utf-8"></script>-->
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

      // 基于准备好的dom，初始化echarts实例


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

      option = {

       title: {

           text: '全国地图',

           subtext: 'data from china.js',

           sublink: 'ireader.work',

           left: 'center'

       },

       geo:{

          map:'china'

       },

       tooltip : {

           trigger: 'item'

       },


   };

       // 使用刚指定的配置项和数据显示图表。

       myChart.setOption(option);


      // 使用刚指定的配置项和数据显示图表。

      myChart.hideLoading();

      $.ajax({

       url:'/getjson10',

       result:{},

       type:'GET',

       dataType:'json',

       success:function(result){


      //result=[{'name': '北京', 'value': 14113.6}, {'name': '天津', 'value': 9224.46}, {'name': '河北', 'value': 20394.26}, {'name': '山西', 'value': 9200.86}, {'name': '内蒙古', 'value': 11672.0}, {'name': '辽宁', 'value': 18457.3}, {'name': '吉林', 'value': 8667.58}, {'name': '黑龙江', 'value': 10368.6}, {'name': '上海', 'value': 17165.98}, {'name': '江苏', 'value': 41425.48}, {'name': '浙江', 'value': 27722.31}, {'name': '安徽', 'value': 12359.33}, {'name': '福建', 'value': 14737.12}, {'name': '江西', 'value': 9451.26}, {'name': '山东', 'value': 39169.92}, {'name': '河南', 'value': 23092.36}, {'name': '湖北', 'value': 15967.61}, {'name': '湖南', 'value': 16037.96}, {'name': '广东', 'value': 46013.06}, {'name': '广西', 'value': 9569.8539}, {'name': '海南', 'value': 2064.5}, {'name': '重庆', 'value': 7925.58}, {'name': '四川', 'value': 17185.48}, {'name': '贵州', 'value': 4602.16}, {'name': '云南', 'value': 7224.18}, {'name': '西藏', 'value': 507.46}, {'name': '陕西', 'value': 10123.48}, {'name': '甘肃', 'value': 4120.75}, {'name': '青海', 'value': 1350.43}, {'name': '宁夏', 'value': 1689.65}, {'name': '新疆', 'value': 5437.47}]

      //result=[{'region': '北京', 'GDP': 14113.6}, {'region': '天津', 'GDP': 9224.46}, {'region': '河北', 'GDP': 20394.26}, {'region': '山西', 'GDP': 9200.86}, {'region': '内蒙古', 'GDP': 11672.0}, {'region': '辽宁', 'GDP': 18457.3}, {'region': '吉林', 'GDP': 8667.58}, {'region': '黑龙江', 'GDP': 10368.6}, {'region': '上海', 'GDP': 17165.98}, {'region': '江苏', 'GDP': 41425.48}, {'region': '浙江', 'GDP': 27722.31}, {'region': '安徽', 'GDP': 12359.33}, {'region': '福建', 'GDP': 14737.12}, {'region': '江西', 'GDP': 9451.26}, {'region': '山东', 'GDP': 39169.92}, {'region': '河南', 'GDP': 23092.36}, {'region': '湖北', 'GDP': 15967.61}, {'region': '湖南', 'GDP': 16037.96}, {'region': '广东', 'GDP': 46013.06}, {'region': '广西', 'GDP': 9569.8539}, {'region': '海南', 'GDP': 2064.5}, {'region': '重庆', 'GDP': 7925.58}, {'region': '四川', 'GDP': 17185.48}, {'region': '贵州', 'GDP': 4602.16}, {'region': '云南', 'GDP': 7224.18}, {'region': '西藏', 'GDP': 507.46}, {'region': '陕西', 'GDP': 10123.48}, {'region': '甘肃', 'GDP': 4120.75}, {'region': '青海', 'GDP': 1350.43}, {'region': '宁夏', 'GDP': 1689.65}, {'region': '新疆', 'GDP': 5437.47}]

            myChart.setOption({

              backgroundColor: '#FFFFFF',

              title: {

                text: '地域分布',

                top: 14,

                left: 14,

                textStyle: {

                  borderColor: '#333333',

                  fontWeight: 400,

                  fontFamily: 'PingFangSC-Regular, PingFang SC',

                  color: '#666666',

                  fontSize: 14

                }

              },

              tooltip: {

                trigger: 'item',

                show: true,

                formatter: function(params) {

                  //return params.data['region'] + '：' + params.data['GDP'] + '%'

                  return params.name + '：' + params.data['value']

                }

              },

              // 左侧小导航图标

              visualMap: {

                show: false,

                x: 'left',

                y: 'center',

                min: 0,

                max: 50000,

                color: ['#0019ff', '#ffffff']

              },

              // 配置属性

              series: [{

                name: '数据',

                type: 'map',

                mapType: 'china',

                roam: false,

                label: {

                  normal: {

                    show: false // 省份名称

                  },

                  emphasis: {

                    show: false

                  }

                },

                itemStyle: {

                  normal: { // 未选中状态

                    // areaColor: 'red', // 南沙诸岛背景颜色

                    borderColor: 'transparent',

                    label: {

                      show: true// 显示名称

                    }

                  },

                  emphasis: { // 也是选中样式

                    areaColor: '#49FFE9',

                    shadowColor: 'rgba(0,0,0,0.2)',

                    shadowOffsetX: 0, // 阴影水平方向上的偏移距离

                    shadowOffsetY: 4, // 阴影垂直方向上的偏移距离

                    shadowBlur: 8, // 图形阴影的模糊大小。

                    label: {

                      show: true,

                      textStyle: {

                        color: '#fff'

                      }

                    }

                  }

                },

                data:result

              }]

            });

       },

       error:function (msg) {

         console.log(msg);

                   alert('系统发生错误');

            }

      })


    </script>
 </body>
 </html>