今天,我们迎来了冬至节气,大家今天吃了什么呀?我想着今天冬至,应该吃一碗饺子,于是去了一家饺子馆,到了那里人惊呆了,真的太多人了!!我随手拍了一张,氛围十分不错,有过年的味道了。
上图为武汉某饺子馆冬至状况哈哈哈。
今天上午我看到中国天气网发了一张冬至吃货地图,于是想用echarts画一个。
直接上代码!!!
css代码:
.body{
height: 100%;
background-color: #10aeb5;
}
.c1{
background: #f8f9fa;
width:750px;
height: 580px;
left: 50%;
margin-left: -375px;
position:absolute;
}
js代码:
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: '冬至吃货地图',
subtext:'数据参考中国天气网',
left: 'center',
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['人数']
},
visualMap: {
type: 'piecewise',
pieces: [
{value:3,label: '过节就吃饺子区'},
{value:2,label: '御寒暖胃羊汤区'},
{value:1,label: '甜甜蜜蜜汤圆区'},
{value:0,label: '什么好吃吃什么区'}
],
color: ['#d74f3d','#e0620d','#ea9518','#f3ca7e']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
roamController: {
show: true,
left: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: '冬至吃什么',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
},
textStyle: {
color: "#000000"
}
},
data: [
{name: '湖北',value: 0},
{name: '湖南',value: 0},
{name: '江西',value: 0},
{name: '安徽',value: 0},
{name: '云南',value: 1},
{name: '广东',value: 1},
{name: '福建',value: 1},
{name: '广西',value: 1},
{name: '浙江',value: 1},
{name: '江苏',value: 1},
{name: '上海',value: 1},
{name: '海南',value: 1},
{name: '香港',value: 1},
{name: '澳门',value: 1},
{name: '台湾',value: 1},
{name: '贵州',value: 2},
{name: '重庆',value: 2},
{name: '宁夏',value: 2},
{name: '四川',value: 2},
{name: '新疆',value: 3},
{name: '西藏',value: 3},
{name: '青海',value: 3},
{name: '甘肃',value: 3},
{name: '内蒙古',value: 3},
{name: '陕西',value: 3},
{name: '北京',value: 3},
{name: '辽宁',value: 3},
{name: '黑龙江',value: 3},
{name: '哈尔滨',value: 3},
{name: '山西',value: 3},
{name: '山东',value: 3},
{name: '河北',value: 3},
{name: '河南',value: 3},
{name: '吉林',value: 3},
{name: '天津',value: 3},
]
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
html代码:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<style type="text/css">
@import url(hello.css);
</style>
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_2284081_rm2uymej08.css">
</head>
<body class="body">
<div class='c1' >
<div id="container" style="height: 100%"></div>
<div style='padding-left: 200px;top:250px;position:absolute'>
<i class="iconfont icon-jiaozi"style='font-size:80px;,z-index:1'></i>
</div>
<div style='padding-left: 420px;top:230px;position:absolute'>
<i class="iconfont icon-jiaozi"style='font-size:80px;,z-index:1'></i>
</div>
<div style='padding-left: 500px;top:150px;position:absolute'>
<i class="iconfont icon-jiaozi"style='font-size:80px;,z-index:1'></i>
</div>
<div style='padding-left: 350px;top:320px;position:absolute'>
<i class="iconfont icon-nongtang"style='font-size:80px;,z-index:1'></i>
</div>
<div style='padding-left: 430px;top:320px;position:absolute'>
<i class="iconfont icon-yu"style='font-size:80px;,z-index:1'></i>
</div>
<div style='padding-left: 500px;top:320px;position:absolute'>
<i class="iconfont icon-tangyuan_huaban"style='font-size:80px;,z-index:1'></i>
</div>
<div style='padding-left: 380px;top:400px;position:absolute'>
<i class="iconfont icon-tangyuan_huaban"style='font-size:80px;,z-index:1'></i>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Fr1Ob4gNd0Fc5ufx12XbNdKiIT7mb89c"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="hello.js"></script>
</body>
</html>
效果图:
*数据参考中国天气网的一篇文章。冬至大如年吃货要过节,吃货地图请对号入座
今天吃了一大碗羊肉水饺,也是格外的香啊!大家冬至一般都吃什么呀,你们那里有特殊的习俗吗?评论区分享一下吧。