diff --git a/report-ui/src/assets/iconfont2/demo_index.html b/report-ui/src/assets/iconfont2/demo_index.html index 0529acc3..e84c8e11 100644 --- a/report-ui/src/assets/iconfont2/demo_index.html +++ b/report-ui/src/assets/iconfont2/demo_index.html @@ -55,15 +55,9 @@ @@ -84,9 +78,9 @@
@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1702535676905') format('woff2'),
-       url('iconfont.woff?t=1702535676905') format('woff'),
-       url('iconfont.ttf?t=1702535676905') format('truetype');
+  src: url('iconfont.woff2?t=1702540060096') format('woff2'),
+       url('iconfont.woff?t=1702540060096') format('woff'),
+       url('iconfont.ttf?t=1702540060096') format('truetype');
 }
 

第二步:定义使用 iconfont 的样式

@@ -113,20 +107,11 @@ diff --git a/report-ui/src/assets/iconfont2/iconfont.css b/report-ui/src/assets/iconfont2/iconfont.css index b5982258..d03dce7c 100644 --- a/report-ui/src/assets/iconfont2/iconfont.css +++ b/report-ui/src/assets/iconfont2/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 4369261 */ - src: url('iconfont.woff2?t=1702535676905') format('woff2'), - url('iconfont.woff?t=1702535676905') format('woff'), - url('iconfont.ttf?t=1702535676905') format('truetype'); + src: url('iconfont.woff2?t=1702540060096') format('woff2'), + url('iconfont.woff?t=1702540060096') format('woff'), + url('iconfont.ttf?t=1702540060096') format('truetype'); } .iconfont { @@ -13,11 +13,7 @@ -moz-osx-font-smoothing: grayscale; } -.icon-03:before { - content: "\e60e"; -} - -.icon-ditu:before { - content: "\e884"; +.icon-ditu1:before { + content: "\e627"; } diff --git a/report-ui/src/assets/iconfont2/iconfont.js b/report-ui/src/assets/iconfont2/iconfont.js index 2b68a01d..ae35c037 100644 --- a/report-ui/src/assets/iconfont2/iconfont.js +++ b/report-ui/src/assets/iconfont2/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_4369261='',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,l,c,d,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4369261,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(l=i,c=n.document,d=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,s())})}function s(){d||(d=!0,l())}function r(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}}(window); \ No newline at end of file +window._iconfont_svg_string_4369261='',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,o,c,a,d,s=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4369261,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?s(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),i()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(c=i,a=n.document,d=!1,r(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,l())})}function l(){d||(d=!0,c())}function r(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window); \ No newline at end of file diff --git a/report-ui/src/assets/iconfont2/iconfont.json b/report-ui/src/assets/iconfont2/iconfont.json index b4aa628e..d3bae0e3 100644 --- a/report-ui/src/assets/iconfont2/iconfont.json +++ b/report-ui/src/assets/iconfont2/iconfont.json @@ -6,18 +6,11 @@ "description": "", "glyphs": [ { - "icon_id": "1236837", + "icon_id": "7463933", "name": "地图", - "font_class": "03", - "unicode": "e60e", - "unicode_decimal": 58894 - }, - { - "icon_id": "2076231", - "name": "地图", - "font_class": "ditu", - "unicode": "e884", - "unicode_decimal": 59524 + "font_class": "ditu1", + "unicode": "e627", + "unicode_decimal": 58919 } ] } diff --git a/report-ui/src/assets/iconfont2/iconfont.ttf b/report-ui/src/assets/iconfont2/iconfont.ttf index e29b83f9..c584be24 100644 Binary files a/report-ui/src/assets/iconfont2/iconfont.ttf and b/report-ui/src/assets/iconfont2/iconfont.ttf differ diff --git a/report-ui/src/assets/iconfont2/iconfont.woff b/report-ui/src/assets/iconfont2/iconfont.woff index 6cc82b1a..3013a52e 100644 Binary files a/report-ui/src/assets/iconfont2/iconfont.woff and b/report-ui/src/assets/iconfont2/iconfont.woff differ diff --git a/report-ui/src/assets/iconfont2/iconfont.woff2 b/report-ui/src/assets/iconfont2/iconfont.woff2 index ff47d474..fc3a82f0 100644 Binary files a/report-ui/src/assets/iconfont2/iconfont.woff2 and b/report-ui/src/assets/iconfont2/iconfont.woff2 differ 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 172b6d4b..4f729058 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 @@ -3,7 +3,7 @@ export const widgetBarMap = { type: 'mapChart', tabName: '地图', label: '柱形地图', - icon: 'iconzhongguoditu', + icon: 'icon-ditu1', options: { // 配置 setup: [ @@ -30,42 +30,42 @@ export const widgetBarMap = { required: false, placeholder: '', selectOptions: [ - { code: 'world', name: '世界' }, - { code: 'china', name: '中国' }, - { code: '安徽', name: '安徽' }, - { code: '澳门', name: '澳门' }, - { code: '北京', name: '北京' }, - { code: '重庆', name: '重庆' }, - { code: '福建', name: '福建' }, - { code: '甘肃', name: '甘肃' }, - { code: '广东', name: '广东' }, - { code: '广西', name: '广西' }, - { code: '贵州', name: '贵州' }, - { code: '海南', name: '海南' }, - { code: '河北', name: '河北' }, - { code: '黑龙江', name: '黑龙江' }, - { code: '河南', name: '河南' }, - { code: '湖北', name: '湖北' }, - { code: '湖南', name: '湖南' }, - { code: '江苏', name: '江苏' }, - { code: '江西', name: '江西' }, - { code: '吉林', name: '吉林' }, - { code: '辽宁', name: '辽宁' }, - { code: '内蒙古', name: '内蒙古' }, - { code: '宁夏', name: '宁夏' }, - { code: '青海', name: '青海' }, - { code: '山东', name: '山东' }, - { code: '上海', name: '上海' }, - { code: '山西', name: '山西' }, - { code: '陕西', name: '陕西' }, - { code: '四川', name: '四川' }, - { code: '台湾', name: '台湾' }, - { code: '天津', name: '天津' }, - { code: '香港', name: '香港' }, - { code: '新疆', name: '新疆' }, - { code: '西藏', name: '西藏' }, - { code: '云南', name: '云南' }, - { code: '浙江', name: '浙江' }, + {code: 'world', name: '世界'}, + {code: 'china', name: '中国'}, + {code: '安徽', name: '安徽'}, + {code: '澳门', name: '澳门'}, + {code: '北京', name: '北京'}, + {code: '重庆', name: '重庆'}, + {code: '福建', name: '福建'}, + {code: '甘肃', name: '甘肃'}, + {code: '广东', name: '广东'}, + {code: '广西', name: '广西'}, + {code: '贵州', name: '贵州'}, + {code: '海南', name: '海南'}, + {code: '河北', name: '河北'}, + {code: '黑龙江', name: '黑龙江'}, + {code: '河南', name: '河南'}, + {code: '湖北', name: '湖北'}, + {code: '湖南', name: '湖南'}, + {code: '江苏', name: '江苏'}, + {code: '江西', name: '江西'}, + {code: '吉林', name: '吉林'}, + {code: '辽宁', name: '辽宁'}, + {code: '内蒙古', name: '内蒙古'}, + {code: '宁夏', name: '宁夏'}, + {code: '青海', name: '青海'}, + {code: '山东', name: '山东'}, + {code: '上海', name: '上海'}, + {code: '山西', name: '山西'}, + {code: '陕西', name: '陕西'}, + {code: '四川', name: '四川'}, + {code: '台湾', name: '台湾'}, + {code: '天津', name: '天津'}, + {code: '香港', name: '香港'}, + {code: '新疆', name: '新疆'}, + {code: '西藏', name: '西藏'}, + {code: '云南', name: '云南'}, + {code: '浙江', name: '浙江'}, ], value: 'china' }, @@ -276,10 +276,10 @@ export const widgetBarMap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'bold', name: '粗体' }, - { code: 'bolder', name: '特粗体' }, - { code: 'lighter', name: '细体' } + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} ], value: 'normal' }, @@ -310,6 +310,22 @@ export const widgetBarMap = { ], value: 'sans-serif' }, + { + type: 'vue-color', + label: '0%渐变色', + name: 'fontColor0', + required: false, + placeholder: '', + value: '#073684' + }, + { + type: 'vue-color', + label: '100%渐变色', + name: 'fontColor100', + required: false, + placeholder: '', + value: '#061E3D' + }, { type: 'el-input-number', label: '边界线宽度', @@ -326,6 +342,129 @@ export const widgetBarMap = { placeholder: '', value: '#fff' }, + { + type: 'el-select', + label: '边界线类型', + name: 'borderType', + required: false, + placeholder: '', + selectOptions: [ + {code: 'solid', name: '实线'}, + {code: 'dashed', name: '虚线'}, + {code: 'dotted', name: '斑点'}, + ], + value: 'solid' + }, + { + type: 'vue-color', + label: '阴影颜色', + name: 'shadowColor', + required: false, + placeholder: '', + value: 'rgba(10,76,139,1)' + }, + { + type: 'el-input-number', + label: '阴影模糊系数', + name: 'shadowBlur', + required: false, + placeholder: '', + value: 10 + }, + { + type: 'el-slider', + label: '透明度', + name: 'opacity', + required: false, + placeholder: '', + value: 100 + }, + ] + }, + { + name: '地图高亮设置', + list: [ + { + type: 'el-switch', + label: '文字显示', + name: 'isShowEmphasisLabel', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '文字大小', + name: 'emphasisLabelFontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'vue-color', + label: '文字颜色', + name: 'emphasisLabelFontColor', + required: false, + placeholder: '', + value: '#D4EEFF' + }, + { + type: 'el-select', + label: '文字粗细', + name: 'emphasisLabelFontWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + { + type: 'el-select', + label: '文字风格', + name: 'emphasisLabelFontStyle', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '文字字体', + name: 'emphasisLabelFontFamily', + required: false, + placeholder: '', + selectOptions: [ + {code: 'sans-serif', name: 'sans-serif'}, + {code: 'serif', name: 'serif'}, + {code: 'Arial', name: 'Arial'}, + {code: 'Courier New', name: 'Courier New'}, + ], + value: 'sans-serif' + }, + { + type: 'vue-color', + label: '0%渐变色', + name: 'emphasisLabelFontColor0', + required: false, + placeholder: '', + value: '#073684' + }, + { + type: 'vue-color', + label: '100%渐变色', + name: 'emphasisLabelFontColor100', + required: false, + placeholder: '', + value: 'rgba(199, 21, 133, 1)' + }, ] }, { @@ -397,9 +536,9 @@ export const widgetBarMap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, @@ -454,9 +593,9 @@ export const widgetBarMap = { required: false, placeholder: '', selectOptions: [ - { code: 'normal', name: '正常' }, - { code: 'italic', name: 'italic斜体' }, - { code: 'oblique', name: 'oblique斜体' }, + {code: 'normal', name: '正常'}, + {code: 'italic', name: 'italic斜体'}, + {code: 'oblique', name: 'oblique斜体'}, ], value: 'normal' }, @@ -476,105 +615,6 @@ export const widgetBarMap = { }, ], }, - { - 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' - }, - ], - }, - { - name: '提示语设置', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShowTooltip', - required: false, - placeholder: '', - value: true - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'tooltipFontSize', - required: false, - placeholder: '', - value: 16 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'tooltipColor', - required: false, - placeholder: '', - value: '#00FEFF' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'tooltipFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-select', - label: '字体风格', - name: 'tooltipFontStyle', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'italic', name: 'italic斜体'}, - {code: 'oblique', name: 'oblique斜体'}, - ], - value: 'normal' - }, - { - type: 'el-select', - label: '字体系列', - name: 'tooltipFontFamily', - required: false, - placeholder: '', - selectOptions: [ - {code: 'sans-serif', name: 'sans-serif'}, - {code: 'serif', name: 'serif'}, - {code: 'Arial', name: 'Arial'}, - {code: 'Courier New', name: 'Courier New'}, - ], - value: 'sans-serif' - }, - ], - }, { name: '自定义配色', list: [ @@ -583,7 +623,7 @@ export const widgetBarMap = { label: '', name: 'customColor', required: false, - value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }], + value: [{color: '#ff7f50'}, {color: '#87cefa'}, {color: '#da70d6'}, {color: '#32cd32'}, {color: '#6495ed'}], }, ], }, 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 b0f594b7..3f3384b1 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetBarMap.vue @@ -79,7 +79,7 @@ export default { geo: { map: "china", show: true, - roam: false, + roam: true, layoutSize: "80%", label: { emphasis: { @@ -114,75 +114,6 @@ export default { }, }, 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: [] - }, // 柱状体的主干 { type: 'lines', @@ -351,8 +282,6 @@ export default { editorOptions() { this.setOptionsTitle(); this.setOptionsGeo(); - this.setOptionsTooltip(); - this.setOptionsMap(); this.setOptionsData(); }, // 标题设置 @@ -382,40 +311,15 @@ export default { }; this.options.title = title; }, - // tooltip 设置 - setOptionsTooltip() { - const optionsSetup = this.optionsSetup; - const tooltip = { - trigger: "item", - show: optionsSetup.isShowTooltip, - textStyle: { - color: optionsSetup.tooltipColor, - fontSize: optionsSetup.tooltipFontSize, - fontWeight: optionsSetup.tooltipFontWeight, - fontStyle: optionsSetup.tooltipFontStyle, - fontFamily: optionsSetup.tooltipFontFamily, - }, - formatter: function (params) { - if (params.seriesType == 'scatter') { - return params.data.name + "" + params.data.value[2]; - } else { - return params.name; - } - }, - }; - this.options.tooltip = tooltip; - }, setOptionsGeo() { - this.options.geo['map'] = this.optionsSetup.mapName == '' ? "china" : this.optionsSetup.mapName; - this.options.series[0]['map'] = this.optionsSetup.mapName == '' ? "china" : this.optionsSetup.mapName; - }, - // 地图设置 - setOptionsMap() { const optionsSetup = this.optionsSetup; - const label = { - normal: { + const geo = { + map: this.optionsSetup.mapName == '' ? "china" : this.optionsSetup.mapName, + show: true, + roam: true, + layoutSize: "80%", + label: { //调整数值 - position: "right", // 地图省市区显隐 show: optionsSetup.isShowMap, color: optionsSetup.fontColor, @@ -424,54 +328,64 @@ export default { fontStyle: optionsSetup.fontStyle, fontFamily: optionsSetup.fontFamily, }, - emphasis: { - show: false, - }, - } - 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% 处的颜色 - }, - ], + itemStyle: { + normal: { + //地图块颜色 + areaColor: { + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: optionsSetup.fontColor0, // 0% 处的颜色 + }, + { + offset: 1, + color: optionsSetup.fontColor100, // 100% 处的颜色 + }, + ], + }, + borderType: optionsSetup.borderType, + borderColor: optionsSetup.borderColor, + borderWidth: optionsSetup.borderWidth, + shadowColor: optionsSetup.shadowColor, + shadowBlur: optionsSetup.shadowBlur, + opacity: optionsSetup.opacity / 100, }, - borderColor: optionsSetup.borderColor, - borderWidth: optionsSetup.borderWidth, }, //鼠标放置颜色加深 emphasis: { - areaColor: { - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [ - { - offset: 0, - color: "#073684", // 0% 处的颜色 - }, - { - offset: 1, - color: optionsSetup.fontHighlightColor, // 100% 处的颜色 - }, - ], + label: { + show: optionsSetup.isShowEmphasisLabel, + color: optionsSetup.emphasisLabelFontColor, + fontSize: optionsSetup.emphasisLabelFontSize, + fontWeight: optionsSetup.emphasisLabelFontWeight, + fontStyle: optionsSetup.emphasisLabelFontStyle, + fontFamily: optionsSetup.emphasisLabelFontFamily, + }, + itemStyle: { + areaColor: { + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: optionsSetup.emphasisLabelFontColor0, // 0% 处的颜色 + }, + { + offset: 1, + color: optionsSetup.emphasisLabelFontColor100, // 100% 处的颜色 + }, + ], + }, }, }, } - this.options.series[0]['label'] = label; - this.options.series[0]['itemStyle'] = itemStyle; + this.options.geo = geo; }, // 计算柱图的高度比例 calMaxHeight(val, heightRate) {