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