今天上午我看到中国天气网发了一张冬至吃货地图,于是想用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代码: