本人近期一个项目需要做一个大屏数据展示，在最中间的地方实现一个可以查看数据的地图，而且是大连市的地图。
话不多说先看东西。
当然这是可以放大缩小的
首先需要一个地图的json数据，这个数据可以通过这个网站生成，http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
<div id="echartMap" style="width:60%;height:90%"></div>
echarts的数据我就通过div渲染了，这种我用起来比较顺手。
渲染前记得引入地图数据
data(){
return{
batchId:'',
areaData:[],
dalian: require('./json/dalian.json') //地图json数据
}
},
渲染的方法如下 记得引入echarts
<script>
import echarts from 'echarts'
-----------------------------------
init(dalian){
this.$nextTick(()=>{
var myChart = this.$echarts.init(document.getElementById('echartMap'));
echarts.registerMap('dalian', dalian,{});
myChart.setOption({
series: [{
name:'大连市',
label: {
normal: {
show: true,
},
emphasis: {
show: true
}
},
itemStyle: {
color: '#ddb926'
},
type: 'map',
zoom: 1,//缩放比例
roam: true,
mapType: 'dalian',
emphasis: {
label: {
show: true
}
},
// 文本位置修正
textFixed: {
Alaska: [20, -20]
},
data: [{
name: '瓦房店市',
value: 4822023
},
{
name: '普兰店市',
value: 731449
},
{
name: '庄河市',
value: 6553255
},
{
name: '金州区',
value: 949131
},
{
name: '长海县',
value: 8041430
},
{
name: '甘井子区',
value: 5187582
},
{
name: '沙河口区',
value: 3590347
},
{
name: '西岗区',
value: 917092
},
{
name: '中山区',
value: 632323
},
{
name: '旅顺口区',
value: 9317568
}
]
}],
//右下角数值条
visualMap: {
left: 'right',
min: 1,
max: 100,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
//text: ['High', 'Low'], // 文本，默认为数值文本
calculable: true
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function(params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.seriesName + '<br/>' + params.name + ': ' + value;
}
},
});
})
}
温馨提是：多注意下echarts.registerMap('dalian', dalian,{});这块的用法 建议百度一下。
网友评论