软件工程应用于实践：AJ-Report项目源码分析（7）

2021SC@SDUSC

本次分析的是report-ui\src\views\report\bigscreen\designer\map中的代码

series: [{type: 'map',map: 'china',aspectScale: 0.75,label: {normal: {position: 'right',show: true,color: '#53D9FF',fontSize: 20},emphasis: {show: true,},},itemStyle: {normal: {areaColor: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#073684' }, {offset: 1,color: '#061E3D' }],},borderColor: '#215495',borderWidth: 1,},emphasis: {areaColor: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#073684' }, {offset: 1,color: '#2B91B7' }],},}},data: data,},{type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {brushType: 'stroke'},showEffectOn: 'render',itemStyle: {normal: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: 'rgba(5,80,151,0.2)'}, {offset: 0.8,color: 'rgba(5,80,151,0.8)'}, {offset: 1,color: 'rgba(0,108,255,0.7)'}],global: false},}},label: {normal: {show: true,color: '#fff',fontWeight: 'bold',position: 'inside',formatter: function (para) {return '{cnNum|' + para.data.value[2] + '}'},rich: {cnNum: {fontSize: 13,color: '#D4EEFF',}}},},symbol: 'circle',symbolSize: function (val) {if (val[2] == 0) {return 0;};return ((maxSize4Pin - minSize4Pin) / (max - min)) * val[2] + (maxSize4Pin - ((maxSize4Pin - minSize4Pin) / (max - min)) * max) * 1.2;},data: convertData(data),zlevel: 1,}]},optionsStyle: {}, optionsData: {}, optionsCollapse: {}, optionsSetup: {}}},

先调整数值，设置了地图块颜色（设置了0%处的颜色和100%处的颜色，然后渐变）。鼠标放置颜色加深，接下来设置了样式、数据和图标属性，接下来数据解析的设置中定义了静态或动态数据类型。

接下来是report-ui\src\views\report\bigscreen\designer\widget\pie中的代码。

 data() {return {options: {legend: {top: "bottom"},toolbox: {show: true,feature: {mark: { show: true }}},series: [{type: "pie",radius: ["10%", "50%"],center: ["50%", "50%"],roseType: "area",itemStyle: {borderRadius: 8},data: []}]},optionsStyle: {}, optionsData: {}, optionsCollapse: {},optionsSetup: {}};},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};}},watch: {value: {handler(val) {console.log(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();},methods: {editorOptions() {this.setOptionsTitle();this.setOptionsValue();this.setOptionsTooltip();this.setOptionsLegend();this.setOptionsColor();this.setOptionsData();this.setOptionsRosetype();},setOptionsRosetype() {this.options.series[0]["roseType"] = this.optionsSetup.nightingleRosetype;},setOptionsTitle() {const optionsCollapse = this.optionsSetup;const title = {};title.text = optionsCollapse.titleText;title.show = optionsCollapse.isNoTitle;title.left = optionsCollapse.textAlign;title.textStyle = {color: optionsCollapse.textColor,fontSize: optionsCollapse.textFontSize,fontWeight: optionsCollapse.textFontWeight};title.subtext = optionsCollapse.subText;title.subtextStyle = {color: optionsCollapse.subTextColor,fontWeight: optionsCollapse.subTextFontWeight,fontSize: optionsCollapse.subTextFontSize};this.options.title = title;},setOptionsValue() {const optionsCollapse = this.optionsSetup;const series = this.options.series;const numberValue = optionsCollapse.numberValue ? "{c}" : "";const percentage = optionsCollapse.percentage ? "({d})%" : "";const label = {show: optionsCollapse.isShow,formatter: `{a|{b}：${numberValue} ${percentage}}`,rich: {a: {padding: [-30, 15, -20, 15],color: optionsCollapse.subTextColor,fontSize: optionsCollapse.fontSize,fontWeight: optionsCollapse.fontWeight}},fontSize: optionsCollapse.fontSize,fontWeight: optionsCollapse.optionsCollapse};for (const key in series) {if (series[key].type == "pie") {series[key].label = label;series[key].labelLine = { show: optionsCollapse.isShow };}}},setOptionsTooltip() {const optionsCollapse = this.optionsSetup;const tooltip = {trigger: "item",show: true,textStyle: {color: optionsCollapse.lineColor,fontSize: optionsCollapse.fontSize}};this.options.tooltip = tooltip;},setOptionsMargin() {const optionsCollapse = this.optionsSetup;const grid = {left: optionsCollapse.marginLeft,right: optionsCollapse.marginRight,bottom: optionsCollapse.marginBottom,top: optionsCollapse.marginTop,containLabel: true};this.options.grid = grid;},setOptionsLegend() {const optionsCollapse = this.optionsSetup;const legend = this.options.legend;legend.show = optionsCollapse.isShowLegend;legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";legend.bottom =optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";legend.orient = optionsCollapse.layoutFront;legend.textStyle = {color: optionsCollapse.lengedColor,fontSize: optionsCollapse.fontSize};legend.itemWidth = optionsCollapse.lengedWidth;},setOptionsColor() {const optionsCollapse = this.optionsSetup;const customColor = optionsCollapse.customColor;if (!customColor) return;const arrColor = [];for (let i = 0; i < customColor.length; i++) {arrColor.push(customColor[i].color);}this.options.color = arrColor;this.options = Object.assign({}, this.options);},

其中用到的南丁格尔玫瑰图面积模式参考：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType-simple。

进行了样式、数据和图标属性的设置。接下来实现了一些功能，有修改图标options属性、饼图模式面积模式"area" 半径模式"radius"、标题修改、数值设定、tooltip设置、边距设置、图例操作 legend和图例颜色修改。

软件工程应用于实践：AJ-Report项目源码分析（7）相关推荐

软件工程应用于实践：AJ-Report项目源码分析（8）
2021SC@SDUSC 本次分析的是report-ui\src\views\report\excelreport\designer处的代码 data () {return {activeName: ...
ASP.NET 3.5 新特性开发向导实践（附项目源码下载）
ASP.NET 3.5 新特性开发向导实践(附项目源码下载) 本篇文章将演示ASP.NET 3.5 部分新功能.新特性,包括LINQ.ListView控件.LinqDataSource.DataPag ...
开源项目源码分析（Kickstarter-iOS ）（一）
开源项目源码分析(Kickstarter-iOS )(一) 1.Kickstarter开源项目简介 2. Kickstarter项目结构 2.1 Makefile 文件 2.2 Git submodu ...
bilibili go项目源码分析
go 项目源码约329个Go服务, 历史约170人左右贡献过Go代码. 代码和目录规范性比较好, 代码生成工具建设比较好, 大家可以借鉴一下. 对于一个Golang开发者来说, 入职B站, 我觉得大 ...
Phenotips 项目源码分析 [0]
PhenoTips™ is a software tool for collecting and analyzing phenotypic information for patients with ...
Unity huatuo示例项目源码分析与启发
上一节我们安装huatuo的开发环境,然后运行示例项目,体验了huatuo做热更新,这节课我们来分析示例项目的源码,掌握huatuo做热更新的主要的步骤,让你自己的项目很好的基于huatuo来组织热更 ...
基于android系统的单词学习软件设计与开发【附项目源码+论文说明】分享
基于android系统的单词学习软件设计与开发演示摘要随着手机使用的普及,人们获取与保存信息的方式已经发生了激动人心的转变.智能手机正在逐步融入我们的生活,并影响和改变着我们的生活.由于现在各种智 ...
山东大学2019级软件工程应用与实践——基于人工智能的多肽药物分析问题（七）
2021SC@SDUSC 基于人工智能的多肽药物分析问题主题:蛋白质预训练模型学习论文: <ProtTrans: Towards Cracking the Language of Life' ...
frostwire项目源码分析
Frostwire代码分析 Frostwire是一个基于其他许多优秀开源项目开发的一款文件分享软件.它的前身是LimeWire Gnutella客户端:但是已经有了很大的变动. 现在FrostWire ...

软件工程应用于实践：AJ-Report项目源码分析（7）

软件工程应用于实践：AJ-Report项目源码分析（7）相关推荐

最新文章

热门文章

软件工程应用于实践：AJ-Report项目 源码分析（7）

软件工程应用于实践：AJ-Report项目 源码分析（7）相关推荐

最新文章

热门文章

软件工程应用于实践：AJ-Report项目源码分析（7）

软件工程应用于实践：AJ-Report项目源码分析（7）相关推荐