漏刻有时数据可视化Echarts组件开发(27)：端午地图粽情之你的家乡吃甜还是吃咸？

端午地图粽情之你的家乡吃甜还是吃咸？

前言
Echarts创意来源
Echarts核心代码
- 1.引入外部文件
- 2.构建HTML容器
- 3.Echarts组件开发
- - 预置各省数据
  - 初始化DOM
  - 配置选项
  - geo组件
  - series组件
  - 自适应浏览器
  - 完整option选项配置代码

在这里插入图片描述

前言

中国各地对粽子的口味偏好存在一定的差异，一般可以从以下几个方面来概括：

甜咸口味的区别¹：北方地区一般偏向于咸口味，如北京、天津、山西等地的粽子多为五香肉、咸蛋黄等咸味，而南方地区则更加喜欢甜味，如浙江、江苏、上海等地的粽子多为红枣、豆沙、花生等甜味。
粽子材料的不同：由于地区气候和人们口味偏好的差异，在制作粽子时材料也存在差异。如北方的肉粽主要使用猪肉配以五香料等炖制，而南方的粽子则多使用糯米和糖果作为主要材料。
形状和包法：不同地区的粽子形状和包法也存在差异。如清明节吃的藕粽，浙江温州地区的粽子外形有些尖头，北京地区的豆沙粽盘型扁担，而苏州地区的粽子则包裹用大豆、红枣、桂花浸渍的糯米。

Echarts创意来源

在网上搜索端午素材，发现吃粽子的“甜咸之争”。素材应该是PSD设计出来的，那么用echarts能不能将其实现出来呢？

在这里插入图片描述

Echarts核心代码

1.引入外部文件

基于echarts,version4.0.4开发，部分语法与最新的5.x有所差异；

    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>

使用echarts绘制中国地图时，有以下几点需要注意：

数据格式：需要使用echarts规定的中国地图数据格式，包括省份名称、省份代码、各省份坐标等信息。可以通过echarts官网提供的geoJSON格式地图数据来实现。
区域命名：在使用echarts绘制中国地图时，省份名称应该与echarts官方提供的数据保持一致。如果数据不一致，可能会出现地图无法渲染、或者渲染不准确等情况。
地图样式：在使用echarts绘制中国地图时，需要根据实际需要调整地图的样式，比如调整省份填充颜色、字体样式等。
数据展示：如果需要在地图上展示数据，需要使用对应的数据格式与echarts支持的数据可视化方式，比如使用series-map组件等。
其他注意事项：在使用echarts绘制中国地图时，还需要注意地图数据的更新、数据精度、图表性能、完整性等方面。此外，要注意在使用地图时遵守版权和法律法规要求。

2.构建HTML容器

<div id="container"></div>

*, body {
            font-size: 12px;
        }

        body {
            height: 100%;
            margin: 0;
            background: #cbecd7 url("images/mainbg.jpg") center top;
        }

        #container {
            height: 100%;
            margin-left: 20%;
        }

3.Echarts组件开发

预置各省数据

将各省的名称、粽子的类型作为常量，其中value设置为1、2、3便于使用visualMap视觉映射组件。

    var data = [
    {name: '北京', value: 1, type: '红枣粽'},
        {name: '天津', value: 1, type: '红枣粽'},
        {name: '辽宁', value: 1, type: '蜜枣粽'},
        {name: '新疆', value: 1, type: '大枣粽'},
        {name: '山西', value: 1, type: '红枣粽'},
        {name: '青海', value: 1, type: '大枣粽'},
        {name: '宁夏', value: 1, type: '蛋黄肉粽'},
        {name: '陕西', value: 1, type: '红枣粽'},
        {name: '黑龙江', value: 1, type: '蜜枣粽'},
        {name: '河北', value: 1, type: '小枣粽'},
        {name: '内蒙古', value: 1, type: '蜜枣葡萄干粽'},
        {name: '吉林', value: 1, type: '蜜枣粽'},
        {name: '安徽', value: 2, type: '腊肉粽'},
        {name: '河南', value: 2, type: '蜜枣豆沙粽 肉粽'},
        {name: '重庆', value: 2, type: '腊肉蛋黄粽'},
        {name: '湖南', value: 2, type: '肉粽'},
        {name: '湖北', value: 2, type: '肉粽'},
        {name: '江西', value: 2, type: '肉粽'},
        {name: '甘肃', value: 2, type: '红枣粽'},
        {name: '四川', value: 2, type: '腊肉蛋黄粽'},
        {name: '西藏', value: 2, type: '大枣粽 肉粽'},
        {name: '山东', value: 2, type: '蜜枣豆沙粽'},
        {name: '江苏', value: 2, type: '蜜枣豆沙粽 肉粽'},
        {name: '浙江', value: 2, type: '蜜枣豆沙粽 肉粽'},
        {name: '上海', value: 2, type: '蜜枣豆沙粽 肉粽'},
        {name: '广东', value: 2, type: '豆沙粽 肉粽'},
        {name: '台湾', value: 2, type: '烧肉粽'},
        {name: '香港', value: 2, type: ''},
        {name: '澳门', value: 2, type: ''},
        {name: '广西', value: 3, type: '芋头鲜肉粽'},
        {name: '云南', value: 3, type: '火腿粽'},
        {name: '福建', value: 3, type: '烧肉粽'},
        {name: '海南', value: 3, type: '黑猪肉粽'},
        {name: '贵州', value: 3, type: '板栗粽'}
    ]

