- 
+ 
@@ -93,8 +93,8 @@
+
客户侧总体用能情况分析
企业用电量排名
-
-
-
-
{{ index + 1 }}
+ -
+
{{ index + 1 }}
{{ item.name }}
{{ item.value }}
@@ -408,11 +408,11 @@ export default {
methods: {
listClass(index) {
if (index == 0) {
- return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;';
+ return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
} else if (index == 1) {
- return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;';
+ return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;backgroundColor:#4C4D6A;';
} else if (index == 2) {
- return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;';
+ return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#202450;';
}
},
defineEcharts(dom, option) {
@@ -425,7 +425,6 @@ export default {
myChart.resize();
});
},
-
//用户行业占比
initYhhyzb() {
let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
@@ -488,7 +487,7 @@ export default {
legend: {
orient: "vertical",
icon: "circle",
- x: "70%",
+ x: "65%",
y: "center",
itemWidth: 12,
itemHeight: 12,
@@ -551,35 +550,62 @@ export default {
},
//用能分类占比
initYnflzb() {
- let getParametricEquation = function (
+ let optionData = [
+ {
+ name: "楼宇",
+ value: 60,
+ itemStyle: {
+ color: "#91DAFF",
+ },
+ },
+ {
+ name: "工业",
+ value: 44,
+ itemStyle: {
+ color: "#4466E1",
+ },
+ },
+ {
+ name: "其他",
+ value: 32,
+ itemStyle: {
+ color: "#83E7BA",
+ },
+ },
+ ];
+ let option = getPie3D(optionData, 0.59);
+ // 生成扇形的曲面参数方程
+ function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
- height
+ h
) {
// 计算
- let midRatio = (startRatio + endRatio) / 2;
+ const midRatio = (startRatio + endRatio) / 2;
- let startRadian = startRatio * Math.PI * 2;
- let endRadian = endRatio * Math.PI * 2;
- let midRadian = midRatio * Math.PI * 2;
+ const startRadian = startRatio * Math.PI * 2;
+ const endRadian = endRatio * Math.PI * 2;
+ const midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
+ // eslint-disable-next-line no-param-reassign
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+ // eslint-disable-next-line no-param-reassign
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
- let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
- let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+ const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+ const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
- let hoverRate = isHovered ? 1.05 : 1;
+ const hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
@@ -595,7 +621,7 @@ export default {
step: Math.PI / 20,
},
- x: function (u, v) {
+ x(u, v) {
if (u < startRadian) {
return (
offsetX +
@@ -611,7 +637,7 @@ export default {
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
- y: function (u, v) {
+ y(u, v) {
if (u < startRadian) {
return (
offsetY +
@@ -627,34 +653,36 @@ export default {
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
- z: function (u, v) {
+ z(u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
- return Math.sin(u);
+ return Math.sin(u) * h * 0.1;
}
- return Math.sin(v) > 0 ? 1 * height : -1;
+ // 当前图形的高度是Z根据h（每个value的值决定的）
+ return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
- };
+ }
// 生成模拟 3D 饼图的配置项
- let getPie3D = function (pieData, internalDiameterRatio) {
- let series = [];
+ function getPie3D(pieData, internalDiameterRatio) {
+ const series = [];
+ // 总和
let sumValue = 0;
let startValue = 0;
let endValue = 0;
- let legendData = [];
- let k =
+ const legendData = [];
+ const k =
typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
// 为每一个饼图数据，生成一个 series-surface 配置
- for (let i = 0; i < pieData.length; i++) {
+ for (let i = 0; i < pieData.length; i += 1) {
sumValue += pieData[i].value;
- let seriesItem = {
+ const seriesItem = {
name:
typeof pieData[i].name === "undefined"
? `series${i}`
@@ -668,17 +696,19 @@ export default {
pieStatus: {
selected: false,
hovered: false,
- k: k,
+ k,
},
};
- if (typeof pieData[i].itemStyle != "undefined") {
- let itemStyle = {};
+ if (typeof pieData[i].itemStyle !== "undefined") {
+ const { itemStyle } = pieData[i];
- typeof pieData[i].itemStyle.color != "undefined"
+ // eslint-disable-next-line no-unused-expressions
+ typeof pieData[i].itemStyle.color !== "undefined"
? (itemStyle.color = pieData[i].itemStyle.color)
: null;
- typeof pieData[i].itemStyle.opacity != "undefined"
+ // eslint-disable-next-line no-unused-expressions
+ typeof pieData[i].itemStyle.opacity !== "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
@@ -686,12 +716,11 @@ export default {
}
series.push(seriesItem);
}
-
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
- for (let i = 0; i < series.length; i++) {
+ for (let i = 0; i < series.length; i += 1) {
endValue = startValue + series[i].pieData.value;
- console.log(series[i]);
+
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = getParametricEquation(
@@ -700,190 +729,109 @@ export default {
false,
false,
k,
- series[i].pieData.value
+ // 我这里做了一个处理，使除了第一个之外的值都是10
+ series[i].pieData.value === series[0].pieData.value ? 35 : 10
);
startValue = endValue;
legendData.push(series[i].name);
}
- return series;
- };
- // 传入数据生成 option
- const optionsData = [
- {
- name: "楼宇",
- value: 4256,
- itemStyle: {
- // opacity: 0.5,
- color: "#2A71FF",
- },
- },
- {
- name: "工业",
- value: 2356,
- itemStyle: {
- // opacity: 0.5,
- color: "#00EDFE",
+ // 准备待返回的配置项，把准备好的 legendData、series 传入。
+ const option = {
+ // animation: false,
+ legend: {
+ left: "80%",
+ top: "40%",
+ data: ["楼宇", "工业", "其他"],
+ orient: "vertical",
+ icon: "roundRect",
+ itemWidth: 10, // 图标宽度
+ itemHeight: 10, // 图标高度
+ textStyle: {
+ fontSize: "0.06rem",
+ fontFamily: "AlibabaPuHuiTi",
+ fontWeight: 400,
+ color: "rgba(255,255,255,0.8)",
+ },
+ formatter: (name) => {
+ if (optionData.length) {
+ const item = optionData.filter((item) => item.name === name)[0];
+ return ` ${name} ${item.value}%`;
+ }
+ },
},
- },
- {
- name: "其他",
- value: 2018,
- itemStyle: {
- // opacity: 0.5,
- color: "#FEDB4B",
- },
- },
- ];
- const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
- series.push({
- name: "pie2d",
- type: "pie",
-
- label: {
- show: false,
- opacity: 1,
- fontSize: "0.07rem",
- lineHeight: 20,
- textStyle: {
- fontSize: "0.07rem",
- color: "#fff",
- },
- },
- labelLine: {
- length: 30,
- length2: 30,
- },
- startAngle: -30, //起始角度，支持范围[0, 360]。
- clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
- radius: ["40%", "60%"],
- // center: ["30%", "50%"],
- center: ["40%", "50%"],
- data: optionsData,
- itemStyle: {
- opacity: 0,
- },
- });
- let data = [
- {
- name: "楼宇",
- value: "30%",
- },
- {
- name: "工业",
- value: "30%",
- },
- {
- name: "其他",
- value: "40%",
- },
- ];
- // 准备待返回的配置项，把准备好的 legendData、series 传入。
- let option = {
- legend: {
- show: true,
tooltip: {
+ formatter: (params) => {
+ if (params.seriesName !== "mouseoutSeries") {
+ return `${
+ params.seriesName
+ }
${option.series[params.seriesIndex].pieData.value}`; + } + return ""; + }, + }, + xAxis3D: { + min: -1, + max: 1, + }, + yAxis3D: { + min: -1, + max: 1, + }, + zAxis3D: { + min: -1, + max: 1, + }, + grid3D: { show: false, + boxHeight: 10, + top: "0%", + viewControl: { + // 3d效果可以放大、旋转等，请自己去查看官方配置 + alpha: 20, + beta: 30, + autoRotate: false, // 禁用自动旋转 + distance: 200, // 初始视角距离主体的距离 + panMouseButton: "none", // 设置中键拖拽进行平移 + rotateMouseButton: "none", // 设置右键拖拽进行旋转 + zoomMouseButton: "none", // 禁用鼠标缩放 + }, + // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。 + postEffect: { + // 配置这项会出现锯齿，请自己去查看官方配置有办法解决 + enable: false, + bloom: { + enable: true, + bloomIntensity: 0.1, + }, + SSAO: { + enable: true, + quality: "medium", + radius: 2, + }, + // temporalSuperSampling: { + // enable: true, + // }, + }, }, - orient: "vertical", - data: data, - top: "center", - itemGap: 14, - itemHeight: 8, - itemWidth: 17, - right: "2%", - textStyle: { - color: "#fff", - fontSize: "0.06rem", - }, - formatter: function (name) { - let res = data.filter((v) => v.name === name); - res = res[0] || {}; - let unit = res.unit || ""; - return name + " " + res.value + unit; - }, - }, - animation: false, - tooltip: { - show: false, - formatter: (params) => { - if ( - params.seriesName !== "mouseoutSeries" && - params.seriesName !== "pie2d" - ) { - return `${ - params.seriesName - }
${ - option.series[params.seriesIndex].pieData.value + "%" - }`; - } - }, - textStyle: { - fontSize: "0.07rem", - }, - }, - title: { - x: "center", - top: "20", - textStyle: { - color: "#fff", - fontSize: "0.11rem", - }, - }, - // backgroundColor: "#0E3567", - labelLine: { - show: false, - lineStyle: { - color: "#7BC0CB", - }, - normal: { - show: true, - length: 10, - length2: 10, - }, - }, - label: { - show: false, - // position: "outside", - // formatter: "{b} \n{d}%", - // textStyle: { - // color: "#fff", - // fontSize: "14px", - // }, - }, - xAxis3D: { - min: -1, - max: 1, - }, - yAxis3D: { - min: -1, - max: 1, - }, - zAxis3D: { - min: -1, - max: 1, - }, - grid3D: { - show: false, - boxHeight: 0.01, - //top: '30%', - bottom: "500%", - left: "-7%", - // environment: "rgba(255,255,255,0)", - viewControl: { - distance: 180, - alpha: 25, - beta: 60, - }, - }, - series: series, - }; - this.defineEcharts("ynflzb", option); + series, + }; + return option; + } + let chartDom = document.getElementById("ynflzb"); + var myChart = this.$echarts.init(chartDom, null, { + devicePixelRatio: 10, // 设置为2或更高的值 + }); + myChart.setOption(option); + window.addEventListener("resize", function () { + myChart.resize(); + }); }, + //地图 initMap() { //后端返回的数据 var data = [ @@ -974,174 +922,173 @@ export default { myChart.resize(); }); //获取山东地图数据。 - $.get( - "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", - function (geojson) { - echarts.registerMap("山东", geojson); - let option = { - series: [ - { - tooltip: { - trigger: "item", - // show: false, - }, + let src = require("../assets/shandong.json"); + function registerMap() { + echarts.registerMap("山东", src); + let option = { + series: [ + { + tooltip: { + trigger: "item", + // show: false, + }, - name: "山东", - type: "map", - map: "山东", - boxDepth: 60, //地图倾斜度 - regionHeight: 6, //地图厚度 - aspectScale: 0.9, //地图长宽比 - emphasis: { - itemStyle: { - areaColor: "#70EAF4", // 高亮时候地图显示的颜色 - borderWidth: 2, // 高亮时的边框宽度 - }, - label: { - fontSize: "0.06rem", // 选中地图文字字号和字体颜色 - color: "#fff", - }, + name: "山东", + type: "map", + map: "山东", + boxDepth: 60, //地图倾斜度 + regionHeight: 6, //地图厚度 + aspectScale: 0.9, //地图长宽比 + emphasis: { + itemStyle: { + areaColor: "#70EAF4", // 高亮时候地图显示的颜色 + 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: "0.08rem", //文字大小 - fontFamily: "微软雅黑", - // backgroundColor: { - // image: "../assets/客户侧总体用能情况分析/光标.png", - // }, - // padding: [15, 20], - }, - rich: { - fline: { - padding: [0, 35], - color: "#FDCC00", - fontSize: "0.07rem", - fontWeight: 600, - }, - tline: { - padding: [0, 27], - color: "#fff", - fontSize: "0.06rem", - }, - }, + fontSize: "0.06rem", // 选中地图文字字号和字体颜色 + color: "#fff", }, - itemStyle: { - opacity: 0.8, // 透明度 - borderWidth: 2, //分界线宽度 - borderColor: "#0699E4", //分界线颜色 - areaColor: { - x: 0.5, - y: 0.7, - r: 0.5, - colorStops: [ - { - offset: 0, - color: "rgba(20,110,230,0.4)", - }, - { - offset: 1, - color: "rgba(6,33,121,0.4)", - }, - ], - global: false, // 缺省为 false - }, - }, - groundplane: { - show: true, - }, - data: data, - z: 999, - shading: "realistic", - // 真实感材质相关配置 shading: 'realistic'时有效 - realisticMaterial: { - detailTexture: "rgb(0, 102, 204)", // 纹理贴图 - textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - roughness: 0.8, // 调整光照模型的粗糙度 - metalness: 0.0, // 调整金属感，0.0 为非金属 - roughnessAdjust: 0, - }, - viewControl: { - distance: 90, // 地图视角 控制初始大小 - rotateSensitivity: 0, // 旋转 - zoomSensitivity: 1.5, // 缩放 - }, - zoom: 1.25, }, - ], - animation: true, - }; + 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: "0.08rem", //文字大小 + fontFamily: "微软雅黑", + // backgroundColor: { + // image: "../assets/客户侧总体用能情况分析/光标.png", + // }, + // padding: [15, 20], + }, + rich: { + fline: { + padding: [0, 35], + color: "#FDCC00", + fontSize: "0.07rem", + fontWeight: 600, + }, + tline: { + padding: [0, 27], + color: "#fff", + fontSize: "0.06rem", + }, + }, + }, + itemStyle: { + opacity: 0.8, // 透明度 + borderWidth: 2, //分界线宽度 + borderColor: "#0699E4", //分界线颜色 + areaColor: { + x: 0.5, + y: 0.7, + r: 0.5, + colorStops: [ + { + offset: 0, + color: "rgba(20,110,230,0.4)", + }, + { + offset: 1, + color: "rgba(6,33,121,0.4)", + }, + ], + global: false, // 缺省为 false + }, + }, + groundplane: { + show: true, + }, + data: data, + z: 999, + shading: "realistic", + // 真实感材质相关配置 shading: 'realistic'时有效 + realisticMaterial: { + detailTexture: "rgb(0, 102, 204)", // 纹理贴图 + textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + roughness: 0.8, // 调整光照模型的粗糙度 + metalness: 0.0, // 调整金属感，0.0 为非金属 + roughnessAdjust: 0, + }, + viewControl: { + distance: 90, // 地图视角 控制初始大小 + rotateSensitivity: 0, // 旋转 + zoomSensitivity: 1.5, // 缩放 + }, + zoom: 1.25, + }, + ], + animation: true, + }; - myChart.setOption(option); - myChart.on("click", chartClick); - //点击地图区域事件 - function chartClick(param) { - console.log(param); - myChart.setOption(option, false); - window.addEventListener("resize", function () { - myChart.resize(); - }); - // var selectedPro = param.name; - // if (!cityProper[selectedPro]) { - // option.series.splice(1); - // option.legend = null; - // option.visualMap = null; - // myChart.setOption(option, true); - // return; - // } - //获取点击区域数据 - // $.get(cityProper[selectedPro], function (geojson) { - // echarts.registerMap(selectedPro, geojson); - // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 - // option.series[0] = { - // name: "", - // type: "map", - // map: selectedPro, - // boxDepth: 80, //地图倾斜度 - // regionHeight: 5, //地图厚度 - // itemStyle: { - // normal: { - // label: { - // show: true, - // }, - // }, - // emphasis: { - // label: { - // show: true, - // }, - // }, - // }, - // groundplane: { - // show: false, - // }, - // data: data, - // shading: "realistic", - // // 真实感材质相关配置 shading: 'realistic'时有效 - // realisticMaterial: { - // detailTexture: "#fff", // 纹理贴图 - // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 - // metalness: 0, // 0材质是非金属 ，1金属 - // roughnessAdjust: 0, - // }, - // viewControl: { - // distance: 30, // 地图视角 控制初始大小 - // rotateSensitivity: 1, // 旋转 - // zoomSensitivity: 1, // 缩放 - // }, - // }; - // myChart.setOption(option); - // }); - } + myChart.setOption(option); + myChart.on("click", chartClick); + //点击地图区域事件 + function chartClick(param) { + console.log(param); + myChart.setOption(option, false); + window.addEventListener("resize", function () { + myChart.resize(); + }); + // var selectedPro = param.name; + // if (!cityProper[selectedPro]) { + // option.series.splice(1); + // option.legend = null; + // option.visualMap = null; + // myChart.setOption(option, true); + // return; + // } + //获取点击区域数据 + // $.get(cityProper[selectedPro], function (geojson) { + // echarts.registerMap(selectedPro, geojson); + // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 + // option.series[0] = { + // name: "", + // type: "map", + // map: selectedPro, + // boxDepth: 80, //地图倾斜度 + // regionHeight: 5, //地图厚度 + // itemStyle: { + // normal: { + // label: { + // show: true, + // }, + // }, + // emphasis: { + // label: { + // show: true, + // }, + // }, + // }, + // groundplane: { + // show: false, + // }, + // data: data, + // shading: "realistic", + // // 真实感材质相关配置 shading: 'realistic'时有效 + // realisticMaterial: { + // detailTexture: "#fff", // 纹理贴图 + // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 + // metalness: 0, // 0材质是非金属 ，1金属 + // roughnessAdjust: 0, + // }, + // viewControl: { + // distance: 30, // 地图视角 控制初始大小 + // rotateSensitivity: 1, // 旋转 + // zoomSensitivity: 1, // 缩放 + // }, + // }; + // myChart.setOption(option); + // }); } - ); + } + registerMap(); }, //用户资源分布情况 initfbqk() { @@ -1490,9 +1437,7 @@ export default { background: url("../assets/客户侧总体用能情况分析/用能量-框.png"); background-size: cover; margin-top: 6px; - position: relative; - .title { position: absolute; left: 190px; @@ -1592,14 +1537,16 @@ export default { #ynflzb { width: 100%; height: 100%; + padding-right: 40px; + box-sizing: border-box; } .pic { - width: 300px; + width: 250px; position: absolute; - height: 150px; - top: 100px; - left: 40px; + height: 120px; + top: 120px; + left: 70px; } } @@ -1650,6 +1597,7 @@ export default { text-align: center; border: 1px solid #b1b1b1; background-size: cover; + background-color: #203265; } p:nth-of-type(2) { @@ -1690,6 +1638,7 @@ export default { width: 100%; height: 100%; position: relative; + background: url(); display: flex; flex-direction: column; align-items: center; @@ -1708,8 +1657,8 @@ export default { } #yhzyfbqk { - width: 100%; - height: 100%; + width: 994px; + height: 324px; } } } diff --git a/src/views/TAN.vue b/src/views/TAN.vue index f1f0106..6a2c812 100644 --- a/src/views/TAN.vue +++ b/src/views/TAN.vue @@ -1391,34 +1391,27 @@ export default { myChart.resize(); }); //获取山东地图数据。 - $.get( - "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json", - function (geojson) { - echarts.registerMap("山东", geojson); - let option = { - series: [ - { - tooltip: { - trigger: "item", - // show: false, - }, - name: "山东", - type: "map", - map: "山东", - boxDepth: 60, //地图倾斜度 - regionHeight: 6, //地图厚度 - aspectScale: 0.9, //地图长宽比 - emphasis: { - itemStyle: { - areaColor: "#70EAF4", // 高亮时候地图显示的颜色 - borderWidth: 2, // 高亮时的边框宽度 - }, - label: { - // .0625rem /* 12/192 */ - // fontSize: 12, // 选中地图文字字号和字体颜色 - fontSize: "0.0625rem", // 选中地图文字字号和字体颜色 - color: "#fff", - }, + let src = require("../assets/shandong.json"); + + function registerMap() { + echarts.registerMap("山东", src); + let option = { + series: [ + { + tooltip: { + trigger: "item", + // show: false, + }, + name: "山东", + type: "map", + map: "山东", + boxDepth: 60, //地图倾斜度 + regionHeight: 6, //地图厚度 + aspectScale: 0.9, //地图长宽比 + emphasis: { + itemStyle: { + areaColor: "#70EAF4", // 高亮时候地图显示的颜色 + borderWidth: 2, // 高亮时的边框宽度 }, label: { show: true, //是否显示市 @@ -1454,115 +1447,150 @@ export default { }, }, }, - itemStyle: { - opacity: 0.8, // 透明度 - borderWidth: 2, //分界线宽度 - borderColor: "#0699E4", //分界线颜色 - areaColor: { - x: 0.5, - y: 0.7, - r: 0.5, - colorStops: [ - { - offset: 0, - color: "rgba(20,110,230,0.4)", - }, - { - offset: 1, - color: "rgba(6,33,121,0.4)", - }, - ], - global: false, // 缺省为 false + }, + 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", }, }, - groundplane: { - show: true, - }, - data: data, - z: 999, - shading: "realistic", - // 真实感材质相关配置 shading: 'realistic'时有效 - realisticMaterial: { - detailTexture: "rgb(0, 102, 204)", // 纹理贴图 - textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - roughness: 0.8, // 调整光照模型的粗糙度 - metalness: 0.0, // 调整金属感，0.0 为非金属 - roughnessAdjust: 0, - }, - viewControl: { - distance: 90, // 地图视角 控制初始大小 - rotateSensitivity: 0, // 旋转 - zoomSensitivity: 1.5, // 缩放 - }, - zoom: 1.25, }, - ], - animation: true, - }; + itemStyle: { + opacity: 0.8, // 透明度 + borderWidth: 2, //分界线宽度 + borderColor: "#0699E4", //分界线颜色 + areaColor: { + x: 0.5, + y: 0.7, + r: 0.5, + colorStops: [ + { + offset: 0, + color: "rgba(20,110,230,0.4)", + }, + { + offset: 1, + color: "rgba(6,33,121,0.4)", + }, + ], + global: false, // 缺省为 false + }, + }, + groundplane: { + show: true, + }, + data: data, + z: 999, + shading: "realistic", + // 真实感材质相关配置 shading: 'realistic'时有效 + realisticMaterial: { + detailTexture: "rgb(0, 102, 204)", // 纹理贴图 + textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + roughness: 0.8, // 调整光照模型的粗糙度 + metalness: 0.0, // 调整金属感，0.0 为非金属 + roughnessAdjust: 0, + }, + viewControl: { + distance: 90, // 地图视角 控制初始大小 + rotateSensitivity: 0, // 旋转 + zoomSensitivity: 1.5, // 缩放 + }, + zoom: 1.25, + }, + ], + animation: true, + }; - myChart.setOption(option); - myChart.on("click", chartClick); - //点击地图区域事件 - function chartClick(param) { - console.log(param); - myChart.setOption(option, false); - window.addEventListener("resize", function () { - myChart.resize(); - }); - // var selectedPro = param.name; - // if (!cityProper[selectedPro]) { - // option.series.splice(1); - // option.legend = null; - // option.visualMap = null; - // myChart.setOption(option, true); - // return; - // } - //获取点击区域数据 - // $.get(cityProper[selectedPro], function (geojson) { - // echarts.registerMap(selectedPro, geojson); - // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 - // option.series[0] = { - // name: "", - // type: "map", - // map: selectedPro, - // boxDepth: 80, //地图倾斜度 - // regionHeight: 5, //地图厚度 - // itemStyle: { - // normal: { - // label: { - // show: true, - // }, - // }, - // emphasis: { - // label: { - // show: true, - // }, - // }, - // }, - // groundplane: { - // show: false, - // }, - // data: data, - // shading: "realistic", - // // 真实感材质相关配置 shading: 'realistic'时有效 - // realisticMaterial: { - // detailTexture: "#fff", // 纹理贴图 - // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 - // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 - // metalness: 0, // 0材质是非金属 ，1金属 - // roughnessAdjust: 0, - // }, - // viewControl: { - // distance: 30, // 地图视角 控制初始大小 - // rotateSensitivity: 1, // 旋转 - // zoomSensitivity: 1, // 缩放 - // }, - // }; - // myChart.setOption(option); - // }); - } + myChart.setOption(option); + myChart.on("click", chartClick); + //点击地图区域事件 + function chartClick(param) { + console.log(param); + myChart.setOption(option, false); + window.addEventListener("resize", function () { + myChart.resize(); + }); + // var selectedPro = param.name; + // if (!cityProper[selectedPro]) { + // option.series.splice(1); + // option.legend = null; + // option.visualMap = null; + // myChart.setOption(option, true); + // return; + // } + //获取点击区域数据 + // $.get(cityProper[selectedPro], function (geojson) { + // echarts.registerMap(selectedPro, geojson); + // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。 + // option.series[0] = { + // name: "", + // type: "map", + // map: selectedPro, + // boxDepth: 80, //地图倾斜度 + // regionHeight: 5, //地图厚度 + // itemStyle: { + // normal: { + // label: { + // show: true, + // }, + // }, + // emphasis: { + // label: { + // show: true, + // }, + // }, + // }, + // groundplane: { + // show: false, + // }, + // data: data, + // shading: "realistic", + // // 真实感材质相关配置 shading: 'realistic'时有效 + // realisticMaterial: { + // detailTexture: "#fff", // 纹理贴图 + // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数 + // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙 + // metalness: 0, // 0材质是非金属 ，1金属 + // roughnessAdjust: 0, + // }, + // viewControl: { + // distance: 30, // 地图视角 控制初始大小 + // rotateSensitivity: 1, // 旋转 + // zoomSensitivity: 1, // 缩放 + // }, + // }; + // myChart.setOption(option); + // }); } - ); + } + registerMap(); }, nyxhqk() { var attaData1 = [62, 52, 34, 61, 75, 140]; diff --git a/src/views/Two.vue b/src/views/Two.vue index d69092b..0ef4242 100644 --- a/src/views/Two.vue +++ b/src/views/Two.vue @@ -17,28 +17,28 @@
-
+
用电量(MWH)
84.00-13.20%
.png)
-
+
用蒸汽量(m2)
45.32-23.20%
-
+
用水量(m2)
56.00-33.20%
-
+
@@ -180,7 +180,7 @@ export default {
borderWidth: 2, // 高亮时的边框宽度
},
label: {
- fontSize: 12, // 选中地图文字字号和字体颜色
+ fontSize: "0.06rem", // 选中地图文字字号和字体颜色
color: "#fff",
},
},
@@ -194,7 +194,7 @@ export default {
},
textStyle: {
color: "#000", //文字颜色
- fontSize: 16, //文字大小
+ fontSize: "0.08rem", //文字大小
fontFamily: "微软雅黑",
// backgroundColor: {
// image: "../assets/客户侧总体用能情况分析/光标.png",
@@ -205,13 +205,13 @@ export default {
fline: {
padding: [0, 35],
color: "#FDCC00",
- fontSize: 14,
+ fontSize: "0.07rem",
fontWeight: 600,
},
tline: {
padding: [0, 27],
color: "#fff",
- fontSize: 12,
+ fontSize: "0.06rem",
},
},
},
@@ -444,17 +444,18 @@ export default {
width: 72px;
height: 72px;
}
-
- div {
+ .box1 {
+ display: flex;
+ flex-direction: column;
+ height: 72px;
p:nth-of-type(1) {
width: 120px;
margin-bottom: 10px;
margin-top: 5px;
font-size: 14px;
- font-family: " AlibabaPuHuiTi";
+ font-family: "AlibabaPuHuiTi";
font-weight: 400;
}
-
span:nth-of-type(1) {
font-size: 20px;
font-family: "AlibabaPuHuiTi";
diff --git a/src/views/XQXY.vue b/src/views/XQXY.vue
index 4c1b716..d9ac45d 100644
--- a/src/views/XQXY.vue
+++ b/src/views/XQXY.vue
@@ -1298,173 +1298,172 @@ export default {
myChart.resize();
});
//获取山东地图数据。
- $.get(
- "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
- function (geojson) {
- echarts.registerMap("山东", geojson);
- let option = {
- series: [
- {
- tooltip: {
- trigger: "item",
- // show: false,
- },
- name: "山东",
- type: "map",
- map: "山东",
- boxDepth: 60, //地图倾斜度
- regionHeight: 6, //地图厚度
- aspectScale: 0.9, //地图长宽比
- emphasis: {
- itemStyle: {
- areaColor: "#70EAF4", // 高亮时候地图显示的颜色
- borderWidth: 2, // 高亮时的边框宽度
- },
- label: {
- fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
- color: "#fff",
- },
+ let src = require("../assets/shandong.json");
+ function registerMap() {
+ echarts.registerMap("山东", src);
+ let option = {
+ series: [
+ {
+ tooltip: {
+ trigger: "item",
+ // show: false,
+ },
+ name: "山东",
+ type: "map",
+ map: "山东",
+ boxDepth: 60, //地图倾斜度
+ regionHeight: 6, //地图厚度
+ aspectScale: 0.9, //地图长宽比
+ emphasis: {
+ itemStyle: {
+ areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+ 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: "0.0833rem", //文字大小
- fontFamily: "微软雅黑",
- // backgroundColor: {
- // image: "../assets/客户侧总体用能情况分析/光标.png",
- // },
- // padding: [15, 20],
- },
- rich: {
- fline: {
- padding: [0, 35],
- color: "#FDCC00",
- fontSize: "0.0729rem",
- fontWeight: 600,
- },
- tline: {
- padding: [0, 27],
- color: "#fff",
- fontSize: "0.0625rem",
- },
- },
+ fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+ color: "#fff",
},
- itemStyle: {
- opacity: 0.8, // 透明度
- borderWidth: 2, //分界线宽度
- borderColor: "#0699E4", //分界线颜色
- areaColor: {
- x: 0.5,
- y: 0.7,
- r: 0.5,
- colorStops: [
- {
- offset: 0,
- color: "rgba(20,110,230,0.4)",
- },
- {
- offset: 1,
- color: "rgba(6,33,121,0.4)",
- },
- ],
- global: false, // 缺省为 false
- },
- },
- groundplane: {
- show: true,
- },
- data: data,
- z: 999,
- shading: "realistic",
- // 真实感材质相关配置 shading: 'realistic'时有效
- realisticMaterial: {
- detailTexture: "rgb(0, 102, 204)", // 纹理贴图
- textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
- roughness: 0.8, // 调整光照模型的粗糙度
- metalness: 0.0, // 调整金属感，0.0 为非金属
- roughnessAdjust: 0,
- },
- viewControl: {
- distance: 90, // 地图视角 控制初始大小
- rotateSensitivity: 0, // 旋转
- zoomSensitivity: 1.5, // 缩放
- },
- zoom: 1.25,
},
- ],
- animation: true,
- };
+ 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: "0.0833rem", //文字大小
+ fontFamily: "微软雅黑",
+ // backgroundColor: {
+ // image: "../assets/客户侧总体用能情况分析/光标.png",
+ // },
+ // padding: [15, 20],
+ },
+ rich: {
+ fline: {
+ padding: [0, 35],
+ color: "#FDCC00",
+ fontSize: "0.0729rem",
+ fontWeight: 600,
+ },
+ tline: {
+ padding: [0, 27],
+ color: "#fff",
+ fontSize: "0.0625rem",
+ },
+ },
+ },
+ itemStyle: {
+ opacity: 0.8, // 透明度
+ borderWidth: 2, //分界线宽度
+ borderColor: "#0699E4", //分界线颜色
+ areaColor: {
+ x: 0.5,
+ y: 0.7,
+ r: 0.5,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(20,110,230,0.4)",
+ },
+ {
+ offset: 1,
+ color: "rgba(6,33,121,0.4)",
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ groundplane: {
+ show: true,
+ },
+ data: data,
+ z: 999,
+ shading: "realistic",
+ // 真实感材质相关配置 shading: 'realistic'时有效
+ realisticMaterial: {
+ detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+ textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+ roughness: 0.8, // 调整光照模型的粗糙度
+ metalness: 0.0, // 调整金属感，0.0 为非金属
+ roughnessAdjust: 0,
+ },
+ viewControl: {
+ distance: 90, // 地图视角 控制初始大小
+ rotateSensitivity: 0, // 旋转
+ zoomSensitivity: 1.5, // 缩放
+ },
+ zoom: 1.25,
+ },
+ ],
+ animation: true,
+ };
- myChart.setOption(option);
- myChart.on("click", chartClick);
- //点击地图区域事件
- function chartClick(param) {
- console.log(param);
- myChart.setOption(option, false);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- // var selectedPro = param.name;
- // if (!cityProper[selectedPro]) {
- // option.series.splice(1);
- // option.legend = null;
- // option.visualMap = null;
- // myChart.setOption(option, true);
- // return;
- // }
- //获取点击区域数据
- // $.get(cityProper[selectedPro], function (geojson) {
- // echarts.registerMap(selectedPro, geojson);
- // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
- // option.series[0] = {
- // name: "",
- // type: "map",
- // map: selectedPro,
- // boxDepth: 80, //地图倾斜度
- // regionHeight: 5, //地图厚度
- // itemStyle: {
- // normal: {
- // label: {
- // show: true,
- // },
- // },
- // emphasis: {
- // label: {
- // show: true,
- // },
- // },
- // },
- // groundplane: {
- // show: false,
- // },
- // data: data,
- // shading: "realistic",
- // // 真实感材质相关配置 shading: 'realistic'时有效
- // realisticMaterial: {
- // detailTexture: "#fff", // 纹理贴图
- // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
- // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
- // metalness: 0, // 0材质是非金属 ，1金属
- // roughnessAdjust: 0,
- // },
- // viewControl: {
- // distance: 30, // 地图视角 控制初始大小
- // rotateSensitivity: 1, // 旋转
- // zoomSensitivity: 1, // 缩放
- // },
- // };
- // myChart.setOption(option);
- // });
- }
+ myChart.setOption(option);
+ myChart.on("click", chartClick);
+ //点击地图区域事件
+ function chartClick(param) {
+ console.log(param);
+ myChart.setOption(option, false);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ // var selectedPro = param.name;
+ // if (!cityProper[selectedPro]) {
+ // option.series.splice(1);
+ // option.legend = null;
+ // option.visualMap = null;
+ // myChart.setOption(option, true);
+ // return;
+ // }
+ //获取点击区域数据
+ // $.get(cityProper[selectedPro], function (geojson) {
+ // echarts.registerMap(selectedPro, geojson);
+ // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+ // option.series[0] = {
+ // name: "",
+ // type: "map",
+ // map: selectedPro,
+ // boxDepth: 80, //地图倾斜度
+ // regionHeight: 5, //地图厚度
+ // itemStyle: {
+ // normal: {
+ // label: {
+ // show: true,
+ // },
+ // },
+ // emphasis: {
+ // label: {
+ // show: true,
+ // },
+ // },
+ // },
+ // groundplane: {
+ // show: false,
+ // },
+ // data: data,
+ // shading: "realistic",
+ // // 真实感材质相关配置 shading: 'realistic'时有效
+ // realisticMaterial: {
+ // detailTexture: "#fff", // 纹理贴图
+ // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+ // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+ // metalness: 0, // 0材质是非金属 ，1金属
+ // roughnessAdjust: 0,
+ // },
+ // viewControl: {
+ // distance: 30, // 地图视角 控制初始大小
+ // rotateSensitivity: 1, // 旋转
+ // zoomSensitivity: 1, // 缩放
+ // },
+ // };
+ // myChart.setOption(option);
+ // });
}
- );
+ }
+ registerMap();
},
},
mounted() {
diff --git a/src/views/ZHDY.vue b/src/views/ZHDY.vue
index c2d4923..5a503e5 100644
--- a/src/views/ZHDY.vue
+++ b/src/views/ZHDY.vue
@@ -1037,7 +1037,17 @@ export default {
console.log(item);
percent = ((item.value / total) * 100).toFixed(2);
if (name !== "") {
- return `{name|${name}}` + "\t" + "\t"+"\t" + "\t" + `{num|${percent}}`+"\t" + "\t"+`{name|%}`;
+ return (
+ `{name|${name}}` +
+ "\t" +
+ "\t" +
+ "\t" +
+ "\t" +
+ `{num|${percent}}` +
+ "\t" +
+ "\t" +
+ `{name|%}`
+ );
// return `{name|${name}` + `{num|${percent}}{name|kWh}`;
} else {
return "";
@@ -1056,7 +1066,7 @@ export default {
},
num: {
// fontSize: 12,
- fontWeight:700,
+ fontWeight: 700,
fontSize: "0.0833rem",
color: color[1],
},
@@ -1161,177 +1171,176 @@ export default {
myChart.resize();
});
//获取山东地图数据。
- $.get(
- "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
- function (geojson) {
- echarts.registerMap("山东", geojson);
- let option = {
- series: [
- {
- tooltip: {
- trigger: "item",
- // show: false,
- },
- name: "山东",
- type: "map",
- map: "山东",
- boxDepth: 60, //地图倾斜度
- regionHeight: 6, //地图厚度
- aspectScale: 0.9, //地图长宽比
- emphasis: {
- itemStyle: {
- areaColor: "#70EAF4", // 高亮时候地图显示的颜色
- borderWidth: 2, // 高亮时的边框宽度
- },
- label: {
- // fontSize: 12, // 选中地图文字字号和字体颜色
- fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
- color: "#fff",
- },
+ let src = require("../assets/shandong.json");
+ function registerMap() {
+ echarts.registerMap("山东", src);
+ let option = {
+ series: [
+ {
+ tooltip: {
+ trigger: "item",
+ // show: false,
+ },
+ name: "山东",
+ type: "map",
+ map: "山东",
+ boxDepth: 60, //地图倾斜度
+ regionHeight: 6, //地图厚度
+ aspectScale: 0.9, //地图长宽比
+ emphasis: {
+ itemStyle: {
+ areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+ 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: 12, // 选中地图文字字号和字体颜色
+ fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
+ color: "#fff",
},
- itemStyle: {
- opacity: 0.8, // 透明度
- borderWidth: 2, //分界线宽度
- borderColor: "#0699E4", //分界线颜色
- areaColor: {
- x: 0.5,
- y: 0.7,
- r: 0.5,
- colorStops: [
- {
- offset: 0,
- color: "rgba(20,110,230,0.4)",
- },
- {
- offset: 1,
- color: "rgba(6,33,121,0.4)",
- },
- ],
- global: false, // 缺省为 false
- },
- },
- groundplane: {
- show: true,
- },
- data: data,
- z: 999,
- shading: "realistic",
- // 真实感材质相关配置 shading: 'realistic'时有效
- realisticMaterial: {
- detailTexture: "rgb(0, 102, 204)", // 纹理贴图
- textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
- roughness: 0.8, // 调整光照模型的粗糙度
- metalness: 0.0, // 调整金属感，0.0 为非金属
- roughnessAdjust: 0,
- },
- viewControl: {
- distance: 90, // 地图视角 控制初始大小
- rotateSensitivity: 0, // 旋转
- zoomSensitivity: 1.5, // 缩放
- },
- zoom: 1.25,
},
- ],
- animation: true,
- };
+ 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",
+ },
+ },
+ },
+ itemStyle: {
+ opacity: 0.8, // 透明度
+ borderWidth: 2, //分界线宽度
+ borderColor: "#0699E4", //分界线颜色
+ areaColor: {
+ x: 0.5,
+ y: 0.7,
+ r: 0.5,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(20,110,230,0.4)",
+ },
+ {
+ offset: 1,
+ color: "rgba(6,33,121,0.4)",
+ },
+ ],
+ global: false, // 缺省为 false
+ },
+ },
+ groundplane: {
+ show: true,
+ },
+ data: data,
+ z: 999,
+ shading: "realistic",
+ // 真实感材质相关配置 shading: 'realistic'时有效
+ realisticMaterial: {
+ detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+ textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+ roughness: 0.8, // 调整光照模型的粗糙度
+ metalness: 0.0, // 调整金属感，0.0 为非金属
+ roughnessAdjust: 0,
+ },
+ viewControl: {
+ distance: 90, // 地图视角 控制初始大小
+ rotateSensitivity: 0, // 旋转
+ zoomSensitivity: 1.5, // 缩放
+ },
+ zoom: 1.25,
+ },
+ ],
+ animation: true,
+ };
- myChart.setOption(option);
- myChart.on("click", chartClick);
- //点击地图区域事件
- function chartClick(param) {
- console.log(param);
- myChart.setOption(option, false);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- // var selectedPro = param.name;
- // if (!cityProper[selectedPro]) {
- // option.series.splice(1);
- // option.legend = null;
- // option.visualMap = null;
- // myChart.setOption(option, true);
- // return;
- // }
- //获取点击区域数据
- // $.get(cityProper[selectedPro], function (geojson) {
- // echarts.registerMap(selectedPro, geojson);
- // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
- // option.series[0] = {
- // name: "",
- // type: "map",
- // map: selectedPro,
- // boxDepth: 80, //地图倾斜度
- // regionHeight: 5, //地图厚度
- // itemStyle: {
- // normal: {
- // label: {
- // show: true,
- // },
- // },
- // emphasis: {
- // label: {
- // show: true,
- // },
- // },
- // },
- // groundplane: {
- // show: false,
- // },
- // data: data,
- // shading: "realistic",
- // // 真实感材质相关配置 shading: 'realistic'时有效
- // realisticMaterial: {
- // detailTexture: "#fff", // 纹理贴图
- // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
- // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
- // metalness: 0, // 0材质是非金属 ，1金属
- // roughnessAdjust: 0,
- // },
- // viewControl: {
- // distance: 30, // 地图视角 控制初始大小
- // rotateSensitivity: 1, // 旋转
- // zoomSensitivity: 1, // 缩放
- // },
- // };
- // myChart.setOption(option);
- // });
- }
+ myChart.setOption(option);
+ myChart.on("click", chartClick);
+ //点击地图区域事件
+ function chartClick(param) {
+ console.log(param);
+ myChart.setOption(option, false);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ // var selectedPro = param.name;
+ // if (!cityProper[selectedPro]) {
+ // option.series.splice(1);
+ // option.legend = null;
+ // option.visualMap = null;
+ // myChart.setOption(option, true);
+ // return;
+ // }
+ //获取点击区域数据
+ // $.get(cityProper[selectedPro], function (geojson) {
+ // echarts.registerMap(selectedPro, geojson);
+ // //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+ // option.series[0] = {
+ // name: "",
+ // type: "map",
+ // map: selectedPro,
+ // boxDepth: 80, //地图倾斜度
+ // regionHeight: 5, //地图厚度
+ // itemStyle: {
+ // normal: {
+ // label: {
+ // show: true,
+ // },
+ // },
+ // emphasis: {
+ // label: {
+ // show: true,
+ // },
+ // },
+ // },
+ // groundplane: {
+ // show: false,
+ // },
+ // data: data,
+ // shading: "realistic",
+ // // 真实感材质相关配置 shading: 'realistic'时有效
+ // realisticMaterial: {
+ // detailTexture: "#fff", // 纹理贴图
+ // textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+ // roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+ // metalness: 0, // 0材质是非金属 ，1金属
+ // roughnessAdjust: 0,
+ // },
+ // viewControl: {
+ // distance: 30, // 地图视角 控制初始大小
+ // rotateSensitivity: 1, // 旋转
+ // zoomSensitivity: 1, // 缩放
+ // },
+ // };
+ // myChart.setOption(option);
+ // });
}
- );
+ }
+ registerMap();
},
},
mounted() {
@@ -2011,7 +2020,7 @@ export default {
line-height: 36px;
}
p.second {
- width:118px;
+ width: 118px;
height: 36px;
padding-left: 15px;
font-size: 30px;
用汽量(m2)
37.0043.20%