<template>
<div class="map" id="s-map">
<div id="chartMap" :style="{height:height,width:width}"></div>
</div>
</template>
<script type="text/ecmascript-6"> // 在之前已经单独引入了echarts文件 // 在此只需引入需要的地区的json文件
import echarts from "echarts";
import gz from 'echarts/map/json/province/guizhou'
import lianxi from '@/map/jiujiang.json'
export default {
components: {
},
data () {
return {
font: '12'
}
},
props: {
width: {
type: String,
default: '1000px'
},
height: {
type: String,
default: '500px'
},
nationCode: {
type: String,
default: '100000'
},
nationName: {
type: String,
default: '中华人民共和国'
},
},
watch: {},
data(){
return{
mapDatabase:{}
}
},
created(){
},
mounted(){
this.drawmap()
},
methods: {
drawmap() {
// if (condition) {
// }
console.log(this.nationCode)
this.$axios
.get("nation/getJson/" + this.nationCode)
.then(res => {
var data = res.data.data.data;
this.mapDatabase = JSON.parse(data)
let chartMap = document.getElementById('chartMap');
let smap = document.getElementById('s-map');
var resizeWorldMapContainer = function () {
chartMap.style.width = smap.clientWidth +'px';
chartMap.style.height = smap.clientHeight + 'px';
};
resizeWorldMapContainer();
// 注册可用的地图
echarts.registerMap('dataSource',JSON.parse(data));
// echarts.registerMap('guizhou',lianxi);
let myChart = echarts.init(chartMap);
myChart.setOption({
title : {
text: this.nationName,
subtext: '火灾数量区域图',
x:'left'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (p / km2)'
},
roam: false,
dataRange: {
show:true,
x: 'right',
y: 'bottom',
splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（火灾数量）'},
{start: 5, end: 5, label: '5（火灾数量）', color: 'black'},
{end: 10}
],
color: ['#eee', '#949fb1', '#f3ce85']
},
// tooltip : {
// trigger: 'item',
// formatter: '{b}',
// itemSize:'14px'
// },
legend: {
orient: 'vertical',
x:'center'
},
series: [
{
name: '',
type: 'map',
map: 'dataSource',
mapType: 'maptype',
roam: true,
zoom: 0.6,
itemStyle:{
normal:{
// areaColor: 'rgba(128, 128, 128, 0.01)',
// borderWidth:1,
// borderColor:'#999999',
label:{
show:true,
textStyle: {
color: '#2991BE',
fontSize: this.font
}
},
},
emphasis:{
// areaColor: '#000',
// borderWidth:1,
// borderColor:'#999999',
label:{
show:true,
textStyle: {
color: '#398def',
fontSize: this.font
}
}
}
},
data:[
{name: '城口县',value: Math.round(Math.random()*2000)},
{name: '开县',value: Math.round(Math.random()*2000)},
{name: '巫溪县',value: Math.round(Math.random()*2000)},
{name: '云阳县',value: Math.round(Math.random()*2000)},
{name: '奉节县',value: Math.round(Math.random()*2000)},
{name: '巫山县',value: Math.round(Math.random()*2000)},
{name: '万州区',value: Math.round(Math.random()*2000)},
{name: '梁平县',value: Math.round(Math.random()*2000)},
{name: '忠县',value: Math.round(Math.random()*2000)},
{name: '垫江县',value: Math.round(Math.random()*2000)},
{name: '石柱土家族自治县',value: Math.round(Math.random()*2000)},
{name: '丰都县',value: Math.round(Math.random()*2000)},
{name: '长寿区',value: Math.round(Math.random()*2000)},
{name: '涪陵区',value: Math.round(Math.random()*2000)},
{name: '合川区',value: Math.round(Math.random()*2000)},
{name: '潼南县',value: Math.round(Math.random()*2000)},
{name: '铜梁县',value: Math.round(Math.random()*2000)},
{name: '渝北区',value: Math.round(Math.random()*2000)},
{name: '璧山县',value: Math.round(Math.random()*2000)},
{name: '沙坪坝县',value: Math.round(Math.random()*2000)},
{name: '江北区',value: Math.round(Math.random()*2000)},
{name: '大足县',value: Math.round(Math.random()*2000)},
{name: '永川区',value: Math.round(Math.random()*2000)},
{name: '綦江县',value: Math.round(Math.random()*2000)},
{name: '南川区',value: Math.round(Math.random()*2000)},
{name: '万盛区',value: Math.round(Math.random()*2000)},
{name: '大渡口区',value: Math.round(Math.random()*2000)},
{name: '南岸区',value: Math.round(Math.random()*2000)},
{name: '武隆县',value: Math.round(Math.random()*2000)},
{name: '九龙坡区',value: Math.round(Math.random()*2000)},
{name: '荣昌县',value: Math.round(Math.random()*2000)},
{name: '秀山土家族苗族自治县',value: Math.round(Math.random()*2000)},
{name: '酉阳土家族苗族自治县',value: Math.round(Math.random()*2000)},
{name: '彭水苗族土家族自治县',value: Math.round(Math.random()*2000)},
{name: '江津区',value: Math.round(Math.random()*2000)},
{name: '北碚区',value: Math.round(Math.random()*2000)},
{name: '巴南区',value: Math.round(Math.random()*2000)}
]
}
]
});
});
window.addEventListener("resize", function(){
// resizeWorldMapContainer();
// myChart.resize();
})
}
},
filters: {},
computed: {},
destroyed () {}
}
</script>
<style lang="scss" scoped>
@function px2rem($px) {
$rem: 75px;
@return ($px / $rem) + rem;
}
</style>