DataEase 项目源码解析

人生败类

已于 2023-10-31 16:26:05 修改

阅读量925

点赞数 3

分类专栏： dataEase 文章标签： vue.js 大数据大屏端

于 2023-09-05 17:53:42 首次发布

本文链接：https://blog.csdn.net/u010361109/article/details/132697264

版权

dataEase 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

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）