diff --git a/report-ui/src/mixins/queryform.js b/report-ui/src/mixins/queryform.js index 271201b2..13d46006 100644 --- a/report-ui/src/mixins/queryform.js +++ b/report-ui/src/mixins/queryform.js @@ -1,5 +1,6 @@ import miment from 'miment' -import { getData } from '@/api/bigscreen' +import {getData} from '@/api/bigscreen' + export default { data() { return { @@ -105,13 +106,13 @@ export default { }, /** * 将url参数解析到图表参数中 - * 1. tenantCode=aaa + * 1. tenantCode=aaa * 2. [setCode].tenantCode=aaa - * 判断是否有点(.) + * 判断是否有点(.) * a. 没有 -> 把所有的参数全部给插入contextData * b. 有 -> 点前缀的值去匹配相同的值再把对应的值插入contextData - * - * **/ + * + * **/ toEchartsDataQueryParams(params) { const queryParams = this.deepClone(params) const query = this.$route.query @@ -131,7 +132,7 @@ export default { } }) } - + return queryParams }, // 判断对象是否包含点 @@ -180,6 +181,8 @@ export default { return this.radarChartFn(params.chartProperties, data) } else if (chartType == "widget-select") { return this.selectChartFn(params.chartProperties, data) + } else if (chartType == "widget-mapv2chart") { + return this.mapLLChartFn(params.chartProperties, data) } else { return data } @@ -339,7 +342,7 @@ export default { return analysisData; }, // 下拉框 - selectChartFn(chartProperties, data){ + selectChartFn(chartProperties, data) { let valueField; let labelField; for (const key in chartProperties) { @@ -365,6 +368,27 @@ export default { } return analysisData; }, + // 地图带经纬度数据解析 + mapLLChartFn(chartProperties, data) { + const analysisData = []; + for (let i = 0; i < data.length; i++) { + const obj = {}; + for (const key in chartProperties) { + const value = chartProperties[key]; + if (value === "name") { + obj["name"] = data[i][key]; + } else if (value === "longitude") { + obj["longitude"] = Number(data[i][key]); + } else if (value === "latitude") { + obj["latitude"] = Number(data[i][key]); + } else { + obj["value"] = data[i][key]; + } + } + analysisData.push(obj); + } + return analysisData; + }, setUnique(arr) { let newArr = []; arr.forEach(item => { diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js index 54a1b138..0db14a7f 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js @@ -237,14 +237,6 @@ export const widgetBarMap = { placeholder: '', value: 20, }, - /*{ - type: 'vue-color', - label: '柱体颜色', - name: 'barColor', - required: false, - placeholder: '', - value: 'rgba(22,255,255, 1)' - },*/ { type: 'el-input-number', label: '柱底外圆大小', @@ -253,14 +245,6 @@ export const widgetBarMap = { placeholder: '', value: 30, }, -/* { - type: 'vue-color', - label: '柱底外圆颜色', - name: 'barBottomOutColor', - required: false, - placeholder: '', - value: 'rgba(22,255,255, 1)' - },*/ ], }, { @@ -282,14 +266,6 @@ export const widgetBarMap = { placeholder: '', value: 15, }, - /* { - type: 'vue-color', - label: '文字颜色', - name: 'fontTextColor', - required: false, - placeholder: '', - value: '#D4EEFF' - },*/ { type: 'el-select', label: '文字粗细', @@ -333,14 +309,6 @@ export const widgetBarMap = { placeholder: '', value: 15, }, - /*{ - type: 'vue-color', - label: '数值颜色', - name: 'fontDataColor', - required: false, - placeholder: '', - value: '#D4EEFF' - },*/ { type: 'el-select', label: '数值粗细', @@ -466,8 +434,8 @@ export const widgetBarMap = { required: false, placeholder: '', relactiveDom: 'dataType', - chartType: 'widget-piechart', - dictKey: 'MAP_PROPERTIES', + chartType: 'widget-mapv2chart', + dictKey: 'MAP_V2_PROPERTIES', relactiveDomValue: 'dynamicData', value: '', }, diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue index fc8da64c..7bef7ac5 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue @@ -50,7 +50,7 @@ export default { layoutSize: "80%", label: { emphasis: { - show: true, + show: false, color: "white", }, }, @@ -86,7 +86,7 @@ export default { aspectScale: 0.75, type: 'map', map: 'china', - roam: true, + //roam: true, effect: { show: false, period: 6, @@ -318,8 +318,8 @@ export default { // 修改图标options属性 editorOptions() { this.setOptionsTitle(); - this.setOptionsMap(); this.setOptionsTooltip(); + this.setOptionsMap(); this.setOptionsData(); }, // 标题设置 @@ -344,6 +344,27 @@ export default { }; this.options.title = title; }, + // tooltip 设置 + setOptionsTooltip() { + const optionsSetup = this.optionsSetup; + const tooltip = { + trigger: "item", + show: true, + enterable: true, + textStyle: { + color: optionsSetup.tipsColor, + fontSize: optionsSetup.tipsFontSize, + }, + formatter: function (params) { + if (params.seriesType == 'scatter') { + return params.data.name + "" + params.data.value[2]; + } else { + return params.name; + } + }, + }; + this.options.tooltip = tooltip; + }, // 地图设置 setOptionsMap() { const optionsSetup = this.optionsSetup; @@ -357,7 +378,7 @@ export default { fontSize: optionsSetup.fontSizeMap, }, emphasis: { - show: true, + show: false, }, } const itemStyle = { @@ -410,7 +431,7 @@ export default { const maxValue = Math.max.apply(null, val.map(item => item.value)) return heightRate / maxValue; }, - // 柱体的主干 + // 计算柱体的主干 calScatterTrunk(val, heightRate) { return val.map((item) => { return { @@ -418,13 +439,13 @@ export default { } }) }, - // 柱体顶部 + // 计算柱体顶部 calScatterTop(val, heightRate) { return val.map((item) => { return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.calMaxHeight(val, heightRate), item.value] }) }, - // 柱体的底部 + // 计算柱体的底部 calScatterBottom(val) { return val.map((item) => { return { @@ -433,27 +454,6 @@ export default { } }) }, - // tooltip 设置 - setOptionsTooltip() { - const optionsSetup = this.optionsSetup; - const tooltip = { - trigger: "item", - show: true, - enterable: true, - textStyle: { - color: optionsSetup.tipsColor, - fontSize: optionsSetup.tipsFontSize, - }, - formatter: function (params) { - if (params.seriesType == 'scatter') { - return params.data.name + "" + params.data.value[2]; - } else { - return params.name; - } - }, - }; - this.options.tooltip = tooltip; - }, // 柱体主干 getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate) { const barTrunk = { @@ -635,7 +635,6 @@ export default { longitude[i] = val[i].longitude; value[i] = val[i].value; } - // console.log(Object.keys(val[0])) let allData = []; for (const i in name) { geoCoordMap[name[i]] = [latitude[i], longitude[i]] @@ -678,28 +677,45 @@ export default { }); }, renderingFn(val) { - this.options.series[0]["data"] = val; + let name = []; + let latitude = []; + let longitude = []; + let value = []; + for (const i in val) { + name[i] = val[i].name; + latitude[i] = val[i].latitude; + longitude[i] = val[i].longitude; + value[i] = val[i].value; + } + for (const i in val) { + name[i] = val[i].name; + latitude[i] = val[i].latitude; + longitude[i] = val[i].longitude; + value[i] = val[i].value; + } + let allData = []; + for (const i in name) { + geoCoordMap[name[i]] = [latitude[i], longitude[i]] + const obj = { + name: name[i], + value: value[i] + } + allData.push(obj) + } const optionsSetup = this.optionsSetup; - const label = this.options.series[1]["label"]; - const normal = { - show: true, - color: "#fff", - fontWeight: "bold", - position: "inside", - formatter: function (para) { - return "{cnNum|" + para.data.value[2] + "}"; - }, - rich: { - cnNum: { - fontSize: optionsSetup.fontDataSize, - color: optionsSetup.fontDataColor, - fontWeight: optionsSetup.fontDataWeight, - }, - }, - }; - const data = convertData(val); - this.options.series[1]["data"] = data; - label["normal"] = normal; + const heightRate = optionsSetup.heightRate; + // 颜色设置 + const customColor = optionsSetup.customColor; + if (!customColor) return; + const arrColor = []; + for (const i in val) { + arrColor.push(customColor[i % customColor.length].color) + } + + this.$set(this.options.series,1,this.getOptionsBarTrunk(optionsSetup, arrColor, allData, heightRate)) + this.$set(this.options.series,2,this.getOptionsBarTop(optionsSetup, arrColor, allData, heightRate)) + this.$set(this.options.series,3,this.getOptionsBarBottom(optionsSetup, arrColor, allData)) + this.$set(this.options.series,4,this.getOptionsBarBottomOut(optionsSetup, arrColor, allData)) }, }, };