suojin
/
physical_distribution
15
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
Unified 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: { props: {
mapData:{ mapData:{
type:Array, type:Array,
},
datas:{
type:Array
} }
}, },
data() { data() {
@ -96,7 +99,7 @@ export default {
小店镇: [118.81007, 35.422484], 小店镇: [118.81007, 35.422484],
夏庄镇: [118.700674, 35.419525], 夏庄镇: [118.700674, 35.419525],
}, },
datas: [ datas1: [
[{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }], [{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }], [{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }], [{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }],
@ -146,26 +149,15 @@ export default {
}; };
}, },
mounted() { mounted() {
// this.createCharts1(); this.createCharts1();
this.myChart = this.$echarts.init(document.getElementById("chart_map"));
this.$echarts.registerMap("莒县", prefecture, {});
this.render3DMap();
}, },
created() { created() {
this.$nextTick(() =>{ // this.$nextTick(() =>{
console.log(this.$parent.mapData) // })
console.log(JSON.parse(JSON.stringify(this.$parent.mapData)))
})
}, },
watch:{ watch:{
mapData:{ mapData:{
handler(newValue,oldValue){ 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]; var toCoord = this.geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) { if (fromCoord && toCoord) {
res.push([ res.push([
// { {
// coord: toCoord, coord: toCoord,
// fromName: dataItem[0].name, fromName: dataItem[0].name,
// value: dataItem[0].value, value: dataItem[0].value,
// // name: dataItem[0].name, // name: dataItem[0].name,
// visualMap: false, visualMap: false,
// },
// {
// coord: fromCoord,
// toName: dataItem[1].name,
// visualMap: false,
// }, },
{ {
fromName: dataItem[0].name, coord: fromCoord,
toName: dataItem[1].name, toName: dataItem[1].name,
coords: [ visualMap: false,
toCoord,
fromCoord,
]
}, },
]); ]);
} }
} }
return res; 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; var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) { for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) { if (yMax < this.mapData[j].value) {
@ -217,8 +208,6 @@ export default {
var color = ['#000']; var color = ['#000'];
// 迁入地特殊显示//广东 // 迁入地特殊显示//广东
[[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => { [[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => {
console.log(item[1])
console.log(convertData(this.datas));
series.push( series.push(
{ {
type: "lines", type: "lines",
@ -226,76 +215,77 @@ export default {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter(params) { formatter(params) {
// console.log(params);
}, },
}, },
effect: { effect: {
show: true, show: true,
period: 6, // 箭头指向速度，值越小速度越快 period: 10, // 箭头指向速度，值越小速度越快
trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重 trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", // 箭头图标 symbol: "arrow", // 箭头图标
symbolSize: 5, // 图标大小 symbolSize: 6, // 图标大小
trailColor: '#ffd419',
color: '#ffd419', //流动点颜色
}, },
lineStyle: { lineStyle: {
// normal: { // normal: {
color: color[i], color: "#ffd419",
width: 3, // 尾迹线条宽度 width: 1, // 尾迹线条宽度
opacity: 0.6, // 尾迹线条透明度 opacity: 0.6, // 尾迹线条透明度
curveness: 0.2, // 尾迹线条曲直度 curveness: 0.2, // 尾迹线条曲直度
// }, // },
}, },
data: convertData(item[1]), data: convertData(item[1]),
}, },
{ // {
type: "effectScatter", // type: "effectScatter",
coordinateSystem: "geo", // coordinateSystem: "geo",
zlevel: 2, // zlevel: 2,
rippleEffect: { // rippleEffect: {
// 涟漪特效 // // 涟漪特效
period: 4, // 动画时间，值越小速度越快 // period: 4, // 动画时间，值越小速度越快
brushType: "stroke", // 波纹绘制方式 stroke, fill // brushType: "stroke", // 波纹绘制方式 stroke, fill
scale: 3, // 波纹圆环最大限制，值越大波纹越大 // scale: 3, // 波纹圆环最大限制，值越大波纹越大
}, // },
tooltip: { // tooltip: {
trigger: "item", // trigger: "item",
formatter(params) { // formatter(params) {
return params.data.name + ':' + params.data.value[2] // return params.data.name + ':' + params.data.value[2]
}, // },
}, // },
label: { // label: {
normal: { // normal: {
show: true, // show: true,
position: "right", // 显示位置 // position: "right", // 显示位置
offset: [5, 0], // 偏移设置 // offset: [5, 0], // 偏移设置
formatter(params) { // formatter(params) {
// 圆环显示文字 // // 圆环显示文字
return ''; // return '';
}, // },
fontSize: 13, // fontSize: 13,
}, // },
emphasis: { // emphasis: {
show: true, // show: true,
}, // },
}, // },
symbol: "circle", // symbol: "circle",
symbolSize: 3, // symbolSize: 3,
// itemStyle: { // // itemStyle: {
// normal: { // // normal: {
// // show: false, // // // show: false,
// color: "#000", // // color: "#000",
// }, // // },
// }, // // },
itemStyle: { // itemStyle: {
color: "#000" // color: "#000"
}, // },
data: item[1].map((dataItem) => { // data: item[1].map((dataItem) => {
return { // return {
visualMap: false, // visualMap: false,
name: dataItem[0].name, // name: dataItem[0].name,
value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]), // value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}; // };
}), // }),
}, // },
{ {
name: "数据名称", name: "数据名称",
type: "map", type: "map",
@ -306,32 +296,38 @@ export default {
trigger: "item", trigger: "item",
formatter: "{b}<br/>{c} (件)", formatter: "{b}<br/>{c} (件)",
}, },
itemStyle: { aspectScale:'1.5',
normal: { label: {
borderWidth: 1, show: true,
borderColor: "#0e94eb", textStyle:{
label: { color:'#fff'
show: false, }
},
},
emphasis: {
// 也是选中样式
borderWidth: 1,
borderColor: "#fff",
backgroundColor: "red",
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, data: this.mapData,
} }
); );
}); });
console.log(series);
this.myChart1 = this.$echarts.init(document.getElementById("chart_map")); this.myChart1 = this.$echarts.init(document.getElementById("chart_map"));
// this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps')); // this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps'));
// this.$echarts.registerMap("china1", china1, {}); // this.$echarts.registerMap("china1", china1, {});
@ -359,14 +355,14 @@ export default {
text: ["高", "低"], text: ["高", "低"],
orient: "horizontal", orient: "horizontal",
itemWidth: 15, itemWidth: 15,
itemHeight: 200, itemHeight: 150,
right: 0, right: 0,
bottom: 30, bottom: 3,
inRange: { inRange: {
color: ["#75ddff", "#0e94eb"], color: ["#1e73dd", "#04296f"],
}, },
textStyle: { textStyle: {
color: "#000", color: "#fff",
}, },
}, },
geo: { geo: {
@ -377,6 +373,7 @@ export default {
show: false, show: false,
}, },
}, },
aspectScale:'1.5',
roam: true, // 是否允许缩放 roam: true, // 是否允许缩放
itemStyle: { itemStyle: {
normal: { normal: {
@ -442,9 +439,6 @@ export default {
} }
return res; return res;
}; };
console.log(convertData(this.datas))
// var color = ['#000'];
var seriesData = []; var seriesData = [];
this.datas.map((item, i) => { this.datas.map((item, i) => {
seriesData.push( seriesData.push(
@ -453,7 +447,6 @@ export default {
} }
); );
}) })
console.log(seriesData)
var yMax = 0; var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) { for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) { if (yMax < this.mapData[j].value) {
@ -468,7 +461,6 @@ export default {
this.mapData[index].label = {show:false} this.mapData[index].label = {show:false}
} }
}) })
console.log(this.mapData)
let option = { let option = {
// backgroundColor: '#000f1e', // backgroundColor: '#000f1e',

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

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

Write Preview
Loading…
Cancel
Save