jinna
3 years ago
parent
585ae20caf
commit
f7255abca7
7 changed files with 10139 additions and 33 deletions
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@ -1,34 +1,42 @@ |
||||
import axios from 'axios' |
||||
import axios from "axios"; |
||||
|
||||
//跨域请求，允许保存cookie
|
||||
axios.defaults.withCredentials = true; |
||||
|
||||
//返回其他状态码
|
||||
axios.defaults.validateStatus = function (status) { |
||||
return status >= 200 && status <= 500; |
||||
return status >= 200 && status <= 500; |
||||
}; |
||||
|
||||
//HTTP Request拦截
|
||||
axios.interceptors.request.use(config => { |
||||
config.headers['Content-Type'] = 'application/json'; |
||||
axios.interceptors.request.use( |
||||
(config) => { |
||||
config.headers["Content-Type"] = "application/json"; |
||||
return config; |
||||
}, error => { |
||||
console.error('Request interceptors:', error); |
||||
return Promise.reject(error) |
||||
}); |
||||
}, |
||||
(error) => { |
||||
console.error("Request interceptors:", error); |
||||
return Promise.reject(error); |
||||
} |
||||
); |
||||
|
||||
//HTTP Response拦截
|
||||
axios.interceptors.response.use(res => { |
||||
const ok = res.data.Success || false, status = res.status || 200, message = res.data.AllMessages || 'Internal Server Error!'; |
||||
axios.interceptors.response.use( |
||||
(res) => { |
||||
const ok = res.data.Success || false, |
||||
status = res.status || 200, |
||||
message = res.data.AllMessages || "Internal Server Error!"; |
||||
|
||||
if (!ok) { |
||||
return Promise.reject(new Error(message)); |
||||
if (!ok && !status) { |
||||
return Promise.reject(new Error(message)); |
||||
} |
||||
|
||||
return res.data; |
||||
}, error => { |
||||
console.error('Response interceptors:', error); |
||||
}, |
||||
(error) => { |
||||
console.error("Response interceptors:", error); |
||||
return Promise.reject(error); |
||||
}); |
||||
} |
||||
); |
||||
|
||||
export default axios |
||||
export default axios; |
||||
|
||||
@ -0,0 +1,419 @@ |
||||
<template> |
||||
<div id="chart_map" class="map_box"></div> |
||||
</template> |
||||
<script> |
||||
import prefecture from "@/assets/json/prefecture.json"; |
||||
|
||||
// import 'echarts/map/js/china.js' // 引入中国地图数据 |
||||
// import 'echarts/map/js/province/guangdong.js' |
||||
/*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/ |
||||
export default { |
||||
data() { |
||||
return { |
||||
//下面是经纬度，用哪个地方的就填哪个地方的就可以 |
||||
geoCoordMap1: { |
||||
黑龙江: [127.9688, 45.368], |
||||
内蒙古: [110.3467, 41.4899], |
||||
吉林: [125.8154, 44.2584], |
||||
辽宁: [123.1238, 42.1216], |
||||
河北: [114.4995, 38.1006], |
||||
天津: [117.4219, 39.4189], |
||||
山西: [112.3352, 37.9413], |
||||
陕西: [109.1162, 34.2004], |
||||
甘肃: [103.5901, 36.3043], |
||||
宁夏: [106.3586, 38.1775], |
||||
青海: [101.4038, 36.8207], |
||||
新疆: [87.9236, 43.5883], |
||||
西藏: [91.11, 29.97], |
||||
北京: [116.4551, 40.2539], |
||||
四川: [103.9526, 30.7617], |
||||
重庆: [108.384366, 30.439702], |
||||
山东: [117.1582, 36.8701], |
||||
河南: [113.4668, 34.6234], |
||||
江苏: [118.8062, 31.9208], |
||||
安徽: [117.29, 32.0581], |
||||
湖北: [114.3896, 30.6628], |
||||
浙江: [119.5313, 29.8773], |
||||
福建: [119.4543, 25.9222], |
||||
江西: [116.0046, 28.6633], |
||||
湖南: [113.0823, 28.2568], |
||||
贵州: [106.6992, 26.7682], |
||||
云南: [102.9199, 25.4663], |
||||
广东: [113.12244, 23.009505], |
||||
广西: [108.479, 23.1152], |
||||
海南: [110.3893, 19.8516], |
||||
上海: [121.4648, 31.2891], |
||||
|
||||
广州市: [113.264385, 23.129112], |
||||
云浮市: [112.044439, 22.929801], |
||||
韶关市: [113.597313, 24.811094], |
||||
惠州市: [114.412599, 23.079404], |
||||
深圳市: [114.085947, 22.547], |
||||
汕头市: [116.708463, 23.37102], |
||||
佛山市: [113.122717, 23.028762], |
||||
江门市: [113.094942, 22.590431], |
||||
湛江市: [110.364977, 21.274898], |
||||
茂名市: [110.919229, 21.659751], |
||||
肇庆市: [112.472529, 23.051546], |
||||
梅州市: [116.117582, 24.299112], |
||||
汕尾市: [115.364238, 22.774485], |
||||
河源市: [114.697802, 23.746266], |
||||
阳江市: [111.975107, 21.859222], |
||||
东莞市: [113.746262, 23.046237], |
||||
揭阳市: [116.355733, 23.543778], |
||||
潮州市: [116.62286, 23.656324], |
||||
珠海市: [113.553986, 22.224979], |
||||
澄海市: [116.756092, 23.46596], |
||||
清远市: [113.056892, 23.680117], |
||||
中山市: [113.382391, 22.521113], |
||||
}, |
||||
geoCoordMap: { |
||||
棋山镇: [118.895378, 35.877537], |
||||
东莞镇: [118.972146, 35.991826], |
||||
安庄镇: [118.815076, 35.812024], |
||||
果庄乡: [118.769212, 35.77904], //果庄乡 |
||||
洛河镇: [118.833803, 35.753576], //洛河镇 |
||||
库山乡: [118.979909, 35.92304], //库山乡 |
||||
招贤镇: [118.929219, 35.723248], //招贤镇 |
||||
桑园镇: [119.046012, 35.678553], //桑园镇 |
||||
阎庄镇: [118.834585, 35.670621], //阎庄镇 |
||||
莒县电子商务公共服务中心: [118.901658, 35.60688], |
||||
店子集镇:[118.914151,35.5844], |
||||
城阳街道: [118.82472, 35.583488], //城阳街道 |
||||
峤山镇: [118.946005, 35.657339], //峤山镇 |
||||
龙山镇: [119.003747, 35.515955], |
||||
陵阳镇: [118.890825, 35.545056], |
||||
寨里河镇: [118.931584, 35.469982], |
||||
莒县经济开发区: [118.851312, 35.626514], |
||||
浮来山镇: [118.744789, 35.596051], |
||||
刘官庄镇: [118.801123, 35.522202], |
||||
长岭镇: [118.844125, 35.484677], |
||||
小店镇: [118.81007, 35.422484], |
||||
夏庄镇: [118.700674, 35.419525], |
||||
}, |
||||
datas: [ |
||||
[{ name: "夏庄镇", value:120057.34 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "安庄镇", value: 6992.6 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "果庄乡", value: 44045.49 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "洛河镇", value: 40689.64 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "招贤镇", value: 37659.78 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "桑园镇", value: 45180.97 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "阎庄镇", value: 5204.26 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "城阳街道", value: 21900.9 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "莒县经济开发区", value: 4918.26 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "峤山镇", value: 5881.84 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "浮来山镇", value: 4178.01 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "店子集镇", value: 2227.92 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "龙山镇", value: 2180.98 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "刘官庄镇", value: 9172.94 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "陵阳镇", value: 3368 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "长岭镇", value: 306.98 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "寨里河镇", value: 810.66 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "东莞镇", value: 542.2 }, { name: "莒县电子商务公共服务中心" }], |
||||
[{ name: "小店镇", value: 256.38 }, { name: "莒县电子商务公共服务中心" }], |
||||
], |
||||
chardata1: [ |
||||
{ name: "夏庄镇", value: 120057.34 }, |
||||
{ name: "库山乡", value: 15477.48 }, |
||||
{ name: "棋山镇", value: 131686.1 }, |
||||
{ name: "安庄镇", value: 6992.6 }, |
||||
{ name: "果庄乡", value: 44045.49 }, |
||||
{ name: "洛河镇", value: 40689.64 }, |
||||
{ name: "招贤镇", value: 37659.78 }, |
||||
{ name: "桑园镇", value: 45180.97 }, |
||||
{ name: "阎庄镇", value: 5204.26 }, |
||||
{ name: "城阳街道", value: 21900.9 }, |
||||
{ name: "莒县经济开发区", value: 4918.26 }, |
||||
{ name: "峤山镇", value: 5881.84 }, |
||||
{ name: "浮来山镇", value: 4178.01 }, |
||||
{ name: "店子集镇", value: 2227.92 }, |
||||
{ name: "龙山镇", value: 2180.98 }, |
||||
{ name: "刘官庄镇", value: 9172.94 }, |
||||
{ name: "陵阳镇", value: 3368 }, |
||||
{ name: "长岭镇", value: 306.98 }, |
||||
{ name: "寨里河镇", value: 810.66 }, |
||||
{ name: "东莞镇", value: 542.2 }, |
||||
{ name: "小店镇", value: 256.38 }, |
||||
], |
||||
myChart1: null, |
||||
}; |
||||
}, |
||||
watch: {}, |
||||
mounted() { |
||||
this.createCharts1(); |
||||
}, |
||||
methods: { |
||||
createCharts1() { |
||||
// const convertData = (data) => { |
||||
// const res = []; |
||||
// for (let i = 0; i < data.length; i++) { |
||||
// const dataItem = data[i]; |
||||
// const fromCoord = this.geoCoordMap[dataItem[1].name]; // 迁出点 |
||||
// const toCoord = this.geoCoordMap[dataItem[0].name]; // 迁入点 |
||||
// if (fromCoord && toCoord) { |
||||
// // console.log(dataItem) |
||||
// res.push([ |
||||
// { |
||||
// coord: fromCoord, |
||||
// value: dataItem[0].value, |
||||
// name: dataItem[0].name, |
||||
// }, |
||||
// { |
||||
// coord: toCoord, |
||||
// }, |
||||
// ]); |
||||
// } |
||||
// } |
||||
|
||||
// return res; |
||||
// }; |
||||
var convertData = (data) => { |
||||
var res = []; |
||||
for (var i = 0; i < data.length; i++) { |
||||
var dataItem = data[i]; |
||||
var fromCoord = this.geoCoordMap[dataItem[0].name]; |
||||
var toCoord = this.geoCoordMap[dataItem[1].name]; |
||||
if (fromCoord && toCoord) { |
||||
res.push([ |
||||
{ |
||||
coord: toCoord, |
||||
fromName: dataItem[0].name, |
||||
value: dataItem[0].value, |
||||
// name: dataItem[0].name, |
||||
visualMap:false, |
||||
|
||||
}, |
||||
{ |
||||
coord:fromCoord , |
||||
toName: dataItem[1].name, |
||||
visualMap:false, |
||||
|
||||
}, |
||||
]); |
||||
} |
||||
} |
||||
return res; |
||||
}; |
||||
|
||||
var yMax = 0; |
||||
for (var j = 0; j < this.chardata1.length; j++) { |
||||
if (yMax < this.chardata1[j].value) { |
||||
yMax = this.chardata1[j].value; |
||||
} |
||||
} |
||||
const series = []; |
||||
var color = ['#000']; |
||||
// 迁入地特殊显示//广东 |
||||
[[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => { |
||||
console.log(item) |
||||
console.log(convertData(item[1])); |
||||
series.push( |
||||
{ |
||||
type: "lines", |
||||
zlevel: 2, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter(params) { |
||||
// console.log(params); |
||||
}, |
||||
}, |
||||
effect: { |
||||
show: true, |
||||
period: 6, // 箭头指向速度，值越小速度越快 |
||||
trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重 |
||||
symbol: "arrow", // 箭头图标 |
||||
symbolSize: 5, // 图标大小 |
||||
}, |
||||
lineStyle: { |
||||
// normal: { |
||||
color: color[i], |
||||
width: 3, // 尾迹线条宽度 |
||||
opacity: 0.6, // 尾迹线条透明度 |
||||
curveness: 0.2, // 尾迹线条曲直度 |
||||
// }, |
||||
}, |
||||
data: convertData(item[1]), |
||||
}, |
||||
{ |
||||
type: "effectScatter", |
||||
coordinateSystem: "geo", |
||||
zlevel: 2, |
||||
rippleEffect: { |
||||
// 涟漪特效 |
||||
period: 4, // 动画时间，值越小速度越快 |
||||
brushType: "stroke", // 波纹绘制方式 stroke, fill |
||||
scale: 3, // 波纹圆环最大限制，值越大波纹越大 |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter(params) { |
||||
return params.data.name + ':' + params.data.value[2] |
||||
}, |
||||
}, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
position: "right", // 显示位置 |
||||
offset: [5, 0], // 偏移设置 |
||||
formatter(params) { |
||||
// 圆环显示文字 |
||||
return ''; |
||||
}, |
||||
fontSize: 13, |
||||
}, |
||||
emphasis: { |
||||
show: true, |
||||
}, |
||||
}, |
||||
symbol: "circle", |
||||
symbolSize:3, |
||||
// itemStyle: { |
||||
// normal: { |
||||
// // show: false, |
||||
// color: "#000", |
||||
// }, |
||||
// }, |
||||
itemStyle: { |
||||
color: "#000" |
||||
}, |
||||
data: item[1].map((dataItem) => { |
||||
return { |
||||
visualMap:false, |
||||
name: dataItem[0].name, |
||||
value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]), |
||||
}; |
||||
}), |
||||
}, |
||||
{ |
||||
name: "数据名称", |
||||
type: "map", |
||||
zlevel: 0, |
||||
mapType: "莒县", |
||||
selectedMode: "multiple", |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{b}<br/>{c} (件)", |
||||
}, |
||||
itemStyle: { |
||||
normal: { |
||||
borderWidth: 1, |
||||
borderColor: "#0e94eb", |
||||
label: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
emphasis: { |
||||
// 也是选中样式 |
||||
borderWidth: 1, |
||||
borderColor: "#fff", |
||||
backgroundColor: "red", |
||||
label: { |
||||
show: true, |
||||
textStyle: { |
||||
color: "#fff", |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
data: this.chardata1, |
||||
} |
||||
); |
||||
}); |
||||
console.log(series); |
||||
this.myChart1 = this.$echarts.init(document.getElementById("chart_map")); |
||||
// this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps')); |
||||
// this.$echarts.registerMap("china1", china1, {}); |
||||
this.$echarts.registerMap("莒县", prefecture, {}); |
||||
window.addEventListener("resize", function () { |
||||
this.myChart1.resize(); |
||||
// this.myCharts1.resize(); |
||||
}); |
||||
var yMax = 0; |
||||
for (var j = 0; j < this.chardata1.length; j++) { |
||||
if (yMax < this.chardata1[j].value) { |
||||
yMax = this.chardata1[j].value; |
||||
} |
||||
} |
||||
this.myChart1.hideLoading(); |
||||
// this.myCharts1.hideLoading(); |
||||
var option = { |
||||
animation: true, |
||||
tooltip: { |
||||
show: true, |
||||
}, |
||||
visualMap: { |
||||
min: 0, |
||||
max: yMax, |
||||
text: ["高", "低"], |
||||
orient: "horizontal", |
||||
itemWidth: 15, |
||||
itemHeight: 200, |
||||
right: 0, |
||||
bottom: 30, |
||||
inRange: { |
||||
color: ["#75ddff", "#0e94eb"], |
||||
}, |
||||
textStyle: { |
||||
color: "#000", |
||||
}, |
||||
}, |
||||
geo: { |
||||
map: "莒县", |
||||
// zoom: 1.2, |
||||
label: { |
||||
emphasis: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
roam: true, // 是否允许缩放 |
||||
itemStyle: { |
||||
normal: { |
||||
borderColor: "rgba(147, 235, 248, 1)", |
||||
borderWidth: 1, |
||||
areaColor: { |
||||
type: "radial", |
||||
x: 0.5, |
||||
y: 0.5, |
||||
r: 0.8, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(175,238,238, 0)", // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "rgba(47,79,79, .1)", // 100% 处的颜色 |
||||
}, |
||||
], |
||||
globalCoord: false, // 缺省为 false |
||||
}, |
||||
shadowColor: "rgba(128, 217, 248, 1)", |
||||
// shadowColor: 'rgba(255, 255, 255, 1)', |
||||
shadowOffsetX: -2, |
||||
shadowOffsetY: 2, |
||||
shadowBlur: 10, |
||||
}, |
||||
emphasis: { |
||||
areaColor: "#389BB7", |
||||
borderWidth: 0, |
||||
}, |
||||
}, |
||||
}, |
||||
series, |
||||
}; |
||||
|
||||
this.myChart1.setOption(option); |
||||
// this.myCharts1.setOption(option); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped> |
||||
.map_box { |
||||
width: 100%; |
||||
height: 100%; |
||||
/* background: rgba(117,221,255,1); */ |
||||
} |
||||
</style> |
||||
@ -0,0 +1,97 @@ |
||||
<template> |
||||
<div class="line_box" id="trendChart"></div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props:{ |
||||
xData:Array |
||||
}, |
||||
data() { |
||||
return { |
||||
trendChart: null, |
||||
// lineData:[], |
||||
// yData1:[], |
||||
// yData2:[] |
||||
}; |
||||
}, |
||||
created() { |
||||
console.log(this.xData) |
||||
this.$nextTick(() => { |
||||
this.createChart(); |
||||
}); |
||||
}, |
||||
methods: { |
||||
createChart() { |
||||
this.trendChart = this.$echarts.init(document.getElementById("trendChart")); |
||||
window.addEventListener("resize", function () { |
||||
this.trendChart.resize(); |
||||
}); |
||||
var option = { |
||||
color: ["#91cc75", "#4cabce", ], |
||||
title: { |
||||
text: "仓库收件量趋势", |
||||
textStyle: { |
||||
fontSize: 15, |
||||
color: "#fff", |
||||
}, |
||||
}, |
||||
legend: { |
||||
data: ["到件量", "派件量"], |
||||
textStyle: { |
||||
color: "#fff", |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "axis", |
||||
}, |
||||
grid: { |
||||
left: "3%", |
||||
right: "4%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
boundaryGap: false, |
||||
data: this.xData, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: "#fff" |
||||
} |
||||
} |
||||
}, |
||||
yAxis: { |
||||
type: "value", |
||||
axisLabel: { |
||||
show: true, |
||||
color: "#fff", |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "到件量", |
||||
type: "line", |
||||
smooth: true, |
||||
data: this.yData1, |
||||
}, |
||||
{ |
||||
name: "派件量", |
||||
type: "line", |
||||
smooth: true, |
||||
data:this.yData2, |
||||
}, |
||||
], |
||||
}; |
||||
this.trendChart.setOption(option); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.line_box { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue