漏刻有时数据可视化Echarts组件开发(27)：端午地图粽情之你的家乡吃甜还是吃咸？
端午地图粽情之你的家乡吃甜还是吃咸？
- 前言
- Echarts创意来源
- Echarts核心代码
-
- 1.引入外部文件
- 2.构建HTML容器
- 3.Echarts组件开发
-
- 预置各省数据
- 初始化DOM
- 配置选项
- geo组件
- series组件
- 自适应浏览器
- 完整option选项配置代码
前言
中国各地对粽子的口味偏好存在一定的差异，一般可以从以下几个方面来概括：
-
甜咸口味的区别1：北方地区一般偏向于咸口味，如北京、天津、山西等地的粽子多为五香肉、咸蛋黄等咸味，而南方地区则更加喜欢甜味，如浙江、江苏、上海等地的粽子多为红枣、豆沙、花生等甜味。
-
粽子材料的不同：由于地区气候和人们口味偏好的差异，在制作粽子时材料也存在差异。如北方的肉粽主要使用猪肉配以五香料等炖制，而南方的粽子则多使用糯米和糖果作为主要材料。
-
形状和包法：不同地区的粽子形状和包法也存在差异。如清明节吃的藕粽，浙江温州地区的粽子外形有些尖头，北京地区的豆沙粽盘型扁担，而苏州地区的粽子则包裹用大豆、红枣、桂花浸渍的糯米。
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();
});
中国地大物博，文化习俗不同，气候天气条件有异，导致大家喜爱的粽子的口味和吃法也有区别，但无论咸甜也好、南北之分也罢，希望大家放“粽”端午，吉祥安康！
创意参考：
端午节粽子口味地图出炉 “甜咸之争”你是哪一派? ↩︎