文件引入
<!--Echarts图表库-->
<script src="js/echarts.min.js"></script>
<!--VUE核心框架-->
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<!--省份geoJson文件-->
<script src="js/henan.js"></script>
容器
<div id="hnmap" style="height: 100%"></div>
VUEJS代码
let app = new Vue({
el: "#hnmap",
data: {},
methods: {
//获取数据；
getHenanJson(){
axios.get('./js/getOnsInfo.json').then(res => {
var sum = JSON.parse(res.data.data);
sum.areaTree[0].children.forEach((item) => {
//console.log(item);
if (item.name == "河南") {
//console.log(item);
let dealData = this.dealData(item);
this.chart(dealData);
}
});
});
},
//数据处理函数；
dealData(data) {
let realData = [];
let axisData = [];
for (let key in data.children) {
if (key == 1 || key == 2) {
continue;
} else {
let obj = {name: '', datas: [], label: {fontSize: 18, fontStyle: 'lighter'}};
if (data.children[key].name == "济源示范区") {
obj.name = "济源市";
} else {
obj.name = data.children[key].name + "市";
}
obj.value = data.children[key].total.confirm;
obj.datas[0] = data.children[key].total.suspect;
obj.datas[1] = data.children[key].total.heal;
obj.datas[2] = data.children[key].total.dead;
realData.push(obj);
}
}
return {'realData': realData, 'axisData': axisData};
},
//图表渲染;
chart(getRealData) {
//console.log(getRealData.realData);
let myChart = echarts.init(document.getElementById('hnmap'));
myChart.setOption(
{
backgroundColor: 'rgb(20,28,52)',
title: [
{
text: '河南省人才环境评分',
subtext:"虚构数据",
textStyle: {
fontSize: 20,
color:'rgba(255,255,255,0.7)'
},
x:"center",
top:"15"
}
],
tooltip: {
trigger: 'item',
formatter: function (params) {
//console.log(params);
return (`地区：${params.data.name}<br>本科学历：${params.data.value}<br>专科学历：${params.data.datas[0]}<br>高中学历：${params.data.datas[1]}<br>初中学历：${params.data.datas[2]}`)
},
},
visualMap: {
type: 'piecewise',
splitNumber: 5,
pieces: [
{min: 200, color: '#6ead51', label: `>200人`},
{min: 150, max: 200, color: '#92b733', label: `150-200人`},
{min: 100, max: 150, color: '#c4aa29', label: `100-150人`},
{min: 50, max: 100, color: '#ce6c2b', label: `50-100人`},
{min: 0, max: 50, color: '#c92626"', label: `0-50人`},
],
textStyle: {
fontSize: 14,
color:'rgba(255,255,255,0.7)'
},
itemGap: 10,
left:"5%",
bottom:"5%"
},
series: [
{
type: "map",
name: "henan",
map: "河南",
label: {
show: true
},
itemStyle: {
normal: {
show: true,
areaColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(255,255,255,0.7)',
borderWidth: '1',
},
emphasis: {
areaColor: '#FF0000'
}
},
data: getRealData.realData
}
]
});
/*自适应浏览器窗口*/
window.onresize = myChart.resize;
},
},
mounted(){
this.getHenanJson();
}
})Done!
