mirror of
https://gitee.com/myxzgzs/boyue_jnpf.git
synced 2025-08-09 15:52:42 +08:00
630 lines
22 KiB
JavaScript
630 lines
22 KiB
JavaScript
import jnpf from '@/utils/jnpf'
|
||
import {
|
||
geojson,
|
||
getAtlas
|
||
} from '@/api/portal/portal.js'
|
||
import {
|
||
getDataInterfaceRes
|
||
} from '@/api/common'
|
||
let timer;
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
mapData: [],
|
||
mapList: [],
|
||
mapType: '',
|
||
markPoints: [],
|
||
pointLoading: false,
|
||
opts: {
|
||
update: true,
|
||
fontSize: 10,
|
||
padding: [40, 15, 30, 15],
|
||
extra: {
|
||
map: {
|
||
mercator: true,
|
||
},
|
||
},
|
||
},
|
||
regionStep: [],
|
||
stepMapList: [],
|
||
option: {}
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
if (this.config.dataType === 'dynamic') {
|
||
uni.$off('proRefresh')
|
||
uni.$on('proRefresh', () => {
|
||
this.handelChart()
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
if (timer) clearInterval(timer)
|
||
this.handelChart()
|
||
if (!this.config.allRefresh.autoRefresh && this.config?.refresh?.autoRefresh) {
|
||
timer = setInterval(this.handelChart, this.config.refresh.autoRefreshTime * 60000)
|
||
}
|
||
},
|
||
async handelChart() {
|
||
this.customEchartsKey()
|
||
if (this.config.dataType === 'dynamic') {
|
||
if (!this.config.propsApi) return
|
||
const query = {
|
||
paramList: this.config.templateJson
|
||
};
|
||
getDataInterfaceRes(this.config.propsApi, query).then(res => {
|
||
this.config.option.defaultValue = this.handleMappingConfig(res.data, this.config)
|
||
this.handleAttrs()
|
||
})
|
||
} else {
|
||
this.handleAttrs()
|
||
}
|
||
},
|
||
// 自定义echarts属性取app的
|
||
customEchartsKey() {
|
||
this.config.option = {
|
||
...this.config.option,
|
||
...this.config.appOption
|
||
}
|
||
if (['customEcharts'].includes(this.config.jnpfKey)) {
|
||
this.config.dataType = this.config.appDataType
|
||
this.config.propsApi = this.config.appPropsApi
|
||
this.config.propsName = this.config.appPropsName
|
||
this.config.templateJson = this.config.appTemplateJson
|
||
this.config.refresh = this.config.appRefresh ? this.config.appRefresh : {}
|
||
}
|
||
this.config.option.urlAddress = this.config.option.appUrlAddress
|
||
},
|
||
// 处理字段映射
|
||
handleMappingConfig(resultData, config) {
|
||
let defaultValue = undefined
|
||
if (['rankList', 'barChart', 'pieChart', 'tableList'].includes(this.config.jnpfKey)) {
|
||
defaultValue = this.config.option.defaultValue || []
|
||
}
|
||
let mappingConfig = config.mappingConfig
|
||
let result = []
|
||
|
||
resultData.forEach(data => {
|
||
let temp = {}
|
||
for (let item of mappingConfig) {
|
||
if (item.field === '系列') {
|
||
temp['type'] = item.value ? data[item.value] : data['type']
|
||
}
|
||
if (item.field === '维度') {
|
||
temp['name'] = item.value ? data[item.value] : data['name']
|
||
}
|
||
if (item.field === '数值') {
|
||
temp['value'] = item.value ? data[item.value] : data['value']
|
||
}
|
||
if (item.field === '最大值') {
|
||
temp['max'] = item.value ? data[item.value] : data['max']
|
||
}
|
||
if (item.field === '时间戳') {
|
||
temp['timestamp'] = item.value ? data[item.value] : data['timestamp']
|
||
}
|
||
if (item.field === '经度') {
|
||
temp['long'] = item.value ? data[item.value] : data['long']
|
||
}
|
||
if (item.field === '纬度') {
|
||
temp['lat'] = item.value ? data[item.value] : data['lat']
|
||
}
|
||
}
|
||
result.push(temp)
|
||
})
|
||
return result
|
||
},
|
||
handleParam(e) {
|
||
let jnpfKey = this.config.jnpfKey
|
||
if (jnpfKey == 'customEcharts') return
|
||
let item = {}
|
||
let choose = e.opts.series && e.opts.series[0]
|
||
let chooseIndex = e.currentIndex['index']
|
||
let name = ''
|
||
let type = ''
|
||
let value = ''
|
||
if (jnpfKey === "barChart") {
|
||
name = e.opts.categories[chooseIndex]
|
||
value = choose.data[chooseIndex]
|
||
type = choose.name
|
||
}
|
||
if (jnpfKey === "pieChart") {
|
||
name = choose.name
|
||
value = choose.data
|
||
let series = this.option.chartData.series && this.option.chartData.series[0]
|
||
type = series.name
|
||
}
|
||
if (jnpfKey === "lineChart") {
|
||
name = e.opts.categories[chooseIndex]
|
||
value = choose.data[chooseIndex]
|
||
type = choose.name
|
||
}
|
||
if (jnpfKey === "radarChart") {
|
||
chooseIndex = e.currentIndex
|
||
name = e.opts.categories[chooseIndex]
|
||
value = choose.data[chooseIndex]
|
||
type = choose.name
|
||
}
|
||
if (jnpfKey === "mapChart" && choose.properties.childrenNum == 0) {
|
||
name = choose.properties.name
|
||
item.long = choose.properties.center[0]
|
||
item.lat = choose.properties.center[1]
|
||
}
|
||
if (chooseIndex < 0 && jnpfKey !== "mapChart") return
|
||
if (jnpfKey === "mapChart" && choose.properties.childrenNum != 0) return
|
||
item.name = name
|
||
item.value = value
|
||
item.type = type
|
||
item.urlAddress = this.config.option.urlAddress
|
||
this.jnpf.solveAddressParam(item, this.config)
|
||
this.jnpf.jumpLink(item.urlAddress)
|
||
},
|
||
handleAttrs() {
|
||
let chartTitle = {
|
||
titleText: this.config.option.titleText, //主标题
|
||
titleTextStyleColor: this.config.option.titleTextStyleColor, //主标题字体颜色
|
||
titleTextStyleFontSize: this.config.option.titleTextStyleFontSize * 2 + 'rpx', //主标题字体大小[12-25px]
|
||
titleTextStyleFontWeight: this.config.option.titleTextStyleFontWeight ? 700 : 0, //主标题是否加粗
|
||
titleLeft: this.config.option.titleLeft === 'left' ? 'flex-start' : this.config.option
|
||
.titleLeft === 'right' ? 'flex-end' : 'center', //主子标题位置[left,center,right]
|
||
titleBgColor: this.config.option.titleBgColor, //主子标题背景色[rgba(),#303133]
|
||
// 图表副标题设置
|
||
titleSubtext: this.config.option.titleSubtext, //子标题
|
||
titleSubtextStyleColor: this.config.option.titleSubtextStyleColor, //子标题字体颜色
|
||
titleSubtextStyleFontSize: this.config.option.titleSubtextStyleFontSize * 2 +
|
||
'rpx', //子标题字体大小[12-25px]
|
||
titleSubtextStyleFontWeight: this.config.option.titleSubtextStyleFontWeight ? 700 : 0, //子标题是否加粗
|
||
}
|
||
if (['customEcharts'].includes(this.config.jnpfKey)) {
|
||
this.$nextTick(() => {
|
||
this.show = true
|
||
this.key = +new Date()
|
||
})
|
||
return
|
||
}
|
||
|
||
let defVal = this.config.option.defaultValue
|
||
let chartVal = JSON.parse(JSON.stringify(defVal)) || []
|
||
let typeArr = Array.from(new Set(chartVal.map((item) => item.type)))
|
||
let axisData = Array.from(new Set(chartVal.map((item) => item.name)))
|
||
let seriesData = []
|
||
let colorList = [];
|
||
let chartsType = "";
|
||
let Ymin = []; //y轴最小
|
||
let Ymax = []; //y轴最大
|
||
let type = "";
|
||
let yAxis = {};
|
||
let xAxis = {};
|
||
if (!['mapChart', 'customEcharts'].includes(this.config.jnpfKey)) {
|
||
typeArr.forEach((title, index) => {
|
||
const type = this.getType(title, this.config)
|
||
let obj = {
|
||
name: title,
|
||
type: type
|
||
}
|
||
if (this.config.option.seriesLabelShow) {
|
||
obj.textSize = (this.config.option.seriesLabelFontSize / 2) < 12 ? 12 : this.config
|
||
.option
|
||
.seriesLabelFontSize / 2
|
||
obj.textColor = this.config.option.seriesLabelColor
|
||
}
|
||
let chartArr = chartVal.filter((item) => title === item.type)
|
||
if (this.config.jnpfKey === 'barChart' || this.config.jnpfKey === 'lineChart' || this
|
||
.config
|
||
.jnpfKey ==
|
||
'radarChart') {
|
||
obj['data'] = chartArr.map((item) => item.value)
|
||
} else {
|
||
obj['data'] = chartArr.map((item) => {
|
||
return {
|
||
value: item.value,
|
||
name: item.name,
|
||
}
|
||
})
|
||
if (this.config.option.showZero) obj['data'] = obj['data'].filter((item) => item
|
||
.value != 0)
|
||
this.key = +new Date
|
||
}
|
||
Ymin.push(Math.min(...obj['data']))
|
||
Ymax.push(Math.max(...obj['data']))
|
||
seriesData.push(obj);
|
||
})
|
||
xAxis = {
|
||
disabled: !this.config.option.xAxisShow, //不绘制X轴
|
||
axisLine: this.config.option.xAxisShow, //绘制坐标轴轴线
|
||
axisLineColor: !this.config.option.xAxisShow ? '#fff' : this.config.option
|
||
.xAxisAxisLineLineStyleColor, //坐标轴轴线颜色，默认#CCCCCC
|
||
title: "", //X轴标题
|
||
titleFontSize: this.config.option.xAxisNameTextStyleFontSize, //标题字体大小
|
||
titleFontColor: this.config.option.xAxisNameTextStyleColor, //X轴名称字体颜色
|
||
titleOffsetY: -20, //标题纵向偏移距离，负数为向上偏移，正数向下偏移
|
||
titleOffsetX: -300, //标题横向偏移距离，负数为向左偏移，正数向右偏移
|
||
fontSize: (this.config.option.xAxisAxisLabelTextStyleFontSize / 2) < 14 ? 14 : this.config
|
||
.option
|
||
.xAxisAxisLabelTextStyleFontSize / 2, //X轴标签字体大小
|
||
fontColor: this.config.option.xAxisAxisLabelTextStyleColor, //X轴标签字体颜色
|
||
rotateAngle: this.config.option.xAxisAxisLabelRotate, ////X轴标签角度
|
||
rotateLabel: this.config.option.xAxisAxisLabelRotate > 0 ? true : false, //【旋转】数据点（刻度点）文字
|
||
gridColor: this.config.option.xAxisSplitLineLineStyleColor, //纵向网格颜色，默认#CCCCCC
|
||
splitNumber: 4, //X轴网格数量，纵向网格数量(竖着的)
|
||
disableGrid: !this.config.option.xAxisShow ? !this.config.option.xAxisShow : !this.config
|
||
.option.xAxisSplitLineShow, //不绘制纵向网格(即默认绘制网格)
|
||
scrollShow: axisData.length > 5 ? true : false, //是否显示滚动条，配合拖拽滚动使用（即仅在启用 enableScroll 时有效
|
||
scrollAlign: "left", //滚动条初始位置
|
||
scrollColor: "#A6A6A6", //滚动条颜色，默认#A6A6A6
|
||
scrollBackgroundColor: "#EFEBEF", //滚动条底部背景颜色，默认#EFEBEF
|
||
itemCount: axisData.length > 5 ? 6 : 5, //单屏数据密度即图表可视区域内显示的X轴数据点数量，仅在启用enableScroll时有效
|
||
};
|
||
yAxis = {
|
||
data: [{
|
||
position: "left",
|
||
title: "",
|
||
min: this.config.option.styleType == 6 ? -jnpf.toRound(Math.abs(Math.min(...
|
||
Ymin)
|
||
.toString().length > 2 ? Math.min(...Ymin) - 200 : Math
|
||
.min(
|
||
...Ymin) - 50)) : 0,
|
||
max: jnpf.toRound(Math.max(...Ymax)),
|
||
axisLine: true, //坐标轴轴线是否显示（数据还能显示）
|
||
axisLineColor: this.config.option
|
||
.yAxisAxisLineLineStyleColor, //坐标轴轴线颜色，默认#CCCCCC
|
||
disabled: !this.config.option.yAxisShow, //不绘制Y轴（刻度和轴线都不绘制）
|
||
fontColor: this.config.option
|
||
.yAxisAxisLabelTextStyleColor, //数据点（刻度点）字体颜色，默认#666666
|
||
fontSize: (this.config.option.yAxisAxisLabelTextStyleFontSize / 2) < 12 ? 12 : this
|
||
.config
|
||
.option.yAxisAxisLabelTextStyleFontSize / 2, //数据点（刻度点）字体颜色，默认#666666
|
||
}],
|
||
padding: 10, //多个Y轴间的间距
|
||
gridSet: "number", //横向向网格数量类型设置,可选值,'auto','array'
|
||
disableGrid: !this.config.option.yAxisSplitLineShow, //不绘制横向向网格(即默认绘制网格)
|
||
splitNumber: 4, //【指定数量】的横向向网格数量，此数量与Y轴数据点是否为小数有关，如果指定了max，请指定为能被max-min整除的数值
|
||
gridType: "solid", //横向向网格线型
|
||
gridColor: this.config.option.yAxisSplitLineLineStyleColor, //横向网格颜色，默认#CCCCCC
|
||
};
|
||
this.config.option.colorList.forEach((o, i) => {
|
||
if (o.color1) colorList.push(o.color1)
|
||
})
|
||
}
|
||
let opts = {
|
||
color: colorList, //主题颜色，16进制颜色格式，Array格式
|
||
padding: [15, 15, 0, 15], //画布填充边距[上,右,下,左]，Array格式
|
||
enableScroll: axisData.length > 5 ? true :
|
||
false, //开启图表可拖拽滚动，开启后ontouch需要赋值为true，X轴配置里需要配置itemCount单屏幕数据点数量
|
||
dataLabel: this.config.option.seriesLabelShow, //是否显示图表区域内数据点上方的数据文案
|
||
legend: {
|
||
fontColor: this.config.jnpfKey === 'pieChart' ? "#666666" : "",
|
||
show: this.config.option.legendShow, //是否显示图例标识
|
||
position: 'top',
|
||
float: 'right',
|
||
fontSize: (this.config.option.legendTextStyleFontSize / 2) < 14 ? 14 : this.config.option
|
||
.legendTextStyleFontSize / 2
|
||
},
|
||
extra: {
|
||
tooltip: {
|
||
showBox: this.config.option.tooltipShow, //提示语显示
|
||
fontSize: (this.config.option.tooltipTextStyleFontSize / 2) < 14 ? 14 : this.config
|
||
.option
|
||
.tooltipTextStyleFontSize / 2, //提示语字体大小
|
||
fontColor: this.config.option.tooltipTextStyleColor, //提示语字体颜色
|
||
bgColor: this.config.option.tooltipBgColor || '#000000' //提示窗口的背景颜色
|
||
},
|
||
mix: {
|
||
column: {}
|
||
},
|
||
column: {
|
||
type: 'group',
|
||
width: this.config.option.seriesBarWidth, //柱体宽度
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08,
|
||
linearType: "none",
|
||
barBorderRadius: [this.config.option.seriesItemStyleBarBorderRadius, this.config.option
|
||
.seriesItemStyleBarBorderRadius, this.config.option
|
||
.seriesItemStyleBarBorderRadius,
|
||
this.config.option.seriesItemStyleBarBorderRadius
|
||
], //自定义4个圆角半径[左上,右上,右下,左下]
|
||
seriesGap: 5, //多series每个柱子之间的间距
|
||
customColor: colorList, //扩展渐变色
|
||
barBorderCircle: false
|
||
}
|
||
}
|
||
}
|
||
if (this.config.jnpfKey === 'barChart') {
|
||
if (this.config.option.styleType == 5 || this.config.option.styleType == 1 ||
|
||
this.config.option.styleType == 4 || this.config.option.styleType == 6) {
|
||
type = 'group'
|
||
if (this.config.option.styleType == 6) {
|
||
opts.extra.column.barBorderRadius = []
|
||
|
||
// opts.extra.column.width = 50
|
||
// yAxis.splitNumber = (yAxis.data[0].max / 500) + (Math.abs(yAxis.data[0].min) / 500)
|
||
}
|
||
} else {
|
||
type = 'stack'
|
||
opts.extra.mix.column = {
|
||
width: this.config.option.seriesBarWidth, //柱体宽度
|
||
barBorderCircle: false, //启用分组柱状图半圆边框
|
||
barBorderRadius: [this.config.option.seriesItemStyleBarBorderRadius, this.config.option
|
||
.seriesItemStyleBarBorderRadius, this.config.option
|
||
.seriesItemStyleBarBorderRadius,
|
||
this.config.option.seriesItemStyleBarBorderRadius
|
||
], //自定义4个圆角半径[左上,右上,右下,左下]
|
||
}
|
||
}
|
||
chartsType = this.config.option.styleType == 7 ? 'mix' : 'column'
|
||
opts.xAxis = {
|
||
...xAxis
|
||
}
|
||
opts.yAxis = {
|
||
...yAxis
|
||
}
|
||
opts.extra.column.type = type
|
||
} else if (this.config.jnpfKey === "pieChart") {
|
||
chartsType = 'pie'
|
||
opts.fontColor = this.config.option.seriesLabelColor
|
||
opts.fontSize = (this.config.option.seriesLabelFontSize / 2) < 14 ? 14 : this.config.option
|
||
.seriesLabelFontSize / 2
|
||
let pieChartObj = {
|
||
borderColor: "#FFFFFF",
|
||
borderWidth: 3,
|
||
activeOpacity: 0.5,
|
||
offsetAngle: -90,
|
||
labelWidth: 15,
|
||
border: false,
|
||
}
|
||
let pieChartObj2 = {
|
||
offsetX: 0,
|
||
offsetY: 0,
|
||
name: "",
|
||
}
|
||
if (this.config.option.styleType == 1) {
|
||
if (this.config.option.roseType) chartsType = 'rose'
|
||
opts.extra[chartsType] = {
|
||
...pieChartObj
|
||
}
|
||
} else {
|
||
chartsType = 'ring';
|
||
opts.title = {
|
||
fontSize: 15,
|
||
color: "#666666",
|
||
...pieChartObj2
|
||
};
|
||
opts.subtitle = {
|
||
fontSize: 25,
|
||
color: "#7cb5ec",
|
||
...pieChartObj2
|
||
}
|
||
opts.extra[chartsType] = {
|
||
ringWidth: 60,
|
||
activeRadius: 10,
|
||
...pieChartObj
|
||
}
|
||
}
|
||
} else if (this.config.jnpfKey === "lineChart") {
|
||
chartsType = this.config.option.areaStyle ? 'area' : 'line'
|
||
type = this.config.option.styleType == 2 ? 'curve' : this.config.option.styleType == 3 ? 'step' :
|
||
'straight'
|
||
let lineChartObj = {
|
||
type: type,
|
||
width: this.config.option.seriesLineStyleWidth
|
||
}
|
||
opts.extra[chartsType] = {
|
||
...lineChartObj
|
||
}
|
||
opts.xAxis = {
|
||
...xAxis
|
||
}
|
||
opts.yAxis = {
|
||
...yAxis
|
||
}
|
||
} else if (this.config.jnpfKey === "radarChart") {
|
||
chartsType = "radar";
|
||
type = this.config.option.styleType == 1 ? chartsType : 'circle'
|
||
opts.fontSize = (this.config.option.radarAxisNameFontSize / 2) < 14 ? 14 : this.config.option
|
||
.radarAxisNameFontSize / 2
|
||
opts.fontColor = this.config.option.seriesLabelColor
|
||
opts.extra[chartsType] = {
|
||
gridType: type,
|
||
gridColor: "#CCCCCC",
|
||
gridCount: 5,
|
||
opacity: 0.2,
|
||
max: 200,
|
||
labelShow: true,
|
||
border: true,
|
||
max: 100,
|
||
labelColor: this.config.option.radarAxisNameColor
|
||
}
|
||
} else {
|
||
this.getAtlas()
|
||
chartsType = "map";
|
||
this.config.option.markPoints = []
|
||
opts = {
|
||
update: true,
|
||
fontSize: this.config.option.geoLabelFontSize,
|
||
padding: [15, 15, 30, 15],
|
||
dataLabel: this.config.option.geoLabelShow,
|
||
fontColor: this.config.option.geoLabelColor,
|
||
extra: {
|
||
tooltip: {
|
||
showBox: this.config.option.tooltipShow,
|
||
fontColor: this.config.option.tooltipTextStyleColor || '#000',
|
||
//fontSize: this.config.option.tooltipTextStyleFontSize,
|
||
bgColor: this.config.option.tooltipBgColor || '#fff',
|
||
bgOpacity: 1
|
||
},
|
||
map: {
|
||
mercator: false,
|
||
border: true,
|
||
borderWidth: this.config.option.geoBorderWidth / 2,
|
||
borderColor: this.config.option.geoBorderColor,
|
||
activeBorderColor: "#F04864",
|
||
activeFillColor: "#FACC14",
|
||
activeFillOpacity: 1,
|
||
active: true,
|
||
activeTextColor: "#FFFFFF",
|
||
fillOpacity: 1
|
||
},
|
||
},
|
||
}
|
||
this.config.option.defaultValue.forEach(o => {
|
||
this.config.option.markPoints.push({
|
||
latitude: o.lat,
|
||
longitude: o.long,
|
||
name: o.name,
|
||
value: o.value
|
||
})
|
||
})
|
||
}
|
||
let chartData = {
|
||
categories: axisData,
|
||
series: seriesData,
|
||
opts,
|
||
type: chartsType
|
||
}
|
||
if (chartsType != 'map') {
|
||
if (chartTitle.titleText && chartTitle.titleSubtext) {
|
||
chartData.opts.legend.padding = 50
|
||
} else if (chartTitle.titleText && !chartTitle.titleSubtext) {
|
||
chartData.opts.legend.padding = 30
|
||
} else {
|
||
chartData.opts.legend.padding = 5
|
||
}
|
||
}
|
||
this.config.option.chartData = chartData
|
||
this.config.option.chartTitle = chartTitle
|
||
this.option = this.config.option
|
||
this.$nextTick(() => {
|
||
this.show = true
|
||
this.key = +new Date()
|
||
})
|
||
},
|
||
/* 获取地图树 */
|
||
getAtlas() {
|
||
getAtlas().then(res => {
|
||
this.mapList = jnpf.treeToArray(res.data);
|
||
this.regionStep = []
|
||
this.drawChina()
|
||
})
|
||
},
|
||
/* 获取地图数据 */
|
||
drawChina(type) {
|
||
if (Array.isArray(this.option.mapType) && !type) this.mapType = this.option.mapType[this.option.mapType
|
||
.length - 1]
|
||
geojson(this.mapType).then(res => {
|
||
let series = JSON.parse(JSON.stringify(res.data.features)) || [];
|
||
for (var i = 0; i < series.length; i++) {
|
||
if (series[i].geometry.type === 'Polygon' && !type) {
|
||
if (this.mapType == 150000) {
|
||
series[i].geometry.coordinates = series[i].geometry.coordinates
|
||
} else {
|
||
series[i].geometry.coordinates = [series[i].geometry.coordinates]
|
||
}
|
||
}
|
||
series[i].value = Math.floor(Math.random() * 1000)
|
||
series[i].color = this.option.geoAreaColor
|
||
}
|
||
this.mapData = series
|
||
this.stepMapList.push(this.mapData)
|
||
this.option.chartData.series = series
|
||
this.key = +new Date()
|
||
})
|
||
},
|
||
/* 地图点击路径 */
|
||
regionStepClick(e, index) {
|
||
if (index == 0) {
|
||
this.stepMapList = []
|
||
this.regionStep = []
|
||
for (let i = 0; i < this.mapList.length; i++) {
|
||
if (this.mapList[i].enCode == this.option.mapType[this.option.mapType.length - 1]) {
|
||
this.regionStep.push({
|
||
name: this.mapList[i].fullName,
|
||
adcode: this.mapList[i].enCode
|
||
})
|
||
}
|
||
}
|
||
this.drawChina()
|
||
return
|
||
}
|
||
this.mapType = e.adcode
|
||
this.stepMapList.splice(index + 1, this.regionStep.length - index - 1)
|
||
this.regionStep.splice(index + 1, this.regionStep.length - index - 1)
|
||
this.drawChina(1)
|
||
},
|
||
/* 地图点击 */
|
||
getIndex(e) {
|
||
// 处理跳转参数
|
||
this.handleParam(e)
|
||
|
||
let current = this.mapList.filter(o => o.enCode == this.option.mapType[this.option.mapType.length - 1])
|
||
if (!this.config.option.drillDown) return
|
||
let mapData = this.mapData[e.currentIndex] ? this.mapData[e.currentIndex] : []
|
||
this.mapType = mapData.properties.adcode
|
||
let acroutes = mapData.properties.acroutes
|
||
let selectName = mapData.properties.name
|
||
let adcode = mapData.properties.adcode
|
||
this.regionStep.unshift({
|
||
name: current[0].fullName,
|
||
adcode: current[0].enCode
|
||
})
|
||
this.regionStep.push({
|
||
name: selectName,
|
||
adcode: adcode
|
||
})
|
||
//对象数组去重
|
||
this.regionStep = this.regionStep.filter((a, b, c) => {
|
||
return c.findIndex(x => x.name === a.name) === b
|
||
})
|
||
this.pointLoading = false
|
||
this.drawChina(1)
|
||
},
|
||
getType(title) {
|
||
if (this.config.jnpfKey == 'barChart') {
|
||
if (this.config.option.styleType == 7) {
|
||
const arr = this.config.option.barType.find(ele => title == ele.title)
|
||
if (arr && arr.type) {
|
||
if (arr.type == 'bar') return 'column'
|
||
return arr.type
|
||
}
|
||
}
|
||
return 'column'
|
||
} else if (this.config.jnpfKey == 'lineChart') {
|
||
return 'line'
|
||
} else if (this.config.jnpfKey == 'pieChart') {
|
||
return 'pie'
|
||
} else {
|
||
return 'radar'
|
||
}
|
||
},
|
||
/* 设置地图点 */
|
||
setPoints(e) {
|
||
const mapData = e.opts.chartData.mapData;
|
||
this.option.markPoints = this.option.markPoints.slice(0, this.option.appShowNumber)
|
||
for (var i = 0; i < this.option.markPoints.length; i++) {
|
||
const points = this.coordinateToPoint(this.option.markPoints[i].longitude, this.option.markPoints[i]
|
||
.latitude, mapData
|
||
.bounds,
|
||
mapData.scale, mapData.xoffset, mapData.yoffset, mapData.mercator)
|
||
this.option.markPoints[i].x = points.x;
|
||
this.option.markPoints[i].y = points.y;
|
||
}
|
||
this.pointLoading = true
|
||
this.$refs.charts.key = +new Date();
|
||
},
|
||
/* 经纬度转画布坐标 */
|
||
coordinateToPoint(longitude, latitude, bounds, scale, xoffset, yoffset, mercator) {
|
||
var x = longitude;
|
||
var y = latitude;
|
||
if (mercator == true) {
|
||
x = longitude * 20037508.34 / 130;
|
||
y = Math.log(Math.tan((90 + latitude) * Math.PI / 360)) / (Math.PI / 180);
|
||
y = y * 20037508.34 / 180;
|
||
}
|
||
return {
|
||
x: (x - bounds.xMin) * scale + xoffset,
|
||
y: (bounds.yMax - y) * scale + yoffset
|
||
};
|
||
}
|
||
}
|
||
} |