diff --git a/src/assets/客户侧总体用能情况分析/图标.png b/src/assets/客户侧总体用能情况分析/图标.png deleted file mode 100644 index 4ab51e1..0000000 Binary files a/src/assets/客户侧总体用能情况分析/图标.png and /dev/null differ diff --git a/src/assets/客户侧总体用能情况分析/用电量.png b/src/assets/客户侧总体用能情况分析/用电量.png new file mode 100644 index 0000000..1cea2dd Binary files /dev/null and b/src/assets/客户侧总体用能情况分析/用电量.png differ diff --git a/src/views/KHC.vue b/src/views/KHC.vue index a91022d..cb12c4b 100644 --- a/src/views/KHC.vue +++ b/src/views/KHC.vue @@ -2,7 +2,9 @@
-

客户侧总体用能情况分析

+
+

客户侧总体用能情况分析

+
@@ -15,8 +17,8 @@
  • 年
    • -
    - +
    +

    用电量(MWH)

    84.00-13.20%

    @@ -63,13 +65,16 @@

    用能量

      -
    • +
    • 电
      • -
    • +
    • 水
      • -
    • +
    • 蒸汽
    @@ -136,6 +141,7 @@ export default { return { res: "日", type: "电", + type1: "电", list: [ { name: "济南综合新能源服务有线公司", @@ -412,7 +418,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) { @@ -921,18 +927,74 @@ export default { window.addEventListener("resize", function () { myChart.resize(); }); - //获取山东地图数据。 + + //注入山东地图数据。 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: 3, //动画时间，值越小速度越快 + brushType: "fill", //波纹绘制方式 stroke, fill + scale: 5, //波纹圆环最大限制，值越大波纹越大 + }, + symbol: "circle", + symbolSize: 7, + itemStyle: { + normal: { + show: true, + color: "#D8C74A", + }, + }, + data: [], + }, { tooltip: { trigger: "item", // show: false, }, - name: "山东", type: "map", map: "山东", @@ -951,6 +1013,7 @@ export default { }, label: { show: true, //是否显示市 + zlevel: 4, formatter: function (params) { var name = params.name; var value = params.value; @@ -962,9 +1025,10 @@ export default { fontSize: "0.08rem", //文字大小 fontFamily: "微软雅黑", // backgroundColor: { - // image: "../assets/客户侧总体用能情况分析/光标.png", + // image: require("../assets/客户侧总体用能情况分析/光标.png"), // }, - // padding: [15, 20], + // backgroundSize: "10px 10px", + // backgroundPosition: "top left", }, rich: { fline: { @@ -1026,6 +1090,8 @@ export default { animation: true, }; + option.series[0].data = convertData(data); // 设置动效散点数据 + myChart.setOption(option); myChart.on("click", chartClick); //点击地图区域事件 @@ -1243,25 +1309,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 { - width: 527px; - height: 47px; - font-size: 44px; - font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20; - font-weight: 600; - line-height: 47px; - letter-spacing: 3px; - color: #fff; - margin-left: -60px; + .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) { @@ -1338,7 +1415,11 @@ export default { margin-top: 100px; display: flex; flex-wrap: wrap; - + .bottomBox1 { + img { + width: 80px; + } + } .bottomBox { display: flex; align-items: center; diff --git a/src/views/TAN.vue b/src/views/TAN.vue index 585521c..57301ba 100644 --- a/src/views/TAN.vue +++ b/src/views/TAN.vue @@ -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;