suojin
/
physical_distribution
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改地图图表样式

Browse Source
main
jinna 3 years ago
parent f7526758cf
commit 2e611f00aa
2 changed files with 120 additions and 126 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 236
      src/views/components/showmap.vue
  2. 10
      src/views/dashboard/home.vue

236
src/views/components/showmap.vue
Unescape View File

@ -11,6 +11,9 @@ export default {
props: {
mapData:{
type:Array,
},
datas:{
type:Array
}
},
data() {
@ -96,7 +99,7 @@ export default {
小店镇: [118.81007, 35.422484],
夏庄镇: [118.700674, 35.419525],
},
datas: [
datas1: [
[{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }],
@ -146,26 +149,15 @@ export default {
};
},
mounted() {
// this.createCharts1();
this.myChart = this.$echarts.init(document.getElementById("chart_map"));
this.$echarts.registerMap("莒县", prefecture, {});
this.render3DMap();
this.createCharts1();
},
created() {
this.$nextTick(() =>{
console.log(this.$parent.mapData)
console.log(JSON.parse(JSON.stringify(this.$parent.mapData)))
})
// this.$nextTick(() =>{
// })
},
watch:{
mapData:{
handler(newValue,oldValue){
console.log(newValue)
// if(newValue.length !== 0){
// this.render3DMap();
// }
}
}
},
@ -179,34 +171,33 @@ export default {
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,
{
coord: toCoord,
fromName: dataItem[0].name,
value: dataItem[0].value,
// name: dataItem[0].name,
visualMap: false,
// },
},
{
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [
toCoord,
fromCoord,
coord: fromCoord,
toName: dataItem[1].name,
visualMap: false,
]
},
]);
}
}
return res;
};
this.mapData = this.mapData.sort(function (a, b) {
return b.value - a.value;
});
this.mapData.map((item,index) =>{
if(index > 2){
this.mapData[index].label = {show:false}
}
})
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
@ -217,8 +208,6 @@ export default {
var color = ['#000'];
// 迁入地特殊显示//广东
[[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => {
console.log(item[1])
console.log(convertData(this.datas));
series.push(
{
type: "lines",
@ -226,76 +215,77 @@ export default {
tooltip: {
trigger: "item",
formatter(params) {
// console.log(params);
},
},
effect: {
show: true,
period: 6, // 箭头指向速度，值越小速度越快
trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
period: 10, // 箭头指向速度，值越小速度越快
trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", // 箭头图标
symbolSize: 5, // 图标大小
symbolSize: 6, // 图标大小
trailColor: '#ffd419',
color: '#ffd419', //流动点颜色
},
lineStyle: {
// normal: {
color: color[i],
width: 3, // 尾迹线条宽度
color: "#ffd419",
width: 1, // 尾迹线条宽度
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]),
};
}),
},
// {
// 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",
@ -306,32 +296,38 @@ export default {
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",
},
},
},
aspectScale:'1.5',
label: {
show: true,
textStyle:{
color:'#fff'
}
},
// itemStyle: {
// normal: {
// borderWidth: 1,
// borderColor: "#0e94eb",
// // label: {
// // show: false,
// // },
// },
// emphasis: {
// // 也是选中样式
// borderWidth: 1,
// borderColor: "#fff",
// backgroundColor: "red",
// label: {
// show: false,
// textStyle: {
// color: "#fff",
// },
// },
// },
// },
data: this.mapData,
}
);
});
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, {});
@ -359,14 +355,14 @@ export default {
text: ["高", "低"],
orient: "horizontal",
itemWidth: 15,
itemHeight: 200,
itemHeight: 150,
right: 0,
bottom: 30,
bottom: 3,
inRange: {
color: ["#75ddff", "#0e94eb"],
color: ["#1e73dd", "#04296f"],
},
textStyle: {
color: "#000",
color: "#fff",
},
},
geo: {
@ -377,6 +373,7 @@ export default {
show: false,
},
},
aspectScale:'1.5',
roam: true, // 是否允许缩放
itemStyle: {
normal: {
@ -442,9 +439,6 @@ export default {
}
return res;
};
console.log(convertData(this.datas))
// var color = ['#000'];
var seriesData = [];
this.datas.map((item, i) => {
seriesData.push(
@ -453,7 +447,6 @@ export default {
}
);
})
console.log(seriesData)
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
@ -468,7 +461,6 @@ export default {
this.mapData[index].label = {show:false}
}
})
console.log(this.mapData)
let option = {
// backgroundColor: '#000f1e',

10
src/views/dashboard/home.vue
Unescape View File

@ -166,8 +166,8 @@
</div>
<div class="center_bottom">
<div class="charts_box map-box">
<!-- <ShowMap :mapData="mapData"></ShowMap> -->
<div id="chart_map" class="map_box"></div>
<ShowMap :mapData="mapData" :datas="datas" v-if="mapData && datas && isMap"></ShowMap>
<!-- <div id="chart_map" class="map_box"></div> -->
</div>
<div class="charts_box">
<div id="trendChart" class="trend_box"></div>
@ -348,6 +348,7 @@ export default {
小店镇: [118.81007, 35.422484],
夏庄镇: [118.700674, 35.419525],
},
isMap:false
};
},
created() {
@ -425,6 +426,7 @@ export default {
}
content1[2].map((item, index) => {
this.mapData.push({ name: item.名称, value: item.收件量 });
this.isMap = true
this.datas.push([
{ name: item.名称, value: item.收件量 },
{ name: "莒县电子商务公共服务中心" },
@ -474,13 +476,13 @@ export default {
this.$nextTick(() => {
this.createChart();
this.createPieChart(this.pieData);
this.render3DMap()
// this.render3DMap()
this.run();
this.run1();
});
},
render3DMap() {
render3DMap() {
var convertData = (data) => {
var res = [];
for (var i = 0; i < data.length; i++) {

Write Preview
Loading…
Cancel
Save