Dragon Boat Festival Map Zongqing: Do you eat sweet or salty in your hometown?
foreword
There are certain differences in the taste preferences of Zongzi across China, which can generally be summarized from the following aspects:
-
The difference between sweet and salty tastes 1 : Northern regions generally prefer salty tastes, such as rice dumplings in Beijing, Tianjin, Shanxi and other places, which are mostly salty flavors such as spiced meat and salted egg yolks, while southern regions prefer sweet tastes, such as Zhejiang, Jiangsu, Zongzi in Shanghai and other places are mostly sweet flavors such as red dates, bean paste, and peanuts.
-
Different materials of Zongzi: Due to differences in regional climate and people's taste preferences, there are also differences in materials when making Zongzi. For example, meat dumplings in the north are mainly stewed with pork and five spices, while rice dumplings in the south use glutinous rice and candies as the main ingredients.
-
Shape and wrapping method: There are also differences in the shape and wrapping method of zongzi in different regions. For example, the lotus root rice dumplings eaten during the Ching Ming Festival, the rice dumplings in Wenzhou, Zhejiang Province have a pointed shape, the bean paste rice dumplings in Beijing are plate-shaped poles, and the rice dumplings in Suzhou are wrapped with glutinous rice dipped in soybeans, red dates, and sweet-scented osmanthus.
Echarts creative source
Searching for Dragon Boat Festival materials on the Internet, I found the "sweet and salty dispute" about eating zongzi. The material should be designed in PSD, so can it be realized with echarts?
Echarts core code
1. Import external files
- Based on echarts, version4.0.4 development, some syntax is different from the latest 5.x;
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
When using echarts to draw a map of China, the following points need to be noted:
-
Data format: It is necessary to use the Chinese map data format stipulated by echarts, including province names, province codes, and coordinates of each province. It can be realized through the geoJSON format map data provided by echarts official website.
-
Region naming: When using echarts to draw a map of China, the names of provinces should be consistent with the official data provided by echarts. If the data is inconsistent, the map may not render, or the rendering may be inaccurate.
-
Map style: When using echarts to draw a map of China, you need to adjust the style of the map according to actual needs, such as adjusting the province fill color, font style, etc.
-
Data display: If you need to display data on a map, you need to use the corresponding data format and the data visualization method supported by echarts, such as using the series-map component.
-
Other precautions: When using echarts to draw a map of China, you also need to pay attention to the update of map data, data accuracy, chart performance, integrity, etc. Also, be careful to comply with copyright and legal and regulatory requirements when using maps.
2. Build HTML container
<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 component development
Preset provincial data
The name of each province and the type of zongzi are used as constants, and the value is set to 1, 2, 3 to facilitate the use of visualMap visual mapping components.
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: '板栗粽'}
]
Initialize the DOM
var myChart = echarts.init(document.getElementById("container"));
configuration options
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']
}
},
Because there is no accurate survey data, the preset data is used to distinguish the colors of different provinces, namely:
pieces: [
{
lte: 1, label: '甜粽'},
{
gt: 1, lte: 2, label: '咸甜通吃'},
{
gte: 3, label: '咸粽'}
],
inRange: {
symbolSize: 30,
symbol: 'circle',
color: ['#f8d998', '#fafc91', '#b7f9a2']
}
geo component
If data layers such as scatter points and guide lines are not used in the series:[] component, this component may not be used.
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 component
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,
}
}
}]
}]
Call the zongzi types of each province through the label:
label: {
show: true,
formatter: function (params) {
console.log(params.data.type)
return params.data.type;
}
},
adaptive browser
//自适应浏览器;
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
Complete option option configuration code
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();
});
China is vast and abundant, with different cultural customs, climate and weather conditions, which lead to differences in the taste and eating methods of everyone's favorite rice dumplings. However, no matter whether it is salty or sweet, or whether it is north or south, I hope that everyone will enjoy the Dragon Boat Festival, auspicious and healthy!
Creative reference: