ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat--新增中国地图-柱形地图-静态

Browse Source
qianming 1 year ago
parent 13007cb248
commit d126955062
5 changed files with 1366 additions and 0 deletions
Show Stats Download Patch File Download Diff File

510
report-ui/src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-bar-map.js
Unescape Escape View File

@ -0,0 +1,510 @@
export const widgetBarMap = {
code: 'widgetBarMap',
type: 'mapChart',
tabName: '中国地图',
label: '柱形地图',
icon: 'iconzhongguoditu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '中国地图-柱形图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题显示',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-text',
label: '标题名',
name: 'titleText',
required: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#FFD700'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '字体风格',
name: 'textFontStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题名',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: 'rgba(30, 144, 255, 1)'
},
{
type: 'el-input-number',
label: '字体字号',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '字体风格',
name: 'subTextFontStyle',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'italic', name: 'italic斜体'},
{code: 'oblique', name: 'oblique斜体'},
],
value: 'normal'
},
],
},
{
name: '地图设置',
list: [
{
type: 'el-switch',
label: '省市区显示',
name: 'isShowMap',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-input-number',
label: '文字大小',
name: 'fontSizeMap',
required: false,
placeholder: '',
value: 20,
},
{
type: 'vue-color',
label: '文字颜色',
name: 'colorMap',
required: false,
placeholder: '',
value: '#53D9FF'
}
]
},
{
name: '地图块颜色',
list: [
{
type: 'vue-color',
label: '0%处颜色',
name: 'font0PreColor',
required: false,
placeholder: '',
value: '#073684'
},
{
type: 'vue-color',
label: '100%颜色',
name: 'font100PreColor',
required: false,
placeholder: '',
value: '#061E3D'
},
{
type: 'vue-color',
label: '高亮渐变色',
name: 'fontHighlightColor',
required: false,
placeholder: '',
value: '#2B91B7'
},
{
type: 'vue-color',
label: '边界颜色',
name: 'borderColor',
required: false,
placeholder: '',
value: '#061E3D'
},
],
},
{
name: '柱形设置',
list: [
{
type: 'el-input-number',
label: '高度比',
name: 'heightRate',
required: false,
placeholder: '',
value: 5,
},
{
type: 'el-input-number',
label: '柱体宽度',
name: 'barWidth',
required: false,
placeholder: '',
value: 20,
},
/*{
type: 'vue-color',
label: '柱体颜色',
name: 'barColor',
required: false,
placeholder: '',
value: 'rgba(22,255,255, 1)'
},*/
{
type: 'el-input-number',
label: '柱底外圆大小',
name: 'barBottomOutSymbolSize',
required: false,
placeholder: '',
value: 30,
},
/* {
type: 'vue-color',
label: '柱底外圆颜色',
name: 'barBottomOutColor',
required: false,
placeholder: '',
value: 'rgba(22,255,255, 1)'
},*/
],
},
{
name: '数值设置',
list: [
{
type: 'el-switch',
label: '文字显示',
name: 'isShowFontText',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '文字大小',
name: 'fontTextSize',
required: false,
placeholder: '',
value: 15,
},
/* {
type: 'vue-color',
label: '文字颜色',
name: 'fontTextColor',
required: false,
placeholder: '',
value: '#D4EEFF'
},*/
{
type: 'el-select',
label: '文字粗细',
name: 'fontTextWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '字体风格',
name: 'fontTextStyle',
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
{
type: 'el-switch',
label: '数值显示',
name: 'isShowFontData',
required: false,
placeholder: '',
value: true,
},
{
type: 'el-input-number',
label: '数值大小',
name: 'fontDataSize',
required: false,
placeholder: '',
value: 15,
},
/*{
type: 'vue-color',
label: '数值颜色',
name: 'fontDataColor',
required: false,
placeholder: '',
value: '#D4EEFF'
},*/
{
type: 'el-select',
label: '数值粗细',
name: 'fontDataWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-select',
label: '字体风格',
name: 'fontDataStyle',
required: false,
placeholder: '',
selectOptions: [
{ code: 'normal', name: '正常' },
{ code: 'italic', name: 'italic斜体' },
{ code: 'oblique', name: 'oblique斜体' },
],
value: 'normal'
},
],
},
{
name: '提示语设置',
list: [
{
type: 'el-input-number',
label: '字体字号',
name: 'tipsFontSize',
required: false,
placeholder: '',
value: 16
},
{
type: 'vue-color',
label: '字体颜色',
name: 'tipsColor',
required: false,
placeholder: '',
value: '#00FEFF'
},
],
},
{
name: '自定义配色',
list: [
{
type: 'customColor',
label: '',
name: 'customColor',
required: false,
value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
},
],
},
],
],
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 600000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{name: "北京仓库", latitude: 116.4073, longitude: 39.9041, value: 70,},
{name: "天津仓库", latitude: 117.2015, longitude: 39.0853, value: 20,},
{name: "上海仓库", latitude: 121.4648, longitude: 31.2891, value: 150,},
{name: "重庆仓库", latitude: 107.7539, longitude: 30.1904, value: 75,},
{name: "河南仓库", latitude: 113.753, longitude: 34.767, value: 83,},
{name: "云南仓库", latitude: 102.7093, longitude: 25.0464, value: 50,},
{name: "安徽仓库", latitude: 117.3301, longitude: 31.7345, value: 36,},
{name: "山东仓库", latitude: 117.0207, longitude: 36.6702, value: 39,},
{name: "江西仓库", latitude: 115.8165, longitude: 28.6372, value: 23,},
{name: "青海仓库", latitude: 101.7804, longitude: 36.6225, value: 27,},
{name: "四川仓库", latitude: 104.0764, longitude: 30.6516, value: 46,},
{name: "海南仓库", latitude: 110.3487, longitude: 20.0186, value: 16,},
{name: "西藏仓库", latitude: 91.1174, longitude: 29.6486, value: 31,},
{name: "宁夏仓库", latitude: 106.2588, longitude: 38.4722, value: 47,},
{name: "新疆仓库", latitude: 87.6285, longitude: 43.7933, value: 42,},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'MAP_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 600,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 400,
},
]
}
}

2
report-ui/src/views/bigscreenDesigner/designer/tools/main.js
Unescape Escape View File

@ -47,6 +47,7 @@ import {widgetBarDoubleYaxis} from "./configure/barCharts/widget-bar-double-yaxi
import {widgetBorder} from "./configure/styleWidget/widget-border"; import {widgetBorder} from "./configure/styleWidget/widget-border";
import {widgetDecorateFlowLine} from "./configure/styleWidget/widget-decorate-flow-line"; import {widgetDecorateFlowLine} from "./configure/styleWidget/widget-decorate-flow-line";
import {widgetDecoration} from "./configure/styleWidget/widget-decoration"; import {widgetDecoration} from "./configure/styleWidget/widget-decoration";
import {widgetBarMap} from "./configure/mapCharts/widget-bar-map";
export const widgetTool = [ export const widgetTool = [
// type=html类型的组件 // type=html类型的组件
@ -90,4 +91,5 @@ export const widgetTool = [
// widgetInput, // widgetInput,
widgetFormTime, widgetFormTime,
widgetBarDoubleYaxis, widgetBarDoubleYaxis,
widgetBarMap
] ]

850
report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue
Unescape Escape View File

@ -0,0 +1,850 @@
<template>
<div :style="styleObj">
<v-chart ref="myVChart" :options="options" autoresize/>
</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
import "../../../../../../node_modules/echarts/map/js/china.js";
import {conversionProvince} from "@/utils/china";
import echarts from "echarts";
let geoCoordMap = conversionProvince;
let data = [
{
name: "北京市",
value: 70,
},
{
name: "天津市",
value: 20,
},
{
name: "上海市",
value: 150,
},
{
name: "重庆市",
value: 75,
},
{
name: "河北省",
value: 40,
},
{
name: "河南省",
value: 83,
},
{
name: "云南省",
value: 50,
},
{
name: "辽宁省",
value: 49,
},
{
name: "黑龙江省",
value: 25,
},
{
name: "湖南省",
value: 69,
},
{
name: "安徽省",
value: 36,
},
{
name: "山东省",
value: 39,
},
{
name: "新疆维吾尔自治区",
value: 42,
},
{
name: "江苏省",
value: 42,
},
{
name: "浙江省",
value: 56,
},
{
name: "江西省",
value: 23,
},
{
name: "湖北省",
value: 98,
},
{
name: "广西壮族自治区",
value: 33,
},
{
name: "宁夏回族自治区",
value: 47,
},
{
name: "山西省",
value: 18,
},
{
name: "内蒙古自治区",
value: 57,
},
{
name: "陕西省",
value: 22,
},
{
name: "吉林省",
value: 44,
},
{
name: "福建省",
value: 36,
},
{
name: "贵州省",
value: 39,
},
{
name: "广东省",
value: 96,
},
{
name: "青海省",
value: 27,
},
{
name: "西藏自治区",
value: 31,
},
{
name: "四川省",
value: 46,
}
];
let convertData = function (data) {
let res = [];
for (let i = 0; i < data.length; i++) {
let geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
export default {
name: "widgetBarMap",
props: {
value: Object,
ispreview: Boolean,
},
data() {
return {
options: {
title: {
show: true,
},
//backgroundColor: '#131C38',
tooltip: {
trigger: 'item',
show: true,
enterable: true,
textStyle: {
fontSize: 20,
color: '#fff'
},
backgroundColor: 'rgba(0,2,89,0.8)',
formatter: function (params, ticket, callback) {
if (params.seriesType == "scatter") {
return params.data.name + "" + params.data.value[2];
} else {
return params.name;
}
},
},
geo: [
{
map: "china",
show: true,
roam: false,
layoutSize: "80%",
label: {
emphasis: {
show: true,
color: "white",
},
},
itemStyle: {
normal: {
borderColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00F6FF",
},
{
offset: 1,
color: "#53D9FF",
},
],
false
),
borderWidth: 3,
shadowColor: "rgba(10,76,139,1)",
shadowOffsetY: 0,
shadowBlur: 60,
},
},
}
],
series: [
{
aspectScale: 0.75,
type: 'map',
map: 'china',
roam: true,
effect: {
show: false,
period: 6,
trailLength: 0.7,
color: "#fff",
symbolSize: 3,
},
label: {
normal: {
//调整数值
position: "right",
// 地图省市区显隐
show: false,
color: "#53D9FF",
fontSize: 20,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
//地图块颜色
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0% 处的颜色
},
{
offset: 1,
color: "#061E3D", // 100% 处的颜色
},
],
},
borderColor: "#215495",
borderWidth: 1,
},
//鼠标放置颜色加深
emphasis: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0% 处的颜色
},
{
offset: 1,
color: "#2B91B7", // 100% 处的颜色
},
],
},
},
},
data: data
},
// 柱状体的主干
{
type: 'lines',
zlevel: 1,
effect: {
show: false,
symbolSize: 5 // 图标大小
},
lineStyle: {
width: 20, // 尾迹线条宽度
color: 'rgb(22,255,255, .6)',
opacity: 1, // 尾迹线条透明度
curveness: 0 // 尾迹线条曲直度
},
silent: true,
data: this.lineData(data)
},
// 柱状体的顶部
{
type: 'scatter',
coordinateSystem: 'geo',
//geoIndex: 0,
zlevel: 1,
rippleEffect: {
brushType: "stroke",
},
label: {
show: true,
formatter: function (params) {
return "{cnNum|" + params.data[2] + "}";
},
rich: {
cnNum: {
// 数值字号
fontSize: 13,
color: "#D4EEFF",
},
},
position: "top"
},
symbol: 'circle',
symbolSize: [20, 10],
itemStyle: {
color: 'rgb(22,255,255, 1)',
opacity: 1
},
silent: true,
data: this.scatterData(data)
},
// 柱状体的底部
{
type: 'scatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: "stroke",
},
//geoIndex: 0,
zlevel: 1,
label: {
// 这儿是处理的
formatter: '{b}',
position: 'bottom',
color: '#fff',
fontSize: 12,
distance: 10,
show: true
},
symbol: 'circle',
symbolSize: [20, 10],
itemStyle: {
// color: '#F7AF21',
color: 'rgb(22,255,255, 1)',
opacity: 1
},
silent: true,
data: this.scatterData2(data)
},
// 底部外框
{
type: 'scatter',
coordinateSystem: 'geo',
//geoIndex: 0,
rippleEffect: {
brushType: "stroke",
},
zlevel: 1,
label: {
show: false
},
symbol: 'circle',
symbolSize: [40, 20],
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'rgb(22,255,255, 0)' // 0% 处的颜色
},
{
offset: .75, color: 'rgb(22,255,255, 0)' // 100% 处的颜色
},
{
offset: .751, color: 'rgb(22,255,255, 1)' // 100% 处的颜色
},
{
offset: 1, color: 'rgb(22,255,255, 1)' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
opacity: 1
},
silent: true,
data: convertData(data)
}
]
},
optionsStyle: {}, // 样式
optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性
optionsSetup: {},
flagInter: null,
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background,
};
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsCollapse = val.setup;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true,
},
},
mounted() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup;
this.editorOptions();
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
// 修改图标options属性
editorOptions() {
this.setOptionsTitle();
this.setOptionsMap();
this.setOptionsTooltip();
this.setOptionsData();
},
// 标题设置
setOptionsTitle() {
const optionsSetup = this.optionsSetup;
const title = {};
title.text = optionsSetup.titleText;
title.show = optionsSetup.isNoTitle;
title.left = optionsSetup.textAlign;
title.textStyle = {
color: optionsSetup.textColor,
fontSize: optionsSetup.textFontSize,
fontWeight: optionsSetup.textFontWeight,
fontStyle: optionsSetup.textFontStyle,
};
title.subtext = optionsSetup.subText;
title.subtextStyle = {
color: optionsSetup.subTextColor,
fontWeight: optionsSetup.subTextFontWeight,
fontSize: optionsSetup.subTextFontSize,
fontStyle: optionsSetup.subTextFontStyle,
};
this.options.title = title;
},
// 地图设置
setOptionsMap() {
const optionsSetup = this.optionsSetup;
const label = {
normal: {
//调整数值
position: "right",
// 地图省市区显隐
show: optionsSetup.isShowMap,
color: optionsSetup.colorMap,
fontSize: optionsSetup.fontSizeMap,
},
emphasis: {
show: true,
},
}
const itemStyle = {
normal: {
//地图块颜色
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: optionsSetup.font0PreColor, // 0% 处的颜色
},
{
offset: 1,
color: optionsSetup.font100PreColor, // 100% 处的颜色
},
],
},
borderColor: optionsSetup.borderColor,
borderWidth: 1,
},
//鼠标放置颜色加深
emphasis: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0% 处的颜色
},
{
offset: 1,
color: optionsSetup.fontHighlightColor, // 100% 处的颜色
},
],
},
},
}
this.options.series[0]['label'] = label;
this.options.series[0]['itemStyle'] = itemStyle;
},
// 柱形设置
setOptionsBarTrunk() {
const optionsSetup = this.optionsSetup;
const lineStyle = {
width: optionsSetup.barWidth,
color: optionsSetup.barColor,
opacity: 1, // 尾迹线条透明度
curveness: 0 // 尾迹线条曲直度
}
this.options.series[1]['lineStyle'] = lineStyle;
},
setOptionsBarTop() {
const optionsSetup = this.optionsSetup;
// this.options.series[2]['symbolSize'] = [optionsSetup.barWidth, 10];
},
setOptionsBarBottom() {
const optionsSetup = this.optionsSetup;
/* const label = {
// 这儿是处理的
show: optionsSetup.isShowFontText,
formatter: '{b}',
position: 'bottom',
fontSize: optionsSetup.fontTextSize,
color: optionsSetup.fontTextColor,
fontWeight: optionsSetup.fontTextWeight,
fontStyle: optionsSetup.fontTextStyle,
distance: 10,
};
this.options.series[3]['label'] = label;*/
//this.options.series[3]['symbolSize'] = [optionsSetup.barWidth, 10];
},
setOptionsBarBottomOut() {
const optionsSetup = this.optionsSetup;
// this.options.series[4]['symbolSize'] = [optionsSetup.barBottomOutSymbolSize, 10];
const itemStyle = {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'rgba(22,255,255, 0)' // 0% 处的颜色
},
{
offset: .75, color: 'rgba(22,255,255, 0)' // 100% 处的颜色
},
{
offset: .751, color: optionsSetup.barBottomOutColor // 100% 处的颜色
},
{
offset: 1, color: optionsSetup.barBottomOutColor // 100% 处的颜色
}
],
global: false // 缺省为 false
},
opacity: 1
};
this.options.series[4]['itemStyle'] = itemStyle;
},
// 计算柱图的高度比例
lineMaxHeight(val, heightRate) {
const maxValue = Math.max.apply(null, val.map(item => item.value))
return heightRate / maxValue;
},
// 柱体的主干
lineData(val, heightRate) {
return val.map((item) => {
return {
coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(val, heightRate)]]
}
})
},
// 柱体顶部
scatterData(val, heightRate) {
return val.map((item) => {
return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(val, heightRate), item.value]
})
},
// 柱体的底部
scatterData2(val) {
return val.map((item) => {
return {
name: item.name,
value: geoCoordMap[item.name]
}
})
},
// 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;
},
//数据解析
setOptionsData(e, paramsConfig) {
const optionsData = this.optionsData; // 数据类型 静态 or 动态
// 联动接收者逻辑开始
optionsData.dynamicData = optionsData.dynamicData || {}; // 兼容 dynamicData undefined
const myDynamicData = optionsData.dynamicData;
clearInterval(this.flagInter); // 不管咋，先干掉上一次的定时任务，避免多跑
if (
e &&
optionsData.dataType !== "staticData" &&
Object.keys(myDynamicData.contextData).length
) {
const keyArr = Object.keys(myDynamicData.contextData);
paramsConfig.forEach((conf) => {
if (keyArr.includes(conf.targetKey)) {
myDynamicData.contextData[conf.targetKey] = e[conf.originKey];
}
});
}
// 联动接收者逻辑结束
optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(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;
}
// console.log(Object.keys(val[0]))
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 heightRate = optionsSetup.heightRate;
// 颜色设置
const customColor = optionsSetup.customColor;
if (!customColor) return;
const arrColor = [];
for (const i in val) {
arrColor.push(customColor[i % customColor.length].color)
}
const itemStyle = {
color: (params) => {
//console.log(params)
return arrColor[params.dataIndex];
},
opacity: 1,
};
const lineStyle = {
width: optionsSetup.barWidth,
color: (params) => {
//console.log(params)
return arrColor[params.dataIndex];
},
opacity: 1, // 尾迹线条透明度
curveness: 0 // 尾迹线条曲直度
}
const labelTop = {
show: optionsSetup.isShowFontData,
formatter: function (params) {
return "{cnNum|" + params.data[2] + "}";
},
rich: {
cnNum: {
// 数值字号
fontSize: optionsSetup.fontDataSize,
color: (params) => {
return arrColor[params.dataIndex];
},
fontWeight: optionsSetup.fontDataWeight,
fontStyle: optionsSetup.fontDataStyle,
},
},
position: "top"
};
const labelBottom = {
// 这儿是处理的
show: optionsSetup.isShowFontText,
formatter: '{b}',
position: 'bottom',
fontSize: optionsSetup.fontTextSize,
color: (params) => {
return arrColor[params.dataIndex];
},
fontWeight: optionsSetup.fontTextWeight,
fontStyle: optionsSetup.fontTextStyle,
distance: 10,
};
// 渐变
const itemStyle4 = {
color: (params) => {
return {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'rgba(22,255,255, 0)' // 0% 处的颜色
},
{
offset: .75, color: 'rgba(22,255,255, 0)' // 100% 处的颜色
},
{
offset: .751, color: arrColor[params.dataIndex] // 100% 处的颜色
},
{
offset: 1, color: arrColor[params.dataIndex] // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
opacity: 1,
}
this.options.series[1]['lineStyle'] = lineStyle;
this.options.series[1].data = this.lineData(allData, heightRate);
this.options.series[2]['symbolSize'] = [optionsSetup.barWidth, 10];
this.options.series[2]['itemStyle'] = itemStyle;
this.options.series[2]['label'] = labelTop;
this.options.series[2].data = this.scatterData(allData, heightRate);
this.options.series[3]['symbolSize'] = [optionsSetup.barWidth, 10];
this.options.series[3]['itemStyle'] = itemStyle;
this.options.series[3]['label'] = labelBottom;
this.options.series[3].data = convertData(allData);
this.options.series[4]['symbolSize'] = [optionsSetup.barBottomOutSymbolSize, 10];
this.options.series[4]['itemStyle'] = itemStyle4;
console.log(this.options)
this.options.series[4].data = convertData(allData);
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
if (this.ispreview) {
this.getEchartData(val);
this.flagInter = setInterval(() => {
this.getEchartData(val);
}, refreshTime);
} else {
this.getEchartData(val);
}
},
getEchartData(val) {
const data = this.queryEchartsData(val);
data.then((res) => {
this.renderingFn(res);
});
},
renderingFn(val) {
this.options.series[0]["data"] = val;
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;
},
},
};
</script>
<style lang="scss" scoped>
.echartMap {
width: 100%;
height: 100%;
}
.echarts {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

2
report-ui/src/views/bigscreenDesigner/designer/widget/temp.vue
Unescape Escape View File

@ -49,6 +49,7 @@ import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue"; import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue";
import widgetDecoration from "./styleWidget/widgetDecoration.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue";
import widgetBarMap from "./map/widgetBarMap.vue";
export default { export default {
name: "WidgetTemp", name: "WidgetTemp",
@ -92,6 +93,7 @@ export default {
//widgetInput, //widgetInput,
widgetFormTime, widgetFormTime,
widgetBarDoubleYaxisChart, widgetBarDoubleYaxisChart,
widgetBarMap
}, },
model: { model: {
prop: "value", prop: "value",

2
report-ui/src/views/bigscreenDesigner/designer/widget/widget.vue
Unescape Escape View File

@ -56,6 +56,7 @@ import widgetBarDoubleYaxisChart from "./bar/widgetBarDoubleYaxisChart.vue";
import widgetBorder from "./styleWidget/widgetBorder.vue"; import widgetBorder from "./styleWidget/widgetBorder.vue";
import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue"; import widgetDecorateFlowLine from "./styleWidget/widgetDecorateFlowLine.vue";
import widgetDecoration from "./styleWidget/widgetDecoration.vue"; import widgetDecoration from "./styleWidget/widgetDecoration.vue";
import widgetBarMap from "./map/widgetBarMap.vue";
export default { export default {
name: "Widget", name: "Widget",
@ -99,6 +100,7 @@ export default {
//widgetInput, //widgetInput,
widgetFormTime, widgetFormTime,
widgetBarDoubleYaxisChart, widgetBarDoubleYaxisChart,
widgetBarMap
}, },
model: { model: {
prop: "value", prop: "value",

Write Preview
Loading…
Cancel
Save