初始化DOM

   var myChart = echarts.init(document.getElementById("container"));

配置选项

     title: {
            text: '粽子咸甜口味分布',
            top: '10%',
            x: 'center',
            textStyle: {
                fontSize: '32',
            },
        },
        legend: {},
        visualMap: {
            show: 1,
            type: "piecewise",
            orient: 'horizontal',
            top: '17%',
            x: 'center',
            bottom: '10%',
            pieces: [
                {lte: 1, label: '甜粽'},
                {gt: 1, lte: 2, label: '咸甜通吃'},
                {gte: 3, label: '咸粽'}
            ],
            textStyle: {
                color: "#000"
            },
            inRange: {
                symbolSize: 30,
                symbol: 'circle',
                color: ['#f8d998', '#fafc91', '#b7f9a2']
            }
        },

因为没有准确的调查数据，采用预置数据进行不同省份的颜色区分，即：

pieces: [
                {lte: 1, label: '甜粽'},
                {gt: 1, lte: 2, label: '咸甜通吃'},
                {gte: 3, label: '咸粽'}
            ],

inRange: {
                symbolSize: 30,
                symbol: 'circle',
                color: ['#f8d998', '#fafc91', '#b7f9a2']
            }

geo组件

如果在series:[]组件中不使用散点、引导线等数据图层时，可以不使用该组件。

  geo: {
            type: 'map',
            map: 'china',
            label: {
                show: false,
            },
            itemStyle: {
                areaColor: 'transparent',
                borderWidth: 2,
                borderColor: '#c1a46a', // 地图边配色
                //borderType: "dotted"
            },
            emphasis: {
                label: {
                    show: false,
                },
            },
            regions: [{ // 隐藏南海诸岛
                name: '南海诸岛',
                itemStyle: {
                    opacity: 0.6,
                    label: {
                        show: false,
                    }
                }
            }]
        },

series组件

     series: [
            {
                type: 'map',
                map: 'china',
                label: {
                    show: true,
                    formatter: function (params) {
                        console.log(params.data.type)
                        return params.data.type;
                    }
                },
                itemStyle: {
                    areaColor: '#f9dd9c',
                    borderWidth: 1,
                    borderColor: '#c1a46a', // 地图边配色
                    //borderType: "dotted"
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                },
                z: 100,
                data: data,
                regions: [{ // 隐藏南海诸岛
                    name: '南海诸岛',
                    itemStyle: {
                        opacity: 0.6,
                        label: {
                            show: false,
                        }
                    }
                }]
            }]

通过label调用各个省份的粽子类型：

 label: {
                    show: true,
                    formatter: function (params) {
                        console.log(params.data.type)
                        return params.data.type;
                    }
                },

自适应浏览器

//自适应浏览器;
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

完整option选项配置代码

var option = {
        title: {
            text: '粽子咸甜口味分布',
            top: '10%',
            x: 'center',
            textStyle: {
                fontSize: '32',
            },
        },
        legend: {},
        visualMap: {
            show: 1,
            type: "piecewise",
            orient: 'horizontal',
            top: '17%',
            x: 'center',
            bottom: '10%',
            pieces: [
                {lte: 1, label: '甜粽'},
                {gt: 1, lte: 2, label: '咸甜通吃'},
                {gte: 3, label: '咸粽'}
            ],
            textStyle: {
                color: "#000"
            },
            inRange: {
                symbolSize: 30,
                symbol: 'circle',
                color: ['#f8d998', '#fafc91', '#b7f9a2']
            }
        },
        geo: {
            type: 'map',
            map: 'china',
            label: {
                show: false,
            },
            itemStyle: {
                areaColor: 'transparent',
                borderWidth: 2,
                borderColor: '#c1a46a', // 地图边配色
                //borderType: "dotted"
            },
            emphasis: {
                label: {
                    show: false,
                },
            },
            regions: [{ // 隐藏南海诸岛
                name: '南海诸岛',
                itemStyle: {
                    opacity: 0.6,
                    label: {
                        show: false,
                    }
                }
            }]
        },
        series: [
            {
                type: 'map',
                map: 'china',
                label: {
                    show: true,
                    formatter: function (params) {
                        console.log(params.data.type)
                        return params.data.type;
                    }
                },
                itemStyle: {
                    areaColor: '#f9dd9c',
                    borderWidth: 1,
                    borderColor: '#c1a46a', // 地图边配色
                    //borderType: "dotted"
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                },
                z: 100,
                data: data,
                regions: [{ // 隐藏南海诸岛
                    name: '南海诸岛',
                    itemStyle: {
                        opacity: 0.6,
                        label: {
                            show: false,
                        }
                    }
                }]
            }]
    };

    //自适应浏览器;
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

中国地大物博，文化习俗不同，气候天气条件有异，导致大家喜爱的粽子的口味和吃法也有区别，但无论咸甜也好、南北之分也罢，希望大家放“粽”端午，吉祥安康！

创意参考：

端午节粽子口味地图出炉 “甜咸之争”你是哪一派? ↩︎