ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update--中国地图-路线图调整

Browse Source
qianming 2 years ago
parent 674878f65c
commit 9241a593c5
1 changed files with 185 additions and 39 deletions
Show Stats Download Patch File Download Diff File

224
report-ui/src/views/bigscreenDesigner/designer/widget/widgetMap.vue
Unescape Escape View File

@ -1,10 +1,11 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize />
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import "../../../../../node_modules/echarts/map/js/china.js";
let GZData = [
[
{
@ -17,7 +18,7 @@ let GZData = [
],
[
{
name: "广州"
name: "上海"
},
{
name: "太原",
@ -26,7 +27,7 @@ let GZData = [
],
[
{
name: "广州"
name: "上海"
},
{
name: "长春",
@ -213,9 +214,6 @@ let geoCoordMap = {
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
};
let type = "流出";
let color = ["#a6c84c", "#ffa022", "#46bee9"];
let tempData = ["广州", GZData];
let planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
export default {
@ -228,17 +226,14 @@ export default {
return {
options: {
title: {
text: "模拟迁徙",
subtext: "数据纯属虚构",
left: "center",
textStyle: {
color: "#fff"
}
},
tooltip: {
/*tooltip: {
trigger: "item",
formatter: function(params) {
console.log(params);
if (params.seriesType == "effectScatter") {
if ("流入" == type) {
return (
@ -247,9 +242,8 @@ export default {
params.data.name +
" ---> " +
params.seriesName +
"<br />人数：" +
params.data.value[2] +
"人"
"<br />" +
params.data.value[2]
);
} else {
return (
@ -257,9 +251,8 @@ export default {
params.seriesName +
" ---> " +
params.data.name +
"<br />人数：" +
params.data.value[2] +
"人"
"<br />" +
params.data.value[2]
);
}
} else if (params.seriesType == "lines") {
@ -270,9 +263,8 @@ export default {
params.data.toName +
" ---> " +
params.data.fromName +
"<br />人数：" +
params.data.value +
"人"
"<br />" +
params.data.value
);
} else {
return (
@ -281,32 +273,43 @@ export default {
params.data.fromName +
" ---> " +
params.data.toName +
"<br />人数：" +
params.data.value +
"人"
"<br />" +
params.data.value
);
}
} else {
return params.name;
}
}
},*/
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "线路：" + params.data.name + "" + params.data.value[2];
} else if (params.seriesType == "lines") {
return params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value;
} else {
return params.name;
}
}
},
legend: {
show: false,
orient: "vertical",
top: "bottom",
left: "right",
data: ["广州"],
show: true,
orient: 'vertical',
top: 'bottom',
left: 'right',
//data:['北京 Top10', '上海 Top10', '广州 Top10'],
textStyle: {
color: "#fff"
color: '#fff'
},
selectedMode: "single"
selectedMode: 'multiple',
// selectedMode: "single"
},
geo: {
map: "china",
label: {
emphasis: {
//show: false,
show: true,
color: "white"
}
@ -343,22 +346,28 @@ export default {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
created() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsSetup = this.value.setup;
},
mounted() {
this.initData();
this.initData2();
this.editorOptions();
},
methods: {
initData() {
const options = this.options;
options.series.push(
{
name: tempData[0],
//name: tempData[0],
type: "lines",
zlevel: 1,
effect: {
@ -413,7 +422,7 @@ export default {
formatter: "{b}"
}
},
symbolSize: function(val) {
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
@ -421,7 +430,7 @@ export default {
color: color[0]
}
},
data: tempData[1].map(function(dataItem) {
data: tempData[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
@ -431,16 +440,56 @@ export default {
);
this.options = options;
},
convertData(data) {
initData2() {
const optins = this.options;
optins.series.push({
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 0,
curveness: 0.2
}
},
data: convertData(GZData)
},);
},
/* convertData(data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let fromCoord = geoCoordMap[dataItem[0].name];
let toCoord = geoCoordMap[dataItem[1].name];
if ("流入" == type) {
fromCoord = geoCoordMap[dataItem[1].name];
toCoord = geoCoordMap[dataItem[0].name];
}
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
},*/
convertData2(data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let fromCoord = geoCoordMap[dataItem[0].name];
let toCoord = geoCoordMap[dataItem[1].name];
if ("流入" == type) {
fromCoord = geoCoordMap[dataItem[1].name];
toCoord = geoCoordMap[dataItem[0].name];
}
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
@ -451,6 +500,102 @@ export default {
}
}
return res;
},
editorOptions() {
this.setOptionsTitle();
this.setOptionsData();
},
// 标题设置
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.show = optionsSetup.isNoTitle;
title.text = optionsSetup.titleText;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize
};
this.options.title = title;
},
//数据解析
setOptionsData() {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(val) {
this.options.series[0]["data"] = val;
const optionsSetup = this.optionsSetup;
const label = this.options.series[1]["label"];
/*const normal = {
show: true,
color: "#fff",
fontWeight: "bold",
position: "inside",
formatter: function(para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor,
fontWeight: optionsSetup.fontDataWeight
}
}
};
const data = convertData(val);
this.options.series[1]["data"] = data;
label["normal"] = normal;*/
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then(res => {
this.renderingFn(res);
});
},
renderingFn(val) {
this.options.series[0]["data"] = val;
const optionsSetup = this.optionsSetup;
const label = this.options.series[1]["label"];
const normal = {
show: true,
color: "#fff",
fontWeight: "bold",
position: "inside",
formatter: function (para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor,
fontWeight: optionsSetup.fontDataWeight
}
}
};
const data = convertData(val);
this.options.series[1]["data"] = data;
label["normal"] = normal;
}
}
};
@ -460,6 +605,7 @@ export default {
width: 100%;
height: 100%;
}
.echarts {
width: 100%;
height: 100%;

Write Preview
Loading…
Cancel
Save