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>