feat:重庆市工程管理有限公司数字化提升项目 大屏
This commit is contained in:
parent
2e17ddb4b6
commit
21a93086b6
@ -513,242 +513,239 @@ export default {
|
||||
})
|
||||
);
|
||||
},
|
||||
// initMiddleMap() {
|
||||
// echarts.registerMap("chongqing", jsData);
|
||||
// const mainMap = document.getElementById("middleMap");
|
||||
// this.mainMapIns = echarts.init(mainMap);
|
||||
// const dataList = [
|
||||
// {
|
||||
// location: [87.2305571, 42.952565],
|
||||
// name: "新疆维吾尔自治区",
|
||||
// money: "10",
|
||||
// project: "10",
|
||||
// },
|
||||
// {
|
||||
// location: [87.6720922, 30.4421226],
|
||||
// name: "西藏自治区",
|
||||
// number: "115",
|
||||
// money: "15",
|
||||
// project: "18",
|
||||
// },
|
||||
// {
|
||||
// location: [100.3294324, 37.073776],
|
||||
// name: "甘肃省",
|
||||
// money: "12",
|
||||
// project: "15",
|
||||
// },
|
||||
// {
|
||||
// location: [115.2680375, 42.6545234],
|
||||
// name: "内蒙古自治区",
|
||||
// money: "8",
|
||||
// project: "10",
|
||||
// },
|
||||
// {
|
||||
// location: [117.6596861, 35.494953],
|
||||
// name: "山东省",
|
||||
// money: "120",
|
||||
// project: "15",
|
||||
// },
|
||||
// {
|
||||
// location: [101.6172432, 30.8557071],
|
||||
// name: "四川省",
|
||||
// money: "15",
|
||||
// project: "10",
|
||||
// },
|
||||
// {
|
||||
// location: [109.5096669, 21.9042145],
|
||||
// name: "广西壮族自治区",
|
||||
// money: "25",
|
||||
// project: "15",
|
||||
// },
|
||||
// {
|
||||
// location: [115.1760343, 25.8285884],
|
||||
// name: "江西省",
|
||||
// money: "20",
|
||||
// project: "16",
|
||||
// },
|
||||
// ];
|
||||
// this.mainMapIns.setOption(
|
||||
// {
|
||||
// baseOption: {
|
||||
// geo: {
|
||||
// aspectScale: 1, //长宽比
|
||||
// map: "chongqing",
|
||||
// roam: false,
|
||||
// itemStyle: {
|
||||
// borderColor: "#1877cd",
|
||||
// borderWidth: 2,
|
||||
// areaColor: {
|
||||
// type: "radial",
|
||||
// x: 0.5,
|
||||
// y: 0.5,
|
||||
// r: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#000000", // 0% 处的颜色// 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "#514768", // 100% 处的颜色 // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
// },
|
||||
// shadowColor: "#0938b6",
|
||||
// shadowOffsetX: -10,
|
||||
// shadowOffsetY: -10,
|
||||
// shadowBlur: 19,
|
||||
// emphasis: {
|
||||
// areaColor: {
|
||||
// type: "radial",
|
||||
// x: 0.5,
|
||||
// y: 0.5,
|
||||
// r: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#0335b5", // 0% 处的颜色// 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "#fba509", // 100% 处的颜色 // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
// },
|
||||
// borderWidth: 2,
|
||||
// borderColor: "#7e95d2",
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// className: "tooltip-frame",
|
||||
// },
|
||||
// series: [
|
||||
// // 正常设备
|
||||
// {
|
||||
// type: "scatter",
|
||||
// coordinateSystem: "geo",
|
||||
// tooltip: {
|
||||
// backgroundColor: '#000',
|
||||
// formatter: (val) => {
|
||||
// const { data } = val;
|
||||
// const { INFO } = data;
|
||||
// return `<div style="
|
||||
// background:#5b9ad4;
|
||||
// display:flex;
|
||||
// align-items:center;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-around;color:#fff;width:150px;height:0px">
|
||||
// <div style="width:100%,text-align:center;">${data.name}</div>
|
||||
// <div style="display: flex; justify-content: space-around; align-items:center;width:100%;">
|
||||
// <div>客户数量</div>
|
||||
// <div>${data.project}</div>
|
||||
// </div>
|
||||
// <div style="display: flex; justify-content: space-around; align-items:center;width:100%;">
|
||||
// <div>合同金额</div>
|
||||
// <div>${data.money}亿</div>
|
||||
// </div>
|
||||
// </div>`;
|
||||
// },
|
||||
// },
|
||||
// symbol: "image://" + NotImg,
|
||||
// symbolSize: [20, 20],
|
||||
// symbolOffset: [0, -25],
|
||||
// radius: "50%",
|
||||
// data: dataList.map((item) => {
|
||||
// const INFO = {};
|
||||
// for (let key in item) {
|
||||
// INFO[key] = item[key];
|
||||
// }
|
||||
// return {
|
||||
// value: item.location,
|
||||
// name: item.name,
|
||||
// money: item.money,
|
||||
// project: item.project,
|
||||
// number: item.number,
|
||||
// };
|
||||
// }),
|
||||
// },
|
||||
// {
|
||||
// show: false,
|
||||
// type: "map",
|
||||
// map: "chongqing",
|
||||
// zoom: 1,
|
||||
// aspectScale: 1,
|
||||
// itemStyle: {
|
||||
// borderColor: "#05d6f8",
|
||||
// borderWidth: 2,
|
||||
// areaColor: {
|
||||
// type: "radial",
|
||||
// x: 0.5,
|
||||
// y: 0.5,
|
||||
// r: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#012188", // 0% 处的颜色// 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "#0335b5", // 100% 处的颜色 // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
// },
|
||||
// shadowColor: "#0938b6",
|
||||
// shadowOffsetX: -10,
|
||||
// shadowOffsetY: -10,
|
||||
// shadowBlur: 19,
|
||||
// emphasis: {
|
||||
// areaColor: {
|
||||
// type: "radial",
|
||||
// x: 0.5,
|
||||
// y: 0.5,
|
||||
// r: 0.8,
|
||||
// colorStops: [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#0335b5", // 0% 处的颜色// 0% 处的颜色
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "#fba509", // 100% 处的颜色 // 100% 处的颜色
|
||||
// },
|
||||
// ],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
// },
|
||||
// borderWidth: 2,
|
||||
// borderColor: "#fda809",
|
||||
// },
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: "#ffffffA0",
|
||||
// fontWeight: "500",
|
||||
// fontSize: "10",
|
||||
// emphasis: {
|
||||
// color: "#ffffff",
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// show: false,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// true
|
||||
// );
|
||||
// window.addEventListener("resize", () => {
|
||||
// this.mainMapIns && this.mainMapIns.resize();
|
||||
// });
|
||||
// },
|
||||
initMiddleMap() {
|
||||
|
||||
echarts.registerMap("chongqing", jsData);
|
||||
const mainMap = document.getElementById("middleMap");
|
||||
this.mainMapIns = echarts.init(mainMap);
|
||||
const dataList = [
|
||||
{
|
||||
location: [87.2305571, 42.952565],
|
||||
name: "新疆维吾尔自治区",
|
||||
money: "10",
|
||||
project: "10",
|
||||
},
|
||||
{
|
||||
location: [87.6720922, 30.4421226],
|
||||
name: "西藏自治区",
|
||||
number: "115",
|
||||
money: "15",
|
||||
project: "18",
|
||||
},
|
||||
{
|
||||
location: [100.3294324, 37.073776],
|
||||
name: "甘肃省",
|
||||
money: "12",
|
||||
project: "15",
|
||||
},
|
||||
{
|
||||
location: [115.2680375, 42.6545234],
|
||||
name: "内蒙古自治区",
|
||||
money: "8",
|
||||
project: "10",
|
||||
},
|
||||
{
|
||||
location: [117.6596861, 35.494953],
|
||||
name: "山东省",
|
||||
money: "120",
|
||||
project: "15",
|
||||
},
|
||||
{
|
||||
location: [101.6172432, 30.8557071],
|
||||
name: "四川省",
|
||||
money: "15",
|
||||
project: "10",
|
||||
},
|
||||
{
|
||||
location: [109.5096669, 21.9042145],
|
||||
name: "广西壮族自治区",
|
||||
money: "25",
|
||||
project: "15",
|
||||
},
|
||||
{
|
||||
location: [115.1760343, 25.8285884],
|
||||
name: "江西省",
|
||||
money: "20",
|
||||
project: "16",
|
||||
},
|
||||
];
|
||||
this.mainMapIns.setOption(
|
||||
{
|
||||
baseOption: {
|
||||
geo: {
|
||||
aspectScale: 1, //长宽比
|
||||
map: "chongqing",
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
borderColor: "#1877cd",
|
||||
borderWidth: 2,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#000000", // 0% 处的颜色// 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#514768", // 100% 处的颜色 // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "#0938b6",
|
||||
shadowOffsetX: -10,
|
||||
shadowOffsetY: -10,
|
||||
shadowBlur: 19,
|
||||
emphasis: {
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0335b5", // 0% 处的颜色// 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#fba509", // 100% 处的颜色 // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
borderWidth: 2,
|
||||
borderColor: "#7e95d2",
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
className: "tooltip-frame",
|
||||
},
|
||||
series: [
|
||||
// 正常设备
|
||||
{
|
||||
type: "scatter",
|
||||
coordinateSystem: "geo",
|
||||
tooltip: {
|
||||
backgroundColor: '#000',
|
||||
formatter: (val) => {
|
||||
const { data } = val;
|
||||
const { INFO } = data;
|
||||
return `<div style="
|
||||
background:#5b9ad4;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;color:#fff;width:150px;height:0px">
|
||||
<div style="width:100%,text-align:center;">${data.name}</div>
|
||||
<div style="display: flex; justify-content: space-around; align-items:center;width:100%;">
|
||||
<div>客户数量</div>
|
||||
<div>${data.project}</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-around; align-items:center;width:100%;">
|
||||
<div>合同金额</div>
|
||||
<div>${data.money}亿</div>
|
||||
</div>
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
symbol: "image://" + NotImg,
|
||||
symbolSize: [20, 20],
|
||||
symbolOffset: [0, -25],
|
||||
radius: "50%",
|
||||
data: dataList.map((item) => {
|
||||
const INFO = {};
|
||||
for (let key in item) {
|
||||
INFO[key] = item[key];
|
||||
}
|
||||
return {
|
||||
value: item.location,
|
||||
name: item.name,
|
||||
money: item.money,
|
||||
project: item.project,
|
||||
number: item.number,
|
||||
};
|
||||
}),
|
||||
},
|
||||
{
|
||||
show: false,
|
||||
type: "map",
|
||||
map: "chongqing",
|
||||
zoom: 1,
|
||||
aspectScale: 1,
|
||||
itemStyle: {
|
||||
borderColor: "#05d6f8",
|
||||
borderWidth: 2,
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#012188", // 0% 处的颜色// 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#0335b5", // 100% 处的颜色 // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
shadowColor: "#0938b6",
|
||||
shadowOffsetX: -10,
|
||||
shadowOffsetY: -10,
|
||||
shadowBlur: 19,
|
||||
emphasis: {
|
||||
areaColor: {
|
||||
type: "radial",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0335b5", // 0% 处的颜色// 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#fba509", // 100% 处的颜色 // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
globalCoord: false, // 缺省为 false
|
||||
},
|
||||
borderWidth: 2,
|
||||
borderColor: "#fda809",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffffA0",
|
||||
fontWeight: "500",
|
||||
fontSize: "10",
|
||||
emphasis: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
true
|
||||
);
|
||||
window.addEventListener("resize", () => {
|
||||
this.mainMapIns && this.mainMapIns.resize();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user