Skip to content

K
knowledgeServiceAdmin
提交 86234fd4 authored 作者: quanlili's avatar quanlili
浏览文件
操作

修改地图

上级 7496474f
显示空白字符变更
内嵌 并排
正在显示 包含 300 行增加 和 6 行删除
build/webpack.dev.conf.js
浏览文件 @ 86234fd4
......@@ -13,7 +13,8 @@ function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const HOST = 'localhost' //process.env.HOST
// const HOST = '' //process.env.HOST
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
const devWebpackConfig = merge(baseWebpackConfig, {
......
src/api/dataManagement/index.js
浏览文件 @ 86234fd4
......@@ -18,7 +18,7 @@ export function getStatusAPI(params) { //查看资源状态
}
export function getTypeAPI(params) { //查看资源类型
return request({
url: `${requestPath.resource}/resource/statistics/status/count`,
url: `${requestPath.resource}/participle/entity/chart`,
method: 'get',
params
})
......
src/mock/city-data.js 0 → 100644
浏览文件 @ 86234fd4
This source diff could not be displayed because it is too large. You can view the blob instead.
src/utils/importMap.js 0 → 100644
浏览文件 @ 86234fd4
import zhongguo from 'echarts/map/json/china.json'
import hainan from "echarts/map/json/province/hainan.json";
import xizang from "echarts/map/json/province/xizang.json";
import zhejiang from "echarts/map/json/province/zhejiang.json";
import yunnan from "echarts/map/json/province/yunnan.json";
import xinjiang from "echarts/map/json/province/xinjiang.json";
import tianjin from "echarts/map/json/province/tianjin.json";
import sichuan from "echarts/map/json/province/sichuan.json";
import shanxi from "echarts/map/json/province/shanxi1.json";
import shangxi from "echarts/map/json/province/shanxi.json";
import shanghai from "echarts/map/json/province/shanghai.json";
import shandong from "echarts/map/json/province/shandong.json";
import qinghai from "echarts/map/json/province/qinghai.json";
import ningxia from "echarts/map/json/province/ningxia.json";
import neimenggu from "echarts/map/json/province/neimenggu.json";
import liaoning from "echarts/map/json/province/liaoning.json";
import jilin from "echarts/map/json/province/jilin.json";
import jiangxi from "echarts/map/json/province/jiangxi.json";
import jiangsu from "echarts/map/json/province/jiangsu.json";
import hunan from "echarts/map/json/province/hunan.json";
import hubei from "echarts/map/json/province/hubei.json";
import henan from "echarts/map/json/province/henan.json";
import heilongjiang from "echarts/map/json/province/heilongjiang.json";
import hebei from "echarts/map/json/province/hebei.json";
import guizhou from "echarts/map/json/province/guizhou.json";
import guangxi from "echarts/map/json/province/guangxi.json";
import guangdong from "echarts/map/json/province/guangdong.json";
import gansu from "echarts/map/json/province/gansu.json";
import chongqing from "echarts/map/json/province/chongqing.json";
import aomen from "echarts/map/json/province/aomen.json";
import anhui from "echarts/map/json/province/anhui.json";
import beijing from "echarts/map/json/province/beijing.json";
import fujian from "echarts/map/json/province/fujian.json";
import xianggang from "echarts/map/json/province/xianggang.json";
import taiwan from "echarts/map/json/province/taiwan.json";
export {
zhongguo,
hainan,
xizang,
zhejiang,
yunnan,
xinjiang,
tianjin ,
sichuan ,
shanxi,
shangxi,
shanghai,
shandong,
qinghai,
ningxia,
neimenggu,
liaoning,
jilin,
jiangxi,
jiangsu,
hunan,
hubei,
henan,
heilongjiang,
hebei,
guizhou,
guangxi,
guangdong,
gansu,
chongqing,
aomen,
anhui,
beijing,
fujian,
xianggang,
taiwan
}
\ No newline at end of file
src/views/dataManagement/chart.vue
浏览文件 @ 86234fd4
......@@ -14,11 +14,32 @@
<div id="statusChart" style="height:250px"></div>
</el-col>
</el-row>
<div style="background:#fff;margin-top:20px;position:relative;padding:20px 0">
<el-select v-model="province" placeholder="请选择" style="margin:20px 20px 0;position:absolute;top:0;left:0;z-index:1" @change="changePro">
<el-option
v-for="item in cityOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div id="mapChart" style="height:500px;"></div>
</div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import {
zhongguo,shandong,hainan,xizang,zhejiang,
yunnan,xinjiang,tianjin,sichuan,shanxi,
shangxi,shanghai,qinghai,ningxia,
neimenggu,liaoning,jilin,jiangxi,jiangsu,
hunan,hubei,henan,heilongjiang,hebei,guizhou,
guangxi,guangdong,gansu,chongqing,aomen,
anhui,beijing,fujian,xianggang,taiwan
} from "@/utils/importMap";
import { CityInfo } from '@/mock/city-data'
import { debounce } from '@/utils'
import { getSurveyAPI,getStatusAPI,getTypeAPI} from '@/api/dataManagement/index'
var surveyOption = {
......@@ -385,6 +406,173 @@ var typeOption = {
}]
}]
};
var cityMap = {
'中国': zhongguo,
'上海': shanghai,
'河北': hebei,
'山西': shangxi,
'内蒙古': neimenggu,
'辽宁': liaoning,
'吉林': jilin,
'黑龙江': heilongjiang,
'江苏': jiangsu,
'浙江': zhejiang,
'安徽': anhui,
'福建': fujian,
'江西': jiangxi,
'山东': shandong,
'河南': henan,
'湖北': hubei,
'湖南': hunan,
'广东': guangdong,
'广西': guangxi,
'海南': hainan,
'四川': sichuan,
'贵州': guizhou,
'云南': yunnan,
'西藏': xizang,
'陕西': shanxi,
'甘肃': gansu,
'青海': qinghai,
'宁夏': ningxia,
'新疆': xinjiang,
'北京': beijing,
'天津': tianjin,
'重庆': chongqing,
'香港': xianggang,
'澳门': aomen
};
// var max = 480,
// min = 9; // todo
// var maxSize4Pin = 100,
// minSize4Pin = 20;
var mapOption = {
backgroundColor:'#FFF',
title:{
"text": "北京市资源分布情况",
"subtext": "地理位置实体分布情况",
x: "center",
textStyle: {
color: '#333',
fontSize: '18',
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
marginBottom:'20px'
},
},
tooltip: {
show: true,
trigger:'item',
alwaysShowContent:false,
backgroundColor:'rgba(50,50,50,0.7)',
hideDelay:100,
triggerOn:'mousemove',
enterable:true,
//position:['60%','70%'],
formatter:function(params, ticket, callback){
//return '简称：'+params.data.name+'<br/>'
return '地域：'+params.data.name+'<br/>'+"数量："+params.data.value[2]
}
},
geo: {
show: true,
map: '北京',
top:'80px',
label: {
normal: {
show: false,
//color: '#fff', //
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#097bba',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
visualMap: {
min: 0,
max: 11,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
seriesIndex:'1',
show:false,
inRange: {
//color: ['#01524c', '#02726c'] // 蓝绿
color:["#01689C",'#01689C']
}
},
series: [{
name: '',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
data:[
{name: "北京",value:[116.405285, 39.904989, 25866]}
],
symbolSize: function(val) {
// var a = (maxSize4Pin - minSize4Pin) / (max - min);
// var b = minSize4Pin - a * min;
// b = maxSize4Pin - a * max;
// return a * val[2] + b;
return 35;
},
// label: {
// normal: {
// show: true,
// formatter: function(params) {
// return params.data.value[2]
// },
// textStyle: {
// color: '#fff',
// fontSize: 9,
// }
// }
// },
label: {
normal: {
color: '#04BFFC',
//formatter: '{b}',
formatter:function(params){
return '{white|'+params.value[2]+'}\n'+'{name|'+params.name+'}'
},
rich: {
'white': {
color:"#fff",
align:'center'
},
'name':{
color:"yellow",
height:20,
align:'right'
}
},
position: 'center',
show: true
}
},
itemStyle: {
normal: {
color: 'red', //标志颜色
}
},
zlevel: 1
}]
};
export default {
name: "chart",
data() {
......@@ -392,6 +580,10 @@ export default {
lineChart:null,
statusChart:null,
typeChart:null,
mapOption:null,
province:'北京',
cityOptions:[],
//proName:'北京',
};
},
mounted() {
......@@ -405,18 +597,24 @@ export default {
if (this.typeChart) {
this.typeChart.resize()
}
if (this.mapChart) {
this.mapChart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHanlder);
this.getSideCity();
this.initEchart();
this.getSurvey();
this.getStatus();
this.getType()
this.getType();
this.getMap();
},
methods: {
initEchart() {
this.surveyChart = echarts.init(document.getElementById("surveyChart"));
this.statusChart = echarts.init(document.getElementById("statusChart"))
this.typeChart = echarts.init(document.getElementById("typeChart"))
this.typeChart = echarts.init(document.getElementById("typeChart"));
this.mapChart = echarts.init(document.getElementById("mapChart"))
},
getSurvey(){
let params={
......@@ -469,14 +667,36 @@ export default {
getTypeAPI().then(res=>{
if(res.data.code==0){
let resData=res.data.data||[];
//typeOption.series[0]['data']=resData;
typeOption.series[0]['data']=resData;
console.log(resData,'666')
this.typeChart.setOption(typeOption)
}else{
this.$message.error('获取资源状态失败')
}
})
}
},
getMap(proName='北京'){
mapOption.geo.map=proName;
echarts.registerMap(proName, cityMap[proName]);
this.mapChart.setOption(mapOption,true)
},
changePro(){
this.getMap(this.province)
},
getSideCity(){
let cityData=JSON.parse(JSON.stringify(CityInfo));
let resData=[];
cityData.forEach((item,index) => {
let children=item.children;
resData.push({
value:item.label,
label:item.label,
children:null
})
});
this.cityOptions=resData;
},
}
};
</script>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论