zyh
This commit is contained in:
unknown
parent
dbd7475e3f
commit
0c642b288c
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -988,7 +988,9 @@ export default {
|
|||
color: "#D8C74A",
|
||||
},
|
||||
},
|
||||
data: [],
|
||||
data: [
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
tooltip: {
|
||||
|
|
@ -1208,30 +1210,30 @@ export default {
|
|||
};
|
||||
// series
|
||||
const series = [
|
||||
{
|
||||
z: 2,
|
||||
name: "底部",
|
||||
type: "pictorialBar",
|
||||
data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
|
||||
symbol: "diamond",
|
||||
symbolOffset: [0, "50%"],
|
||||
symbolSize: [18, 12],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(27, 126, 242, 1)" },
|
||||
{ offset: 0.5, color: "rgba(27, 126, 242, 1)" },
|
||||
{ offset: 0.5, color: "rgba(27, 126, 242, .7)" },
|
||||
{ offset: 1, color: "rgba(27, 126, 242, 1)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// z: 2,
|
||||
// name: "底部",
|
||||
// type: "pictorialBar",
|
||||
// data: [1, 1, 1, 1, 1, 1, 1, 1,1,1,1,1,1,1,1,1,1],
|
||||
// symbol: "diamond",
|
||||
// symbolOffset: [0, "50%"],
|
||||
// symbolSize: [18, 12],
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 0,
|
||||
// x2: 1,
|
||||
// y: 0,
|
||||
// y2: 0,
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "rgba(27, 126, 242, 1)" },
|
||||
// { offset: 0.5, color: "rgba(27, 126, 242, 1)" },
|
||||
// { offset: 0.5, color: "rgba(27, 126, 242, .7)" },
|
||||
// { offset: 1, color: "rgba(27, 126, 242, 1)" },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
{
|
||||
z: 3,
|
||||
name: "上部1",
|
||||
|
|
@ -1240,7 +1242,7 @@ export default {
|
|||
data: dataArr.disinfeced,
|
||||
symbol: "diamond",
|
||||
symbolOffset: [0, "-50%"],
|
||||
symbolSize: ["0.09rem", "0.06rem"],
|
||||
symbolSize: [18, 12],
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
|
|
@ -1255,13 +1257,13 @@ export default {
|
|||
},
|
||||
itemStyle: {
|
||||
borderColor: "#28F1FA",
|
||||
borderWidth: 2,
|
||||
borderWidth: 4,
|
||||
color: "#28F1FA",
|
||||
},
|
||||
},
|
||||
{
|
||||
z: 1,
|
||||
stack: "总量",
|
||||
stack: "",
|
||||
type: "bar",
|
||||
name: "电费",
|
||||
barWidth: 18,
|
||||
|
|
|
|||
|
|
@ -1395,7 +1395,6 @@ export default {
|
|||
let src = require("../assets/shandong.json");
|
||||
function registerMap() {
|
||||
echarts.registerMap("山东", src);
|
||||
|
||||
//拿到json数据
|
||||
var mapFeatures = echarts.getMap("山东").geoJson.features;
|
||||
var geoCoordMap = {};
|
||||
|
|
@ -1440,9 +1439,9 @@ export default {
|
|||
zlevel: 3,
|
||||
rippleEffect: {
|
||||
//涟漪特效
|
||||
period: 4, //动画时间，值越小速度越快
|
||||
period: 3, //动画时间，值越小速度越快
|
||||
brushType: "fill", //波纹绘制方式 stroke, fill
|
||||
scale: 10, //波纹圆环最大限制，值越大波纹越大
|
||||
scale: 5, //波纹圆环最大限制，值越大波纹越大
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 7,
|
||||
|
|
|
|||
|
|
@ -1137,12 +1137,69 @@ 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",
|
||||
|
|
@ -1160,12 +1217,13 @@ export default {
|
|||
borderWidth: 2, // 高亮时的边框宽度
|
||||
},
|
||||
label: {
|
||||
fontSize: "0.0625rem", // 选中地图文字字号和字体颜色
|
||||
fontSize: "0.06rem", // 选中地图文字字号和字体颜色
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true, //是否显示市
|
||||
zlevel: 4,
|
||||
formatter: function (params) {
|
||||
var name = params.name;
|
||||
var value = params.value;
|
||||
|
|
@ -1174,24 +1232,25 @@ export default {
|
|||
},
|
||||
textStyle: {
|
||||
color: "#000", //文字颜色
|
||||
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: "0.0729rem",
|
||||
fontSize: "0.07rem",
|
||||
fontWeight: 600,
|
||||
},
|
||||
tline: {
|
||||
padding: [0, 27],
|
||||
color: "#fff",
|
||||
fontSize: "0.0625rem",
|
||||
fontSize: "0.06rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -1241,6 +1300,8 @@ export default {
|
|||
animation: true,
|
||||
};
|
||||
|
||||
option.series[0].data = convertData(data); // 设置动效散点数据
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.on("click", chartClick);
|
||||
//点击地图区域事件
|
||||
|
|
|
|||
|
|
@ -1174,12 +1174,69 @@ 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",
|
||||
|
|
@ -1197,13 +1254,13 @@ export default {
|
|||
borderWidth: 2, // 高亮时的边框宽度
|
||||
},
|
||||
label: {
|
||||
// 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;
|
||||
|
|
@ -1212,27 +1269,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",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -1282,6 +1337,8 @@ export default {
|
|||
animation: true,
|
||||
};
|
||||
|
||||
option.series[0].data = convertData(data); // 设置动效散点数据
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.on("click", chartClick);
|
||||
//点击地图区域事件
|
||||
|
|
|
|||
Loading…
Reference in New Issue