echarts画中国地图！

今天，我们迎来了冬至节气，大家今天吃了什么呀？我想着今天冬至，应该吃一碗饺子，于是去了一家饺子馆，到了那里人惊呆了，真的太多人了！！我随手拍了一张，氛围十分不错，有过年的味道了。在这里插入图片描述
上图为武汉某饺子馆冬至状况哈哈哈。
今天上午我看到中国天气网发了一张冬至吃货地图，于是想用echarts画一个。
直接上代码！！！
css代码：


.body{
    height: 100%; 
    background-color: #10aeb5;
    
}

.c1{
    background: #f8f9fa;
    width:750px;
    height: 580px;
    left: 50%;
    margin-left: -375px;
    position:absolute;

}

js代码：

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        text: '冬至吃货地图',
       subtext:'数据参考中国天气网',
        left: 'center',
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['人数']
    },
    visualMap: {
        type: 'piecewise',
        pieces: [
            
            {value:3,label: '过节就吃饺子区'},
            {value:2,label: '御寒暖胃羊汤区'},
            {value:1,label: '甜甜蜜蜜汤圆区'},
            {value:0,label: '什么好吃吃什么区'}
        ],
        color: ['#d74f3d','#e0620d','#ea9518','#f3ca7e']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    roamController: {
        show: true,
        left: 'right',
        mapTypeControl: {
            'china': true
        }
    },
    series: [
        {
            name: '冬至吃什么',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                  show: true,
                  position: 'right',

                  formatter: '{b}',
                },
                textStyle: {
                  color: "#000000"
                }
              },
            data: [
                {name: '湖北',value: 0},
                {name: '湖南',value: 0},
                {name: '江西',value: 0},
                {name: '安徽',value: 0},
                {name: '云南',value: 1},
                {name: '广东',value: 1},
                {name: '福建',value: 1},
                {name: '广西',value: 1},
                {name: '浙江',value: 1},
                {name: '江苏',value: 1},
                {name: '上海',value: 1},
                {name: '海南',value: 1},
                {name: '香港',value: 1},
                {name: '澳门',value: 1},
                {name: '台湾',value: 1},
                {name: '贵州',value: 2},
                {name: '重庆',value: 2},
                {name: '宁夏',value: 2},
                {name: '四川',value: 2},
                {name: '新疆',value: 3},
                {name: '西藏',value: 3},
                {name: '青海',value: 3},
                {name: '甘肃',value: 3},
                {name: '内蒙古',value: 3},
                {name: '陕西',value: 3},
                {name: '北京',value: 3},
                {name: '辽宁',value: 3},
                {name: '黑龙江',value: 3},
                {name: '哈尔滨',value: 3},
                {name: '山西',value: 3},
                {name: '山东',value: 3},
                {name: '河北',value: 3},
                {name: '河南',value: 3},
                {name: '吉林',value: 3},
                {name: '天津',value: 3},
                
            ]
        }
    ]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}

html代码：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <style type="text/css"> 
        @import url(hello.css);
        </style> 
        <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_2284081_rm2uymej08.css">
   </head>
   <body class="body">
      
    <div class='c1' >
       <div id="container" style="height: 100%"></div>
       <div style='padding-left: 200px;top:250px;position:absolute'>
         <i class="iconfont icon-jiaozi"style='font-size:80px;,z-index:1'></i>
      </div>
      <div style='padding-left: 420px;top:230px;position:absolute'>
         <i class="iconfont icon-jiaozi"style='font-size:80px;,z-index:1'></i>
      </div>
      <div style='padding-left: 500px;top:150px;position:absolute'>
         <i class="iconfont icon-jiaozi"style='font-size:80px;,z-index:1'></i>
      </div>
      <div style='padding-left: 350px;top:320px;position:absolute'>
         <i class="iconfont icon-nongtang"style='font-size:80px;,z-index:1'></i>
      </div>
      <div style='padding-left: 430px;top:320px;position:absolute'>
         <i class="iconfont icon-yu"style='font-size:80px;,z-index:1'></i>
      </div>
      <div style='padding-left: 500px;top:320px;position:absolute'>
         <i class="iconfont icon-tangyuan_huaban"style='font-size:80px;,z-index:1'></i>
      </div>
      <div style='padding-left: 380px;top:400px;position:absolute'>
         <i class="iconfont icon-tangyuan_huaban"style='font-size:80px;,z-index:1'></i>
      </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Fr1Ob4gNd0Fc5ufx12XbNdKiIT7mb89c"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript" src="hello.js"></script>
       
   </body>
</html>

效果图：
在这里插入图片描述
*数据参考中国天气网的一篇文章。冬至大如年吃货要过节，吃货地图请对号入座
今天吃了一大碗羊肉水饺，也是格外的香啊！大家冬至一般都吃什么呀，你们那里有特殊的习俗吗？评论区分享一下吧。

echarts画中国地图！

猜你喜欢