This commit is contained in:
lll
parent
dcd7e5f8ba
commit
27af7073e3
|
|
@ -2,7 +2,9 @@
|
|||
<div class="box">
|
||||
<div class="title">
|
||||
<img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
|
||||
<p>客户侧总体用能情况分析</p>
|
||||
<div class="title_tit">
|
||||
<p>客户侧总体用能情况分析</p>
|
||||
</div>
|
||||
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
|
||||
</div>
|
||||
<div class="containter">
|
||||
|
|
@ -131,7 +133,6 @@
|
|||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { contain } from "postcss-pxtorem/lib/filter-prop-list";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -413,7 +414,7 @@ export default {
|
|||
} else if (index == 1) {
|
||||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;backgroundColor:#4C4D6A;';
|
||||
} else if (index == 2) {
|
||||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#202450;';
|
||||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#44324B;';
|
||||
}
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
|
|
@ -1305,26 +1306,36 @@ export default {
|
|||
.title {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
background: url(../assets/客户侧总体用能情况分析/标题背景.png);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
// margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
p {
|
||||
height: 47px;
|
||||
font-size: 44px;
|
||||
font-family: "Alibaba PuHuiTi";
|
||||
font-weight: 600;
|
||||
line-height: 47px;
|
||||
letter-spacing: 6px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.title_tit {
|
||||
width: 1600px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: url(../assets/tan/分组\ 7.png);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
p {
|
||||
width: 527px;
|
||||
height: 47px;
|
||||
font-size: 44px;
|
||||
font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 47px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
margin-left: 490px;
|
||||
// margin-left: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
img:nth-of-type(1) {
|
||||
|
|
|
|||
|
|
@ -1390,13 +1390,70 @@ export default {
|
|||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
//获取山东地图数据。
|
||||
let src = require("../assets/shandong.json");
|
||||
|
||||
//注入山东地图数据。
|
||||
let src = require("../assets/shandong.json");
|
||||
function registerMap() {
|
||||
echarts.registerMap("山东", src);
|
||||
|
||||
//拿到json数据
|
||||
var mapFeatures = echarts.getMap("山东").geoJson.features;
|
||||
var geoCoordMap = {};
|
||||
//拿到需要的字段
|
||||
mapFeatures.forEach(function (v) {
|
||||
// 地区名称
|
||||
var name = v.properties.name;
|
||||
// 地区经纬度
|
||||
geoCoordMap[name] = v.properties.center;
|
||||
});
|
||||
//在基础数据中加入value字段 并加入到数组中
|
||||
var convertData = function (data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
let option = {
|
||||
// 动效散点图层，使用2D地图坐标系
|
||||
geo: {
|
||||
// 2D地图坐标系
|
||||
show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
|
||||
map: "山东",
|
||||
roam: false, // 禁用缩放、拖拽
|
||||
layoutCenter: ["50%", "50%"], // 地图中心位置
|
||||
layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
|
||||
aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
|
||||
zlevel: 1,
|
||||
},
|
||||
series: [
|
||||
//动态散点系列
|
||||
{
|
||||
type: "effectScatter",
|
||||
coordinateSystem: "geo",
|
||||
zlevel: 3,
|
||||
rippleEffect: {
|
||||
//涟漪特效
|
||||
period: 4, //动画时间，值越小速度越快
|
||||
brushType: "fill", //波纹绘制方式 stroke, fill
|
||||
scale: 10, //波纹圆环最大限制，值越大波纹越大
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 7,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: "#D8C74A",
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
|
@ -1414,42 +1471,13 @@ export default {
|
|||
borderWidth: 2, // 高亮时的边框宽度
|
||||
},
|
||||
label: {
|
||||
show: true, //是否显示市
|
||||
formatter: function (params) {
|
||||
var name = params.name;
|
||||
var value = params.value;
|
||||
var text = ` {fline|${value}}\n{tline|${name}} `;
|
||||
return text;
|
||||
},
|
||||
textStyle: {
|
||||
color: "#000", //文字颜色
|
||||
// fontSize: 16, //文字大小
|
||||
fontSize: "0.0833rem", //文字大小
|
||||
fontFamily: "微软雅黑",
|
||||
// backgroundColor: {
|
||||
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||||
// },
|
||||
// padding: [15, 20],
|
||||
},
|
||||
rich: {
|
||||
fline: {
|
||||
padding: [0, 35],
|
||||
color: "#FDCC00",
|
||||
// fontSize: 14,
|
||||
fontSize: "0.0729rem",
|
||||
fontWeight: 600,
|
||||
},
|
||||
tline: {
|
||||
padding: [0, 27],
|
||||
color: "#fff",
|
||||
// fontSize: 12,
|
||||
fontSize: "0.0625rem",
|
||||
},
|
||||
},
|
||||
fontSize: "0.06rem", // 选中地图文字字号和字体颜色
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true, //是否显示市
|
||||
zlevel: 4,
|
||||
formatter: function (params) {
|
||||
var name = params.name;
|
||||
var value = params.value;
|
||||
|
|
@ -1458,27 +1486,25 @@ export default {
|
|||
},
|
||||
textStyle: {
|
||||
color: "#000", //文字颜色
|
||||
// fontSize: 16, //文字大小
|
||||
fontSize: "0.0833rem", //文字大小
|
||||
fontSize: "0.08rem", //文字大小
|
||||
fontFamily: "微软雅黑",
|
||||
// backgroundColor: {
|
||||
// image: "../assets/客户侧总体用能情况分析/光标.png",
|
||||
// image: require("../assets/客户侧总体用能情况分析/光标.png"),
|
||||
// },
|
||||
// padding: [15, 20],
|
||||
// backgroundSize: "10px 10px",
|
||||
// backgroundPosition: "top left",
|
||||
},
|
||||
rich: {
|
||||
fline: {
|
||||
padding: [0, 35],
|
||||
color: "#FDCC00",
|
||||
// fontSize: 14,
|
||||
fontSize: "0.0729rem",
|
||||
fontSize: "0.07rem",
|
||||
fontWeight: 600,
|
||||
},
|
||||
tline: {
|
||||
padding: [0, 27],
|
||||
color: "#fff",
|
||||
// fontSize: 12,
|
||||
fontSize: "0.0625rem",
|
||||
fontSize: "0.06rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -1528,6 +1554,8 @@ export default {
|
|||
animation: true,
|
||||
};
|
||||
|
||||
option.series[0].data = convertData(data); // 设置动效散点数据
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.on("click", chartClick);
|
||||
//点击地图区域事件
|
||||
|
|
@ -1761,20 +1789,19 @@ export default {
|
|||
background-size: cover;
|
||||
text-align: center;
|
||||
p {
|
||||
width: 527px;
|
||||
height: 47px;
|
||||
font-size: 44px;
|
||||
font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 47px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
margin-left: 490px;
|
||||
// margin-left: -50px;
|
||||
width: 527px;
|
||||
height: 47px;
|
||||
font-size: 44px;
|
||||
font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 47px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
margin-left: 490px;
|
||||
// margin-left: -50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
img:nth-of-type(1) {
|
||||
width: 231px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue