1615 lines
41 KiB
JavaScript
1615 lines
41 KiB
JavaScript
$(function () {
|
||
// 加载 中上 的图表
|
||
loadMiddleTopMap();
|
||
// 获取数据
|
||
getPageData();
|
||
});
|
||
|
||
var pageData, corrsData;
|
||
|
||
// 获取数据
|
||
function getPageData() {
|
||
$.when($.getJSON("./jsonFile/output_all.json"), $.getJSON("./jsonFile/corrs.json")).done(function (res0, res1) {
|
||
pageData = JSON.parse(JSON.stringify(res0[0]));
|
||
corrsData = JSON.parse(JSON.stringify(res1[0]));
|
||
// 加载页面 默认为贵阳的数据
|
||
loadPage("贵州省");
|
||
// 默认隐藏指标相关性入口
|
||
$(".xiang_guan").hide();
|
||
});
|
||
}
|
||
|
||
var selectData;
|
||
|
||
// 用来判断是否第一次加载
|
||
var renderOneIf = true;
|
||
|
||
// 选中的城市
|
||
var selectCity = "";
|
||
|
||
var nineForecastData = {};
|
||
|
||
// 区分城市数据
|
||
function loadPage(city) {
|
||
// 用来存放各个类型的数据
|
||
selectData = {};
|
||
// 存放九个市州的数据
|
||
selectData.nineGdp = [];
|
||
selectData.nineGdp.push(["gdpData", "town", "year"]);
|
||
// 九个市州各个指标的预测值
|
||
if (city == "贵州省") {
|
||
nineForecastData = {};
|
||
}
|
||
// 遍历 pageData
|
||
for (let i = 0; i < pageData.length; i++) {
|
||
var item = pageData[i];
|
||
// 全省各个类型预测数据
|
||
if (city == "贵州省") {
|
||
switchNineDataType(item);
|
||
}
|
||
if (item.axis == city) {
|
||
// 区分各个类型的数据
|
||
switchDataType(item);
|
||
}
|
||
if (item.info == "地区生产总值") {
|
||
// 获取9个市的地区生产总值数据
|
||
getGdpData(item);
|
||
}
|
||
}
|
||
|
||
// 根据数据加载图表
|
||
loadMap(city);
|
||
}
|
||
|
||
// 区分数据的各个类型
|
||
function switchDataType(data) {
|
||
var da = data.data;
|
||
switch (data.info) {
|
||
case "地区生产总值":
|
||
selectData.gdp = da;
|
||
break;
|
||
case "地区生产总值增速":
|
||
selectData.gdpZs = da;
|
||
break;
|
||
case "第一产业增加值":
|
||
selectData.dycy = da;
|
||
break;
|
||
case "第一产业增加值增速":
|
||
selectData.dycyZs = da;
|
||
break;
|
||
case "第二产业增加值":
|
||
selectData.decy = da;
|
||
break;
|
||
case "第二产业增加值增速":
|
||
selectData.decyZs = da;
|
||
break;
|
||
case "第三产业增加值":
|
||
selectData.dscy = da;
|
||
break;
|
||
case "第三产业增加值增速":
|
||
selectData.dscyZs = da;
|
||
break;
|
||
case "工业":
|
||
selectData.gy = da;
|
||
break;
|
||
case "工业增速":
|
||
selectData.gyZs = da;
|
||
break;
|
||
case "人均生产总值":
|
||
selectData.rjsczz = da;
|
||
break;
|
||
case "人均生产总值增速":
|
||
selectData.rjsczzZs = da;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 区分九个市州的各指标
|
||
function switchNineDataType(data) {
|
||
var da = data.data;
|
||
var axis = data.axis;
|
||
switch (data.info) {
|
||
case "地区生产总值":
|
||
if (!nineForecastData.gdp) {
|
||
nineForecastData.gdp = {};
|
||
}
|
||
mergeFormatData(nineForecastData.gdp, formatData(da, {}), axis);
|
||
break;
|
||
// case "地区生产总值增速":
|
||
// mergeFormatData(nineForecastData.gdp,formatData(da,{}),axis);
|
||
// selectData.gdpZs = da;
|
||
// break;
|
||
case "第一产业增加值":
|
||
if (!nineForecastData.dycy) {
|
||
nineForecastData.dycy = {};
|
||
}
|
||
mergeFormatData(nineForecastData.dycy, formatData(da, {}), axis);
|
||
break;
|
||
// case "第一产业增加值增速":
|
||
// mergeFormatData(nineForecastData.gdp,formatData(da,{}),axis);
|
||
// selectData.dycyZs = da;
|
||
// break;
|
||
case "第二产业增加值":
|
||
if (!nineForecastData.decy) {
|
||
nineForecastData.decy = {};
|
||
}
|
||
mergeFormatData(nineForecastData.decy, formatData(da, {}), axis);
|
||
break;
|
||
// case "第二产业增加值增速":
|
||
// mergeFormatData(nineForecastData.gdp,formatData(da,{}),axis);
|
||
// selectData.decyZs = da;
|
||
// break;
|
||
case "第三产业增加值":
|
||
if (!nineForecastData.dscy) {
|
||
nineForecastData.dscy = {};
|
||
}
|
||
mergeFormatData(nineForecastData.dscy, formatData(da, {}), axis);
|
||
break;
|
||
// case "第三产业增加值增速":
|
||
// mergeFormatData(nineForecastData.gdp,formatData(da,{}),axis);
|
||
// selectData.dscyZs = da;
|
||
// break;
|
||
case "工业":
|
||
if (!nineForecastData.gy) {
|
||
nineForecastData.gy = {};
|
||
}
|
||
mergeFormatData(nineForecastData.gy, formatData(da, {}), axis);
|
||
break;
|
||
// case "工业增速":
|
||
// mergeFormatData(nineForecastData.gdp,formatData(da,{}),axis);
|
||
// selectData.gyZs = da;
|
||
// break;
|
||
case "人均生产总值":
|
||
if (!nineForecastData.rjsczz) {
|
||
nineForecastData.rjsczz = {};
|
||
}
|
||
mergeFormatData(nineForecastData.rjsczz, formatData(da, {}), axis);
|
||
break;
|
||
// case "人均生产总值增速":
|
||
// mergeFormatData(nineForecastData.gdp,formatData(da,{}),axis);
|
||
// selectData.rjsczzZs = da;
|
||
// break;
|
||
}
|
||
}
|
||
|
||
// 将格式化后的数据合并起来
|
||
function mergeFormatData(obj, data, axis) {
|
||
// var format = {
|
||
// year: [], // 年份
|
||
// yhat_lower: [], // 预测最小值
|
||
// yhat_upper: [], // 预测最大值
|
||
// yhat: [], // 实际预测
|
||
// actual: [], // 实际值
|
||
// yhatZs: [], //增速实际预测
|
||
// actualZs: [], //增速实际值
|
||
// };
|
||
|
||
var yhat = data.yhat; //实际预测
|
||
var actual = data.actual; //实际值
|
||
// 存放每年没有实际值时的预测值
|
||
var yhatOnly = [];
|
||
// 处理预测值
|
||
for (let i = 0; i < yhat.length; i++) {
|
||
var yhatItem = yhat[i]; // 增速预测值
|
||
var actualItem = actual[i]; // 增速实际值
|
||
if (typeof actualItem === "number" && !isNaN(actualItem)) {
|
||
// 增速实际值 为数字 即不为空
|
||
actualItem = actual[i + 1]; // 增速实际值下一年
|
||
if (typeof actualItem === "number" && !isNaN(actualItem)) {
|
||
// 增速实际值下一年不为空时 当年预测值置空
|
||
yhatOnly.push("-");
|
||
} else {
|
||
yhatOnly.push(actual[i]);
|
||
}
|
||
} else {
|
||
// 增速实际值 为空
|
||
yhatOnly.push(yhatItem);
|
||
}
|
||
}
|
||
|
||
obj.year = data.year;
|
||
// 实际值
|
||
if (obj.hasOwnProperty("data")) {
|
||
obj.data.push(data.actual);
|
||
} else {
|
||
obj.data = [data.actual];
|
||
}
|
||
// 预测值
|
||
if (obj.hasOwnProperty("dataOnly")) {
|
||
obj.dataOnly.push(yhatOnly);
|
||
} else {
|
||
obj.dataOnly = [yhatOnly];
|
||
}
|
||
if (obj.hasOwnProperty("endLabel")) {
|
||
obj.endLabel.push(axis);
|
||
} else {
|
||
obj.endLabel = [axis];
|
||
}
|
||
}
|
||
|
||
// 获取9个市的地区生产总值数据
|
||
function getGdpData(data) {
|
||
var da = data.data;
|
||
var axis = data.axis;
|
||
|
||
var keysArr = Object.keys(da);
|
||
|
||
for (let i = 0; i < keysArr.length; i++) {
|
||
var item = da[keysArr[i]];
|
||
var gdpDa = typeof item.y === "number" && !isNaN(item.y) ? item.y : item.yhat;
|
||
var year = new Date(item.ds).Format("yyyy");
|
||
selectData.nineGdp.push([gdpDa, axis, year]);
|
||
}
|
||
}
|
||
|
||
// 将数据格式化成热力图需要的数据
|
||
function formatHeatMapData(data) {
|
||
var headX = Object.keys(data);
|
||
var headY = Object.keys(data[headX[0]]);
|
||
selectData.headX = headX;
|
||
selectData.headY = headY;
|
||
var headXYData = [];
|
||
for (let i = 0; i < headX.length; i++) {
|
||
var itemX = headX[i];
|
||
for (let j = 0; j < headY.length; j++) {
|
||
var itemY = headY[j];
|
||
headXYData.push([i, j, data[itemX][itemY].toFixed(2)]);
|
||
}
|
||
}
|
||
selectData.headXYData = headXYData;
|
||
}
|
||
|
||
// 根据数据加载图表
|
||
function loadMap(city) {
|
||
// 中下
|
||
// leftTopLineMapRun(selectData.nineGdp);// 折线动态
|
||
leftTopColumnMapRun(selectData.nineGdp); // 柱状动态
|
||
|
||
selectCity = city;
|
||
|
||
if (city != "贵州省") {
|
||
// 将数据格式化成热力图需要的数据
|
||
formatHeatMapData(corrsData[city]);
|
||
|
||
// 中中 热力图
|
||
loadMiddleMiddleMap(selectData.headX, selectData.headY, selectData.headXYData);
|
||
|
||
// 左上
|
||
loadForecastMap(formatData(selectData.gdp, selectData.gdpZs), "left_top_map", "地区生产总值趋势分析");
|
||
// 左中
|
||
loadForecastMap(formatData(selectData.gy, selectData.gyZs), "left_middle_map", "工业趋势分析");
|
||
// 左下
|
||
loadForecastMap(formatData(selectData.rjsczz, selectData.rjsczzZs), "left_down_map", "人均生产总值趋势分析");
|
||
// 右上
|
||
loadForecastMap(formatData(selectData.dycy, selectData.dycyZs), "right_top_map", "第一产业增加值趋势分析");
|
||
// 右中
|
||
loadForecastMap(formatData(selectData.decy, selectData.decyZs), "right_middle_map", "第二产业增加值趋势分析");
|
||
// 右下
|
||
loadForecastMap(formatData(selectData.dscy, selectData.dscyZs), "right_down_map", "第三产业增加值趋势分析");
|
||
} else {
|
||
// 清空热力图
|
||
clearMap("heat_map");
|
||
// 左上
|
||
loadNineForecastMap(nineForecastData.gdp, "left_top_map", "地区生产总值趋势分析");
|
||
// 左中
|
||
loadNineForecastMap(nineForecastData.gy, "left_middle_map", "工业趋势分析");
|
||
// 左下
|
||
loadNineForecastMap(nineForecastData.rjsczz, "left_down_map", "人均生产总值趋势分析");
|
||
// 右上
|
||
loadNineForecastMap(nineForecastData.dycy, "right_top_map", "第一产业增加值趋势分析");
|
||
// 右中
|
||
loadNineForecastMap(nineForecastData.decy, "right_middle_map", "第二产业增加值趋势分析");
|
||
// 右下
|
||
loadNineForecastMap(nineForecastData.dscy, "right_down_map", "第三产业增加值趋势分析");
|
||
}
|
||
renderOneIf = false;
|
||
}
|
||
|
||
// 折线动态
|
||
function leftTopLineMapRun(_rawData) {
|
||
var chartDom = document.getElementById("middle_down_map");
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
const countries = ["贵阳市", "六盘水市", "遵义市", "安顺市", "毕节市", "铜仁市", "黔西南州", "黔东南州", "黔南州"];
|
||
const datasetWithFilters = [];
|
||
const seriesList = [];
|
||
echarts.util.each(countries, function (town) {
|
||
var datasetId = "dataset_" + town;
|
||
datasetWithFilters.push({
|
||
id: datasetId,
|
||
fromDatasetId: "dataset_raw",
|
||
transform: {
|
||
type: "filter",
|
||
config: {
|
||
and: [
|
||
{ dimension: "year", gte: 2015 },
|
||
{ dimension: "town", "=": town },
|
||
],
|
||
},
|
||
},
|
||
});
|
||
seriesList.push({
|
||
type: "line",
|
||
datasetId: datasetId,
|
||
showSymbol: false,
|
||
name: town,
|
||
endLabel: {
|
||
show: true,
|
||
formatter: function (params) {
|
||
return params.value[1] + ": " + params.value[0];
|
||
},
|
||
},
|
||
labelLayout: {
|
||
moveOverlap: "shiftY",
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
encode: {
|
||
x: "year",
|
||
y: "gdpData",
|
||
label: ["town", "gdpData"],
|
||
itemName: "year",
|
||
tooltip: ["gdpData"],
|
||
},
|
||
});
|
||
});
|
||
option = {
|
||
animationDuration: 10000,
|
||
dataset: [
|
||
{
|
||
id: "dataset_raw",
|
||
source: _rawData,
|
||
},
|
||
...datasetWithFilters,
|
||
],
|
||
title: {
|
||
text: "各市州地区生产总值",
|
||
},
|
||
tooltip: {
|
||
order: "valueDesc",
|
||
trigger: "axis",
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
nameLocation: "middle",
|
||
},
|
||
yAxis: {
|
||
name: "地区生产总值",
|
||
},
|
||
grid: {
|
||
right: 140,
|
||
},
|
||
series: seriesList,
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
// 柱状动态
|
||
function leftTopColumnMapRun(data) {
|
||
if (!renderOneIf) {
|
||
return 0;
|
||
}
|
||
var chartDom = document.getElementById("middle_down_map");
|
||
var myChart = echarts.init(chartDom);
|
||
myChart.clear();
|
||
var option = {};
|
||
|
||
const updateFrequency = 5000;
|
||
const dimension = 0;
|
||
const countryColors = {
|
||
贵阳市: "#EBB268",
|
||
六盘水市: "#D9E265",
|
||
遵义市: "#8BF28E",
|
||
安顺市: "#4AF59A",
|
||
毕节市: "#4AF5D8",
|
||
铜仁市: "#4ACCF5",
|
||
黔西南州: "#4AA5F5",
|
||
黔东南州: "#4A66F5",
|
||
黔南州: "#854AF5",
|
||
};
|
||
const years = [];
|
||
for (let i = 0; i < data.length; ++i) {
|
||
if (years.length === 0 || years[years.length - 1] !== data[i][2]) {
|
||
years.push(data[i][2]);
|
||
}
|
||
}
|
||
let startIndex = 10;
|
||
let startYear = years[startIndex];
|
||
option = {
|
||
title: {
|
||
// text: "历年地区生产总值横向对比",
|
||
left: "center",
|
||
},
|
||
// 图表内边距
|
||
grid: {
|
||
top: 25,
|
||
bottom: 30,
|
||
left: 80,
|
||
right: 70,
|
||
},
|
||
xAxis: {
|
||
max: "dataMax",
|
||
axisLabel: {
|
||
formatter: function (n) {
|
||
return Math.round(n) + "";
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9FB6F9",
|
||
},
|
||
// axisLine: {
|
||
// show: true,
|
||
// lineStyle: {
|
||
// color: "#9FB6F9",
|
||
// width: 1,
|
||
// type: "solid",
|
||
// },
|
||
// },
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#294395",
|
||
},
|
||
},
|
||
},
|
||
dataset: {
|
||
source: data.slice(1).filter(function (d) {
|
||
return d[2] === startYear;
|
||
}),
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
inverse: true,
|
||
max: 8,
|
||
axisLabel: {
|
||
show: true,
|
||
fontSize: 14,
|
||
formatter: function (value) {
|
||
return value;
|
||
},
|
||
rich: {
|
||
flag: {
|
||
fontSize: 25,
|
||
padding: 5,
|
||
},
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#9FB6F9",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#9FB6F9",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
animationDuration: 300,
|
||
animationDurationUpdate: 300,
|
||
},
|
||
series: [
|
||
{
|
||
realtimeSort: true,
|
||
seriesLayoutBy: "column",
|
||
type: "bar",
|
||
itemStyle: {
|
||
color: function (param) {
|
||
return countryColors[param.value[1]] || "#5470c6";
|
||
},
|
||
},
|
||
encode: {
|
||
x: dimension,
|
||
y: 3,
|
||
},
|
||
label: {
|
||
show: true,
|
||
precision: 1,
|
||
position: "right",
|
||
valueAnimation: true,
|
||
fontFamily: "monospace",
|
||
color: "#9FB6F9",
|
||
},
|
||
},
|
||
],
|
||
// Disable init animation.
|
||
animationDuration: 0,
|
||
animationDurationUpdate: updateFrequency,
|
||
animationEasing: "linear",
|
||
animationEasingUpdate: "linear",
|
||
graphic: {
|
||
elements: [
|
||
{
|
||
type: "text",
|
||
right: 110,
|
||
bottom: 50,
|
||
style: {
|
||
text: startYear,
|
||
font: "bolder 80px monospace",
|
||
fill: "rgba(159,182,249, 0.5)",
|
||
},
|
||
z: 100,
|
||
},
|
||
],
|
||
},
|
||
};
|
||
myChart.setOption(option);
|
||
for (let i = startIndex; i < years.length - 1; ++i) {
|
||
(function (i) {
|
||
setTimeout(function () {
|
||
updateYear(years[i + 1]);
|
||
if (i == years.length - 2) {
|
||
leftTopColumnMapRun(data);
|
||
}
|
||
}, (i - startIndex) * updateFrequency);
|
||
})(i);
|
||
}
|
||
function updateYear(year) {
|
||
let source = data.slice(1).filter(function (d) {
|
||
return d[2] === year;
|
||
});
|
||
option.series[0].data = source;
|
||
option.graphic.elements[0].style.text = year;
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
option && myChart.setOption(option);
|
||
}
|
||
|
||
// 清空某个图
|
||
function clearMap(domId) {
|
||
var chartDom = document.getElementById(domId);
|
||
var myChart = echarts.init(chartDom);
|
||
myChart.clear();
|
||
}
|
||
|
||
// 格式数据
|
||
function formatData(data, dataZs) {
|
||
var format = {
|
||
year: [], // 年份
|
||
yhat_lower: [], // 预测最小值
|
||
yhat_upper: [], // 预测最大值
|
||
yhat: [], // 实际预测
|
||
actual: [], // 实际值
|
||
yhatZs: [], //增速实际预测
|
||
actualZs: [], //增速实际值
|
||
};
|
||
|
||
var keysArr = Object.keys(data || {});
|
||
|
||
for (let i = 0; i < keysArr.length; i++) {
|
||
var item = data[keysArr[i]];
|
||
format.year.push(new Date(item.ds).Format("yyyy"));
|
||
format.yhat_lower.push(item.yhat_lower);
|
||
format.yhat_upper.push(item.yhat_upper - item.yhat_lower);
|
||
format.yhat.push(item.yhat);
|
||
format.actual.push(item.y);
|
||
}
|
||
|
||
var keysArr2 = Object.keys(dataZs || {});
|
||
|
||
for (let i = 0; i < keysArr2.length; i++) {
|
||
var item = dataZs[keysArr2[i]];
|
||
|
||
format.yhatZs.push(item.yhat);
|
||
format.actualZs.push(item.y);
|
||
}
|
||
|
||
return format;
|
||
}
|
||
|
||
//#region 预测图表
|
||
|
||
// 加载预测图表
|
||
function loadForecastMap(data, domId, mapName) {
|
||
var chartDom = document.getElementById(domId);
|
||
var myChart = echarts.init(chartDom);
|
||
myChart.clear();
|
||
var option;
|
||
// 处理下数据
|
||
forecastMapDataDispose(data);
|
||
option = {
|
||
grid: {
|
||
top: "40px",
|
||
bottom: "40px",
|
||
right: "30px",
|
||
},
|
||
color: ["#4699AD", "#5DDBFA"],
|
||
tooltip: {
|
||
position: "top",
|
||
},
|
||
title: {
|
||
// text: mapName,
|
||
left: "center",
|
||
},
|
||
// 图例
|
||
legend: {
|
||
data: ["实际值", "预测值", "增长率", "预测增长率"],
|
||
selected: { 增长率: false, 预测增长率: false },
|
||
top: "10",
|
||
textStyle: {
|
||
color: "#9FB6F9",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
formatter: function (params) {
|
||
let str = " ";
|
||
str =
|
||
'<div style="width:100%;padding:5px 5px 5px 5px;font-size:13px;box-sizing:border-box;border-radius:4px;' +
|
||
'position:relative;background:rgba(000,000,000,0)">' +
|
||
"<div style='display:flex;align-items:center;margin-bottom:5px;'>" +
|
||
selectCity +
|
||
"-" +
|
||
mapName +
|
||
"-" +
|
||
params[0].axisValue +
|
||
"年" +
|
||
"</div>";
|
||
|
||
// 获取排名、最大值、最小值
|
||
var rankInfo = {};
|
||
if (params[3].value == "-") {
|
||
// 预测值
|
||
rankInfo = getRanking(mapName, params[0].axisValue, false);
|
||
} else {
|
||
// 实际值
|
||
rankInfo = getRanking(mapName, params[0].axisValue, false);
|
||
}
|
||
|
||
for (let i = 0; i < params.length; i++) {
|
||
var item = params[i];
|
||
if (!(typeof item.value === "number" && !isNaN(item.value))) {
|
||
// 不是数字的时候
|
||
item.value = "-";
|
||
}
|
||
if (i == 1) {
|
||
// 预测最大值要加上预测最小值
|
||
var val = item.value + params[0].value;
|
||
str += "<div style='display:flex;align-items:center;'>" + item.marker + item.seriesName + "：" + val + "</div>";
|
||
} else {
|
||
str += "<div style='display:flex;align-items:center;'>" + item.marker + item.seriesName + "：" + item.value + "</div>";
|
||
}
|
||
}
|
||
|
||
if (params[3].value != "-") {
|
||
var trendStr = "";
|
||
if (rankInfo.hasOwnProperty("trend")) {
|
||
trendStr = "，较上一年" + rankInfo.trend;
|
||
}
|
||
|
||
str +=
|
||
"<div style='display:flex;align-items:center;margin-top:5px;'>排 名：" +
|
||
rankInfo.rankNum +
|
||
trendStr +
|
||
"</div>" +
|
||
"<div style='display:flex;align-items:center;'>最大值：" +
|
||
rankInfo.max +
|
||
"</div>" +
|
||
"<div style='display:flex;align-items:center;'>最小值：" +
|
||
rankInfo.min +
|
||
"</div>";
|
||
}
|
||
|
||
return str + "</div>";
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: data.year,
|
||
axisLabel: {
|
||
color: "#9FB6F9",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#9FB6F9",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "#9FB6F9",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#9FB6F9",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#294395",
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "value",
|
||
axisLabel: {
|
||
color: "#9FB6F9",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#9FB6F9",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#294395",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
// 预测最小值
|
||
{
|
||
name: "预测最小值",
|
||
data: data.yhat_lower,
|
||
type: "line",
|
||
symbol: "none",
|
||
smooth: true,
|
||
stack: "lb", // 堆叠
|
||
lineStyle: {
|
||
color: "rgba(0,0,0,0)", // 线的颜色
|
||
},
|
||
color: "rgba(73,146,255,0.4)",
|
||
},
|
||
// 预测最大值
|
||
{
|
||
name: "预测最大值",
|
||
data: data.yhat_upper,
|
||
type: "line",
|
||
symbol: "none",
|
||
smooth: true,
|
||
stack: "lb", // 堆叠
|
||
areaStyle: {
|
||
color: "rgba(73,146,255,0.4)",
|
||
origin: "start",
|
||
// shadowColor: "rgba(75,164,181,0.3)",
|
||
shadowOffsetX: 1,
|
||
opacity: 1,
|
||
},
|
||
lineStyle: {
|
||
color: "rgba(0,0,0,0)", // 线的颜色
|
||
},
|
||
color: "rgba(73,146,255,0.4)",
|
||
},
|
||
// 实际预测值
|
||
{
|
||
name: "预测值",
|
||
data: data.yhatOnly,
|
||
type: "line",
|
||
symbolSize: 5, // 点的大小
|
||
symbol: "circle", // 点的样式
|
||
itemStyle: {
|
||
// 点的样式
|
||
normal: {
|
||
color: "#4992FF",
|
||
},
|
||
},
|
||
smooth: true,
|
||
lineStyle: {
|
||
color: "#4992FF", // 线的颜色
|
||
type: "dotted", // 虚线
|
||
},
|
||
},
|
||
// 实际值
|
||
{
|
||
name: "实际值",
|
||
data: data.actual,
|
||
type: "line", // 图的样式
|
||
symbolSize: 5, // 点的大小
|
||
symbol: "circle", // 点的样式
|
||
smooth: true, // 是否圆滑
|
||
lineStyle: {
|
||
color: "#4992FF", // 线的颜色
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FFFFFF", // 点的颜色
|
||
},
|
||
},
|
||
},
|
||
// 预测增长率
|
||
{
|
||
name: "预测增长率",
|
||
yAxisIndex: 1,
|
||
data: data.yhatZsOnly,
|
||
type: "line",
|
||
symbolSize: 5, // 点的大小
|
||
symbol: "circle",
|
||
smooth: true,
|
||
itemStyle: {
|
||
// 点的样式
|
||
normal: {
|
||
color: "#7CFFB2",
|
||
},
|
||
},
|
||
lineStyle: {
|
||
color: "#7CFFB2", // 线的颜色
|
||
type: "dotted", // 虚线
|
||
},
|
||
},
|
||
// 增长率
|
||
{
|
||
name: "增长率",
|
||
yAxisIndex: 1,
|
||
data: data.actualZs,
|
||
type: "line",
|
||
symbolSize: 5, // 点的大小
|
||
symbol: "circle",
|
||
smooth: true,
|
||
itemStyle: {
|
||
// 点的样式
|
||
normal: {
|
||
color: "#7CFFB2",
|
||
},
|
||
},
|
||
lineStyle: {
|
||
color: "#7CFFB2", // 线的颜色
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
// 预测图表线的数据进行再次处理，实际值与预测值，实现图标的虚实线显示
|
||
function forecastMapDataDispose(data) {
|
||
// var format = {
|
||
// year: [], // 年份
|
||
// yhat_lower: [], // 预测最小值
|
||
// yhat_upper: [], // 预测最大值
|
||
// yhat: [], // 实际预测
|
||
// actual: [], // 实际值
|
||
// yhatZs: [], //增速实际预测
|
||
// actualZs: [], //增速实际值
|
||
// };
|
||
var yhatZs = data.yhatZs; //增速实际预测
|
||
var actualZs = data.actualZs; //增速实际值
|
||
|
||
// 存放每年没有增速实际值时的预测值
|
||
var yhatZsOnly = [];
|
||
// 处理增长率预测值
|
||
for (let i = 0; i < yhatZs.length; i++) {
|
||
var yhatZsItem = yhatZs[i]; // 增速预测值
|
||
var actualZsItem = actualZs[i]; // 增速实际值
|
||
if (typeof actualZsItem === "number" && !isNaN(actualZsItem)) {
|
||
// 增速实际值 为数字 即不为空
|
||
actualZsItem = actualZs[i + 1]; // 增速实际值下一年
|
||
if (typeof actualZsItem === "number" && !isNaN(actualZsItem)) {
|
||
// 增速实际值下一年不为空时 当年预测值置空
|
||
yhatZsOnly.push("-");
|
||
} else {
|
||
yhatZsOnly.push(actualZs[i]);
|
||
}
|
||
} else {
|
||
// 增速实际值 为空
|
||
yhatZsOnly.push(yhatZsItem);
|
||
}
|
||
}
|
||
data.yhatZsOnly = yhatZsOnly;
|
||
|
||
var yhat = data.yhat; //增速实际预测
|
||
var actual = data.actual; //增速实际值
|
||
// 存放每年没有实际值时的预测值
|
||
var yhatOnly = [];
|
||
// 处理预测值
|
||
for (let i = 0; i < yhat.length; i++) {
|
||
var yhatItem = yhat[i]; // 增速预测值
|
||
var actualItem = actual[i]; // 增速实际值
|
||
if (typeof actualItem === "number" && !isNaN(actualItem)) {
|
||
// 增速实际值 为数字 即不为空
|
||
actualItem = actual[i + 1]; // 增速实际值下一年
|
||
if (typeof actualItem === "number" && !isNaN(actualItem)) {
|
||
// 增速实际值下一年不为空时 当年预测值置空
|
||
yhatOnly.push("-");
|
||
} else {
|
||
yhatOnly.push(actual[i]);
|
||
}
|
||
} else {
|
||
// 增速实际值 为空
|
||
yhatOnly.push(yhatItem);
|
||
}
|
||
}
|
||
data.yhatOnly = yhatOnly;
|
||
}
|
||
|
||
//#endregion 预测图表
|
||
|
||
//#region 九个市州的预测线
|
||
|
||
// 九个市州的预测线 加载
|
||
function loadNineForecastMap(data, domId, mapName) {
|
||
var chartDom = document.getElementById(domId);
|
||
var myChart = echarts.init(chartDom);
|
||
myChart.clear();
|
||
var option;
|
||
|
||
option = {
|
||
grid: {
|
||
top: "30px",
|
||
bottom: "40px",
|
||
right: "120px",
|
||
},
|
||
// 设置图例
|
||
legend: {
|
||
data: data.endLabel,
|
||
y: "center",
|
||
right: "right",
|
||
padding: [0, 15, 0, 0],
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#9FB6F9",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
formatter: function (params) {
|
||
var str = " ";
|
||
str =
|
||
'<div style="width:100%;padding:5px 5px 5px 5px;font-size:13px;box-sizing:border-box;border-radius:4px;' +
|
||
'position:relative;background:rgba(000,000,000,0)">' +
|
||
"<div style='display:flex;align-items:center;margin-bottom:5px;'>" +
|
||
selectCity +
|
||
"-" +
|
||
mapName +
|
||
"-" +
|
||
params[0].axisValue +
|
||
"年" +
|
||
"</div>";
|
||
var data = Object.create(params);
|
||
var arr1 = data.slice(0, data.length / 2);
|
||
var arr2 = data.slice(data.length / 2, data.length);
|
||
// 排序
|
||
ranking(arr1);
|
||
data = Object.create(arr1);
|
||
|
||
if (!(typeof params[8].value === "number" && !isNaN(params[8].value))) {
|
||
ranking(arr2);
|
||
data = Object.create(arr2);
|
||
// 没有实际值时
|
||
str += "<div style='display:flex;align-items:center;'>" + "预测值：" + "</div>";
|
||
}
|
||
for (let i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
if (typeof item.value === "number" && !isNaN(item.value)) {
|
||
str += "<div style='display:flex;align-items:center;'>" + item.marker + item.seriesName + "：" + item.value + "</div>";
|
||
}
|
||
}
|
||
return str + "</div>";
|
||
},
|
||
},
|
||
title: {
|
||
// text: mapName,
|
||
left: "center",
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: data.year,
|
||
// name: "year",
|
||
// 坐标轴颜色设置
|
||
// axisLine:{
|
||
// lineStyle:{
|
||
// color:"#31447F"
|
||
// }
|
||
// },
|
||
// 坐标轴文字样式设置
|
||
axisLabel: {
|
||
color: "#9FB6F9",
|
||
},
|
||
// x 轴样式
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#9FB6F9",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
// name: "dataValue",
|
||
// 坐标轴文字样式设置
|
||
axisLabel: {
|
||
color: "#9FB6F9",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#9FB6F9",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#294395",
|
||
},
|
||
},
|
||
},
|
||
series: [],
|
||
};
|
||
// 线的配置
|
||
setLineConfig(option, data);
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
// 根据市、类型、年份 返回 排名、最大值、最小值
|
||
function getRanking(type, year, forecastState) {
|
||
var data = [];
|
||
switch (type) {
|
||
case "地区生产总值趋势分析":
|
||
data = nineForecastData.gdp;
|
||
break;
|
||
case "工业趋势分析":
|
||
data = nineForecastData.gy;
|
||
break;
|
||
case "人均生产总值趋势分析":
|
||
data = nineForecastData.rjsczz;
|
||
break;
|
||
case "第一产业增加值趋势分析":
|
||
data = nineForecastData.dycy;
|
||
break;
|
||
case "第二产业增加值趋势分析":
|
||
data = nineForecastData.decy;
|
||
break;
|
||
case "第三产业增加值趋势分析":
|
||
data = nineForecastData.dscy;
|
||
break;
|
||
}
|
||
data = JSON.parse(JSON.stringify(data));
|
||
|
||
var yearIndex = data.year.indexOf(year);
|
||
|
||
var dataArr = [];
|
||
var lastYearData = -1;
|
||
if (!forecastState) {
|
||
// 实际
|
||
dataArr = getVal(data.endLabel, data.data, yearIndex);
|
||
if (yearIndex != 0) {
|
||
lastYearData = getVal(data.endLabel, data.data, yearIndex - 1);
|
||
}
|
||
} else {
|
||
// 预测
|
||
dataArr = getVal(data.endLabel, data.dataOnly, yearIndex);
|
||
}
|
||
|
||
// 排序
|
||
ranking(dataArr);
|
||
|
||
var obj = {
|
||
max: dataArr[0].data,
|
||
min: dataArr[dataArr.length - 1].data,
|
||
rankNum: getIndex(dataArr),
|
||
};
|
||
if (lastYearData != -1) {
|
||
ranking(lastYearData);
|
||
obj.lastYearRankNum = getIndex(lastYearData);
|
||
if (obj.rankNum > obj.lastYearRankNum) {
|
||
obj.trend = "下降" + (obj.rankNum - obj.lastYearRankNum);
|
||
} else if (obj.rankNum < obj.lastYearRankNum) {
|
||
obj.trend = "上升" + (obj.lastYearRankNum - obj.rankNum);
|
||
} else if (obj.rankNum == obj.lastYearRankNum) {
|
||
obj.trend = "无变化";
|
||
}
|
||
}
|
||
|
||
return obj;
|
||
}
|
||
|
||
// 取值
|
||
function getVal(cityData, data, index) {
|
||
var arr = [];
|
||
for (let i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
var obj = {
|
||
city: cityData[i],
|
||
data: item[index],
|
||
};
|
||
arr.push(obj);
|
||
}
|
||
return arr;
|
||
}
|
||
|
||
// 排序
|
||
function ranking(dataArr) {
|
||
for (let i = 0; i < dataArr.length; i++) {
|
||
for (let j = i + 1; j < dataArr.length; j++) {
|
||
if (dataArr[i].data < dataArr[j].data) {
|
||
var zanCun = dataArr[i];
|
||
dataArr[i] = dataArr[j];
|
||
dataArr[j] = zanCun;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 获取索引
|
||
function getIndex(dataArr) {
|
||
for (let i = 0; i < dataArr.length; i++) {
|
||
const e = dataArr[i];
|
||
if (e.city == selectCity) {
|
||
return i + 1;
|
||
}
|
||
}
|
||
return -1;
|
||
}
|
||
|
||
// 设置线的配置
|
||
function setLineConfig(option, data) {
|
||
var da = data.data;
|
||
var endLabel = data.endLabel;
|
||
var dataOnly = data.dataOnly;
|
||
|
||
// 实际值 实线
|
||
for (let i = 0; i < da.length; i++) {
|
||
var item = da[i];
|
||
var useColor = regionColor(endLabel[i]);
|
||
option.series.push({
|
||
name: endLabel[i],
|
||
// 实际预测值
|
||
data: item,
|
||
type: "line",
|
||
symbolSize: 5, // 点的大小
|
||
symbol: "circle", // 点的样式
|
||
smooth: true,
|
||
itemStyle: {
|
||
// 点的样式
|
||
normal: {
|
||
color: useColor,
|
||
},
|
||
},
|
||
// 线的样式
|
||
lineStyle: {
|
||
color: useColor, // 线的颜色
|
||
},
|
||
// 线的末端显示
|
||
// endLabel: {
|
||
// show: true,
|
||
// formatter: endLabel[i],
|
||
// },
|
||
});
|
||
}
|
||
// 预测值 虚线
|
||
for (let i = 0; i < dataOnly.length; i++) {
|
||
var item = dataOnly[i];
|
||
var useColor = regionColor(endLabel[i]);
|
||
option.series.push({
|
||
name: endLabel[i],
|
||
// 实际预测值
|
||
data: item,
|
||
type: "line",
|
||
symbolSize: 5, // 点的大小
|
||
symbol: "circle", // 点的样式
|
||
smooth: true,
|
||
itemStyle: {
|
||
// 点的样式
|
||
normal: {
|
||
color: useColor,
|
||
},
|
||
},
|
||
// 线的样式
|
||
lineStyle: {
|
||
color: useColor, // 线的颜色
|
||
type: "dotted", // 虚线
|
||
},
|
||
// 线的末端显示
|
||
// endLabel: {
|
||
// show: true,
|
||
// formatter: endLabel[i],
|
||
// },
|
||
});
|
||
}
|
||
}
|
||
|
||
//#endregion 九个市州的预测线
|
||
|
||
// 地区对应的颜色
|
||
function regionColor(region) {
|
||
switch (region) {
|
||
case "贵阳市":
|
||
return "#EBB268";
|
||
case "六盘水市":
|
||
return "#D9E265";
|
||
case "遵义市":
|
||
return "#8BF28E";
|
||
case "安顺市":
|
||
return "#4AF59A";
|
||
case "毕节市":
|
||
return "#4AF5D8";
|
||
case "铜仁市":
|
||
return "#4ACCF5";
|
||
case "黔西南州":
|
||
return "#4AA5F5";
|
||
case "黔东南州":
|
||
return "#4A66F5";
|
||
case "黔南州":
|
||
return "#854AF5";
|
||
case "黔西南布依族苗族自治州":
|
||
return "#4AA5F5";
|
||
case "黔东南苗族侗族自治州":
|
||
return "#4A66F5";
|
||
case "黔南布依族苗族自治州":
|
||
return "#854AF5";
|
||
}
|
||
}
|
||
|
||
// 中上 地图形式
|
||
function loadMiddleTopMap() {
|
||
var chartDom = document.getElementById("middle_top_map");
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
myChart.showLoading();
|
||
$.get("./jsonFile/GuiZhouSheng.json", function (gzsJson) {
|
||
myChart.hideLoading();
|
||
echarts.registerMap("GZS", gzsJson);
|
||
option = {
|
||
title: {
|
||
text: "贵州省",
|
||
textStyle: {
|
||
color: "#0AEBE2",
|
||
},
|
||
left: "20px",
|
||
triggerEvent: true,
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
showDelay: 0,
|
||
transitionDuration: 0.2,
|
||
},
|
||
geo: [
|
||
{
|
||
map: "GZS",
|
||
top: "55px",
|
||
left: "160px",
|
||
zlevel: 2,
|
||
zoom: 1.13,
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
regions: [],
|
||
},
|
||
{
|
||
map: "GZS",
|
||
top: "59px",
|
||
left: "163px",
|
||
zlevel: 1,
|
||
zoom: 1.13,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: "#0D3DAB",
|
||
borderColor: "#00FFFF",
|
||
borderWidth: 0,
|
||
},
|
||
emphasis: {
|
||
// 也是选中样式
|
||
borderWidth: 0,
|
||
areaColor: "#0D3DAB",
|
||
label: {
|
||
show: false,
|
||
},
|
||
},
|
||
},
|
||
select: {
|
||
itemStyle: {
|
||
color: "#0D3DAB",
|
||
borderColor: "#0D3DAB",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "GZS PopEstimates",
|
||
type: "map",
|
||
roam: true,
|
||
map: "GZS",
|
||
geoIndex: 0,
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
},
|
||
},
|
||
selectedMode: "multiple",
|
||
data: [
|
||
{ name: "贵阳市", selected: true },
|
||
{ name: "六盘水市", selected: true },
|
||
{ name: "遵义市", selected: true },
|
||
{ name: "安顺市", selected: true },
|
||
{ name: "毕节市", selected: true },
|
||
{ name: "铜仁市", selected: true },
|
||
{ name: "黔西南布依族苗族自治州", selected: true },
|
||
{ name: "黔东南苗族侗族自治州", selected: true },
|
||
{ name: "黔南布依族苗族自治州", selected: true },
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
var regions = option.geo[0].regions;
|
||
var data = option.series[0].data;
|
||
// 每个市州的颜色单独设置
|
||
setRegionColor(regions, data);
|
||
|
||
// 点击事件
|
||
myChart.on("click", function (params) {
|
||
if (params.componentType == "title") {
|
||
// 设置多选
|
||
option.series[0].selectedMode = "multiple";
|
||
selectSet(option.series[0].data, "贵州省", false);
|
||
loadPage("贵州省");
|
||
// 重置标题
|
||
option.title.text = "贵州省";
|
||
// 隐藏指标相关性入口
|
||
$(".xiang_guan").hide();
|
||
} else {
|
||
// 加载点击的市州的各指标的数据
|
||
// 设置单选
|
||
option.series[0].selectedMode = "single";
|
||
selectSet(option.series[0].data, params.name, true);
|
||
// 重置标题
|
||
option.title.text = "贵州省-" + params.name;
|
||
switch (params.name) {
|
||
case "黔东南苗族侗族自治州":
|
||
loadPage("黔东南州");
|
||
break;
|
||
case "黔南布依族苗族自治州":
|
||
loadPage("黔南州");
|
||
break;
|
||
case "黔西南布依族苗族自治州":
|
||
loadPage("黔西南州");
|
||
break;
|
||
default:
|
||
loadPage(params.name);
|
||
}
|
||
// 显示指标相关性入口
|
||
$(".xiang_guan").show();
|
||
// 指标相关性标题加上选中的市州
|
||
$("#pertinence_title").html("指标相关性 - " + params.name);
|
||
}
|
||
myChart.clear();
|
||
myChart.setOption(option);
|
||
});
|
||
myChart.setOption(option);
|
||
});
|
||
}
|
||
|
||
// 设置点击的是否选中
|
||
function selectSet(arr, city, tf) {
|
||
for (let i = 0; i < arr.length; i++) {
|
||
var item = arr[i];
|
||
if (item.name == city) {
|
||
item.selected = tf;
|
||
} else {
|
||
item.selected = !tf;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 每个市州的颜色单独配置
|
||
function setRegionColor(regions, data) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
var item = data[i];
|
||
regions.push({
|
||
name: item.name,
|
||
select: {
|
||
itemStyle: {
|
||
color: regionColor(item.name),
|
||
borderColor: "#fff",
|
||
},
|
||
label: {
|
||
color: "#FFF",
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 1, //边框大小
|
||
borderColor: "#039ee4",
|
||
areaColor: "#153395", //背景颜色
|
||
label: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
emphasis: {
|
||
// 也是选中样式
|
||
borderWidth: 1,
|
||
borderColor: "#fff",
|
||
areaColor: regionColor(item.name),
|
||
label: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
// 中中 热力图形式
|
||
function loadMiddleMiddleMap(headX, headY, headXYData) {
|
||
$.get("./jsonFile/corrs.json", function (corrsJson) {
|
||
var corrsData = JSON.parse(JSON.stringify(corrsJson));
|
||
});
|
||
var chartDom = document.getElementById("heat_map");
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
const dataX = headX;
|
||
|
||
const dataY = headY;
|
||
|
||
const data = headXYData;
|
||
|
||
option = {
|
||
title: {
|
||
// text: "指标相关性",
|
||
left: "center",
|
||
},
|
||
grid: {
|
||
// height: "60%",
|
||
top: "40px",
|
||
left: "130px",
|
||
right: "20px",
|
||
bottom: "120px",
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: dataX,
|
||
splitArea: {
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
color: "#94ABEE",
|
||
interval: 0,
|
||
rotate: 40,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#94ABEE",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: dataY,
|
||
splitArea: {
|
||
show: true,
|
||
},
|
||
axisLabel: {
|
||
color: "#94ABEE",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#94ABEE",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
},
|
||
visualMap: {
|
||
min: -1,
|
||
max: 1,
|
||
calculable: true,
|
||
orient: "horizontal",
|
||
left: "center",
|
||
bottom: "5px",
|
||
inRange: {
|
||
color: ["rgba(6,154,220,1)", "rgba(255,255,255,1)", "rgba(252,155,27,1)"],
|
||
// color: ["rgba(84,6,220,1)","rgba(159,182,249,1)","rgba(194,20,5,1)"],
|
||
},
|
||
textStyle: {
|
||
color: "#93A5F0",
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
formatter: function (params) {
|
||
var str = " ";
|
||
str = '<div style="width:100%;padding:5px 5px 5px 5px;font-size:13px;box-sizing:border-box;border-radius:4px;position:relative;background:rgba(000,000,000,0)">';
|
||
|
||
str += "<div style='display:flex;align-items:center;'>" + params.seriesName + "</div>";
|
||
|
||
var correlationLevel = "";
|
||
var value = params.value[2];
|
||
if (value > 0) {
|
||
if (value >= 0.8) {
|
||
correlationLevel = "（正强相关）";
|
||
} else if (value >= 0.3 && value < 0.8) {
|
||
correlationLevel = "（正弱相关）";
|
||
} else if (value < 0.3) {
|
||
correlationLevel = "（没有相关性）";
|
||
}
|
||
} else {
|
||
if (-value >= 0.8) {
|
||
correlationLevel = "（负强相关）";
|
||
} else if (-value >= 0.3 && -value < 0.8) {
|
||
correlationLevel = "（负弱相关）";
|
||
} else if (-value < 0.3) {
|
||
correlationLevel = "（没有相关性）";
|
||
}
|
||
}
|
||
str += "<div style='display:flex;align-items:center;'>" + params.marker + dataX[params.value[0]] + "与" + dataY[params.value[1]] + "的相关性为：" + value + correlationLevel + "</div>";
|
||
|
||
return str + "</div>";
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "指标相关性",
|
||
type: "heatmap",
|
||
data: data,
|
||
label: {
|
||
show: true,
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.clear();
|
||
option && myChart.setOption(option);
|
||
}
|
||
|
||
// 时间格式化
|
||
Date.prototype.Format = function (fmt) {
|
||
var o = {
|
||
"M+": this.getMonth() + 1, //月份
|
||
"d+": this.getDate(), //日
|
||
"h+": this.getHours(), //小时
|
||
"m+": this.getMinutes(), //分
|
||
"s+": this.getSeconds(), //秒
|
||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
||
S: this.getMilliseconds(), //毫秒
|
||
};
|
||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||
for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
|
||
return fmt;
|
||
};
|