请大家提意见,觉得Echarts的设计结构,挺利于学习使用的
结构很清晰、固定,按照既定的格式填充数据即可
这是我根据“香港iPhone销量图”该的。
请大家提意见,交流
<script>
let myChart = echarts.init(document.querySelector('#main'));
//
function randomData() {
return Math.round(Math.random()*200);
}
//
let option = {
title: {
text: '青岛市区会员数量统计图(2017)',
subtext: '随机生成虚拟数据',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['风景','人像','']
},
visualMap: {
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高','低'],
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '风景',
type: 'map',
mapType: 'qingDao',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '黄岛区',value: randomData() },
{name: '胶州市',value: randomData() },
{name: '平度市',value: randomData() },
{name: '莱西市',value: randomData() },
{name: '即墨市',value: randomData() },
{name: '城阳区',value: randomData() },
{name: '李沧区',value: randomData() },
{name: '崂山区',value: randomData() },
{name: '李沧区',value: randomData() },
{name: '市南区',value: randomData() },
{name: '市北区',value: randomData() }
]
},
{
name: '人像',
type: 'map',
mapType: 'qingDao',
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
{name: '黄岛区',value: randomData() },
{name: '胶州市',value: randomData() },
{name: '平度市',value: randomData() },
{name: '莱西市',value: randomData() },
{name: '即墨市',value: randomData() },
{name: '城阳区',value: randomData() },
{name: '李沧区',value: randomData() },
{name: '崂山区',value: randomData() },
{name: '李沧区',value: randomData() },
{name: '市南区',value: randomData() },
{name: '市北区',value: randomData() }
]
}
]
};
//
myChart.setOption(option);
</script>