前言

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

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

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();});