DataEase 项目源码解析
本文中项目是基于DateEase 1.18.0版本讲述及测试 ;DateEase官网
主要目录介绍
/
|—— public //静态/静态引入入目录
|—— |—— tinymce //富文本编辑器相关UI及文件
|—— |—— vendor // 公共类库抽离文件夹,主要用于打包过程,详见 webpack.dll.conf.js 和 vue.config.js,具体解释[点击查看](https://blog.csdn.net/u010361109/article/details/134143266)
|—— |—— |—— vendor-manifest.json 抽离后的映射文件
|—— |—— |—— vendor.dll.js 抽离后的JS文件
|—— src
| |—— api //接口目录
| |—— assets //vue静态资源
| |—— components //vue组件
| | |—— customComponent
| | | |—— UserView // 渲染模块
| |—— icons //SVG图标库
| |—— lang //语言包
| | |—— en.js //英文语言包
| | |—— tw.js //繁体语言包
| | |—— zh.js //中文语言包
| |—— layout //布局
| |—— router //路由
| |—— store //状态树
| |—— styles //样式表
| |—— utils //JS组件
| |—— views //VUE文件
| | |—— chart //“视图”VUE文件
| | | |—— chart // “视图” 逻辑、参数处理
| | | | |—— chart.js // 每个“视图” 默认参数包
| | | | |—— util.js // 每个“视图” 可视化配置权限及可选项配置
| | | | XXX //每个“视图” 对应的 逻辑处理包 ,例如 map文件下的 map3D.js 是“3D地图”的逻辑处理包
| | |—— components //“视图” 相关组件包
| | | |—— ChartComponent.vue // “视图” 核心渲染包
| | |—— view //“视图” 可视化配置相关渲染包
| | | |—— ChartEdit.vue // 可视化配置 入口 文件
| | | |—— ChartStyle.vue // 可视化配置 “样式” 入口文件
如何新增一个“视图”
1、以下图表是基于echarts 5.x版本 实现,其他版本参数及使用方式不同,请自行实现。
1、这里推荐一个网站( 点击进入)里面有很多别人写好的图表,可以拷贝别人写好的例子进行改造适配。
1、新增默认参数
在 src\views\chart\chart\chart.js 通过“export const”的形式 新增一个“视图” 默认配置,之后所有的修改都是在此基础上进行操作;
下面是“map3D”的例子,这个配置参数可以参考“echarts”官方网站
export const BASE_MAP3D = {
title: {
text: '',
textStyle: {
fontWeight: 'normal'
}
},
geo3D: [{
show: true,
zlevel: 1,
top: '-10%',
regionHeight: 0,
instancing: true,
environment: 'auto',
map: 'map3D',
itemStyle: {
opacity: 0,
borderWidth: 10,
borderColor: '#3DB4DC'
},
label: {
show: false,
},
emphasis: {
label: {
show: false
},
itemStyle: {
opacity: 0,
}
},
viewControl: {
projection: "perspective",
autoRotate: false,
damping: 0,
rotateSensitivity: 2, //旋转操作的灵敏度
rotateMouseButton: "left",
zoomSensitivity: 5, //缩放操作的灵敏度
panSensitivity: 0, //平移操作的灵敏度
alpha: 60, // 地图倾斜角度
distance: 120, //默认视角距离主体的距离
center: [0, 0, 0],
animation: true,
animationDurationUpdate: 1000,
animationEasingUpdate: "cubicInOut",
},
}],
tooltip: {},
series: [{
data: [],
type: 'map3D', // 3D地图
map: 'map3D', // registerMap的key
environment: 'auto', // 背景色
groundPlane: { // 显示地面
show: false,
},
regionHeight: 2, //地图高度
top: '-10%',
zlevel: 2,
instancing: true, // 合并geometry,提高效率
itemStyle: { // 图形的样式
color: '#0C3972',
borderWidth: 1,
opacity: 1,
borderColor: '#3DB4DC'
},
label: {
show: false,
textStyle: {
backgroundColor: "none",
borderColor: "none",
color: '#fff',
borderWidth: 0,
fontSize: 12,
opacity: 1,
},
formatter: (params) => { //标签格式化
return params.name
},
},
emphasis: { // 鼠标悬浮的样式
label: {
show: true,
formatter: (params) => {
return params.name
}
},
itemStyle: {
}
},
viewControl: {
projection: "perspective",
autoRotate: false,
damping: 0,
rotateSensitivity: 2, //旋转操作的灵敏度
rotateMouseButton: "left",
zoomSensitivity: 5, //缩放操作的灵敏度
panSensitivity: 1, //平移操作的灵敏度
alpha: 60, // 地图倾斜角度
distance: 120, //默认视角距离主体的距离
center: [0, 0, 0],
animation: true,
animationDurationUpdate: 1000,
animationEasingUpdate: "cubicInOut",
},
shading: 'lambert'
}]
}
2、新增权限参数(只有配置此项后在“视图选项时才可以出现并被选择”)
在src\views\chart\chart\util.js中找 “TYPE_CONFIGS”,在其中一个“视图”
下面是“map3D”为例子说明
示例代码
{
render: 'echarts', // “视图” 一级分类名目前仅支持“echarts” 和“antv”
category: 'chart.chart_type_space',// “视图” 二级分类名称,参数:“src\lang” 中语言包的字段
value: 'map3D',// “视图” 唯一标识,必须保证唯一,前后端使用该值进行业务操作及流转
title: 'chart.chart_map3D',// “视图” 名称,参数:“src\lang” 中语言包的字段
icon: 'map3D', // “视图” 预览图标文件名,文件对应存放在“src\icons”目录中,格式及存放标准请参数“[SvgIcon](https://www.codetd.com/article/15903553)”
properties: [ //可视化样式配置项第一级权限
'color-selector', // 颜色配置
'label-selector', // 标签配置
'tooltip-selector',// 提示配置
'title-selector' //标题配置
],
propertyInner: { // 可视化样式配置项第二级权限
'color-selector': [
'value',
'custom',
'area-border-width',
'area-border-color',
'area-base-color',
'area-base-color-hover',
'area-base-color-bg'
],
'label-selector': [
'show',
'fontSize',
'color',
'formatter'
],
'tooltip-selector': [
'show',
'textStyle',
'formatter'
],
'title-selector': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'vPosition',
'isItalic',
'isBolder'
],
'suspension-selector': [
'show'
],
'condition-style-selector': [
'show'
]
}
},
3、新增逻辑处理JS(以下以“map3D”为例子说明)
1)按照分类在src\views\chart\chart文件夹中新增或者对应的“视图”文件夹中新增自己的JS文件,例如“src\views\chart\chart\map\map3D.js”
2)在 src\views\chart\components\ChartComponent.vue 文件中引入处理核心方法(例如:“src\views\chart\chart\map\map3D.js” )
示例代码
import { baseMap3DOption } from '../chart/map/map3D'
3)在 src\views\chart\components\ChartComponent.vue 文件中的"drawEcharts"方法中引用
示例代码
chart_option = baseMap3DOption(base_json, chart, this.buttonTextColor, curAreaCode, this.currentSeriesIdt, geoJson)
//主要参数解释
base_json://“src\views\chart\chart\chart.js”中的默认配置参数
{
}
chart: //返回“视图”上次配置参数后,经过可视化配置后的结果,
{
customAttr://JSON 字符串格式,“src\views\chart\chart\chart.js”中的默认配置参数经过可视化配置后的结果
data: //“视图” 展示数据
customStyle:// JSON 字符串格式 “src\views\chart\chart\chart.js”中的默认配置参数经过可视化配置后的结果
}
geoJson : // 地图数据参数,具体请看“echarts”[官方网站](https://echarts.apache.org/zh/option.html)
4、可视化配置项新增或者修改
下面以“标签(label)”为例子
1)找到“src\views\chart\view\ChartStyle.vue”文件
说明:
“showPropertiesCollapse”和“showProperties”第一级权限 判断方法
“$t” 语言包渲染方法
2)找到“label-selector”相关组件(src\views\chart\components\shapeAttr\LabelSelector.vue)
3) 在“label-selector”中新增或者修改配置想,例如 “color” 参数
示例代码
<el-form-item
v-show="showProperty('color')"
:label="$t('chart.text_color')"
class="form-item"
>
<el-color-picker
v-model="labelForm.color"
class="color-picker-style"
:predefine="predefineColors"
show-alpha
@change="changeLabelAttr('color')"
/>
</el-form-item>
说明:
“showProperty”第二级权限 判断方法
参数通过“@change” 来进行设置并同步到 char.customAttr 中,同时触发"drawEcharts"方法
地图下钻数据源设置及原理
1)地区/维度 :必须使中文,并且与地图模型数据中的名称一致(api/geo/full/156/156100000_full.json)
2) 钻取/维度:
①:第一个参数必须和 “地区/维度”一致
②: 第二个参数是下级数据的展示名称,必须使中文,并且与地图模型数据中的名称一致(api/geo/full/156/156100000_full.json)