前言
中国各地对粽子的口味偏好存在一定的差异，一般可以从以下几个方面来概括：
1.甜咸口味的区别1：北方地区一般偏向于咸口味，如北京、天津、山西等地的粽子多为五香肉、咸蛋黄等咸味，而南方地区则更加喜欢甜味，如浙江、江苏、上海等地的粽子多为红枣、豆沙、花生等甜味。
2.粽子材料的不同：由于地区气候和人们口味偏好的差异，在制作粽子时材料也存在差异。如北方的肉粽主要使用猪肉配以五香料等炖制，而南方的粽子则多使用糯米和糖果作为主要材料。
3.形状和包法：不同地区的粽子形状和包法也存在差异。如清明节吃的藕粽，浙江温州地区的粽子外形有些尖头，北京地区的豆沙粽盘型扁担，而苏州地区的粽子则包裹用大豆、红枣、桂花浸渍的糯米。
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(); });
中国地大物博，文化习俗不同，气候天气条件有异，导致大家喜爱的粽子的口味和吃法也有区别，但无论咸甜也好、南北之分也罢，希望大家放“粽”端午，吉祥安康！
创意参考：
