DMP图表组件开发指南

一、组件开发工具

安装

npm install dmp-cli -g

windows下若出现fsevents安装失败,尝试在命令后面添加--no-optional参数

运行dmp,输出以下画面,说明安装成功。

dmp help

初始化组件

dmp init

windows下需使用管理员权限执行

1、输入组件基本信息

chart_info

组件英文名称为组件code,保证唯一。

组件中文名称,为平台显示的组件名称。

2、选择图表组件类型

chart_type

chart(有数据集的普通图表): 数据源通过配置数据集的图表,如表格、饼图等大部分图表。

filter(有数据集的筛选器图表):数据源通过配置数据集的筛选器,如下拉筛选等。

auxiliary(无数据集、可配置数据的辅助图形):数据源通过手动输入配置的简单图表,如文本、图片等。

auxiliary-none(无数据集、不可配置数据的辅助图形):无数据源的简单图表,如时间器,简单Tab选项卡组件。

3、选择组件开发使用的前端框架

chart_jsframework

4、组件初始化完成后会生成一个组件包,开发者在此基础上进行开发。

chart_init

生成的组件包

chart_package

运行组件

cd 你组件的文件夹名
dmp run

windows下需使用管理员权限执行

执行运行命令后,会打开报告设计器本地开发调试界面,同DMP平台报告设计器功能一致。

1、首先注册开发者账号

devtool_login

2、进入本地报告设计器界面,进行组件开发调试

devtool_main

组件导航栏包含了开发者的组件、平台内置的图表组件

3、创建组件单图后,可以进行样式及数据配置

devtool_config

样式选项卡:渲染组件的自定义配置项。

数据选项卡:拖拽数据维度和数值字段等,组件获取到对应的数据进行显示。

打包组件

dmp package --env test|beta|prod

windows下需使用管理员权限执行

dmp_package

根据组件包运行的环境(test或beta或prod)执行打包命令,生成一个zip包,然后再上传到组件中心。

二、组件包规范

component_package

1、目录结构

component                           //组件包
   |
   |-- .dist/                       //包含组件打包文件
   |-- .pack/                       //包含组件打包文件的zip压缩包
   |
   |-- designer/                    //包含组件的设计时代码
   |   |--components/               //包含开发者自行开发的样式属性组件
   |      |--myComponent.js
   |   |--index.js                  //组件的功能配置
   |
   |-- platform/
   |   |--icon/
   |      |--component.png          //组件icon图标(32*32)
   |      |--component_disable.png  //组件禁用状态的icon图标
   |   |--preview/
   |      |--sample.png             //组件显示的示例图片(335*238)
   |
   |-- src/
   |   |--index.jsx                 //包含组件的运行时源码
   |
   |-- index.js                     //组件包主入口文件
   |-- package.json                 //组件包配置

2、package.json

package.json

  • 组件初始化默认生成的部分,开发者不需要修改

(1) name

(2) version

(3) description

(4) platform/name

(5) platform/chartType

(6) platform/dataLogicType

(7) config/dataSourceOrigin

chartType、dataLogicType和dataSourceOrigin的对应关系:

chartType(组件类型) dataLogicType(组件数据类型) dataSourceOrigin(组件数据源)
chart default dataSet
filter assist dataSet
auxiliary nondataset manual或none
  • 开发者需要手动配置的部分:

(1) 修改platform配置项icon、icon_disable和previewImg的图片引用路径,指向组件自身的图片

(2) 修改组件功能配置项config

功能配置项 值说明
indicatorRules array,配置维度字段dim的数量、配置数值字段value的数量。如[{"dim": {"min": 1,"max":1},"value": {"min": 1,"max":1}}]
indicatorDescription string,指标(维度或数值字段)配置说明,如1个维度、1个数值
sortable boolean,是否支持字段排序
penetrable boolean,是否支持穿透
linkage boolean,是否支持触发联动
canLinked boolean,是否支持被其他单图联动
hasZaxis boolean,是否支持添加次轴
hasDesiredvalue boolean,是否支持设置目标值
dimsReportRedirect boolean,是否支持设置维度字段进行报告跳转
numsReportRedirect boolean,是否支持设置数值字段进行报告跳转

3、入口文件index.js

react_index

初始化组件选择vue框架时,该文件有特殊处理。通过dmp-chart-sdk的getVueComponent方法接入Vue组件,然后再Connect到平台。

vue_index

而React组件包则在源码src/index.jsx里通过Connect方法连接到平台。

react_connect

4、运行时源码src/index.jsx

组件开发需要引入DMP平台提供的组件开发SDK: dmp-chart-sdk, 组件通过Connect方法连接平台,接收config(样式配置)、data(通过数据集获取的数据)和events(平台功能API)等Props属性。

组件内部接收到的props属性列表:

Props 属性说明
platform 组件运行的客户端: mobile或pc
designTime 当前组件是否运行在设计时,如在报告设计器显示
chartId 组件在当前报告的图表id
data 组件接收到的数据(通过配置数据集)
config 组件的自定义样式配置,所有配置field对应的值
configInList 组件的自定义样式配置原始值,数组
layer 组件在报告中的图层信息
scale 组件在报告中的缩放比例
events 组件可调用的平台功能API
events Props API说明
onFilterChange 调用平台筛选功能,详情见平台功能调用-筛选
onRelateChart 调用平台联动功能,详情见平台功能调用-联动
onPenetrateQuery 调用平台穿透功能,详情见平台功能调用-穿透
updateConfig 通过代码更新组件样式配置,events.updateConfig(config,chartId)

React组件示例:

react_index

5、设计时代码designer/index.js

通过该文件对组件进行配置,包括功能配置(package.json/config)、样式配置(chartConfig)、previewData(没有配置数据集时的默认数据)、defaultDataSize(报告设计时获取数据的最大条目数)等

react_design_index

  • 样式配置格式详情见《四、样式配置chartConfig》。

  • 每个样式配置项对应一个样式配置组件PropComponent

  • 开发者可以从dmp-chart-sdk的PropComponents获取,详情见《五、内置样式配置组件PropComponents》

  • 开发者也可以扩展开发样式配置组件,详情见《六、样式配置组件扩展开发》

  • 开发者引入使用Vue框架开发的样式配置组件时,需要调用dmp-chart-sdk的getVueComponent方法,如下图

getVue

三、组件开发SDK

平台提供了图表组件开发SDK: dmp-chart-sdk

import {
  Connect,
  PropComponents,
  Utils,

  getVueComponent,
  convertToVueComponent
} from 'dmp-chart-sdk'

Connect

连接器,为图表组件与DMP大数据可视化平台提供了连接,通过此连接可为组件提供开发相关的props属性。

React和Vue组件使用略有差别。

  • React: src/index.jsx
class MyChart extends React.Component {
 ...
}

export default Connect()(MyChart)
  • Vue: index.js
import component from './src/index'
import designer from './designer'

export default {
  ...,
  component: Connect()(getVueComponent(component))
}

PropComponents

平台内置样式属性基础组件,详情见《五、内置样式配置组件PropComponents》

Utils

实用方法

方法 调用说明 备注
Utils.DataUtils.pluckDimsData 从data获取维度字段数据 const dimsData = DataUtils.pluckDimsData(data, indicators)
Utils.DataUtils.pluckNumsData 从data获取数值字段数据 const numsData = DataUtils.pluckNumsData(data, indicators)
Utils.formatDisplay 格式化维度或数值字段的数据 Utils.formatDisplay(fieldValue, fieldDisplayFormat)

getVueComponent

getVueComponent('path/to.vue')

引入vue文件,使vue组件能够在dmp平台运行

convertToVueComponent

使dmp组件sdk提供的基础属性组件PropComponents,能够在vue文件内使用

vue文件示例:

<template>
  <color-picker :data="color" :onChange="onChangeColor"/>
</template>

<script>
import { PropComponents, convertToVueComponent } from "dmp-chart-sdk"

export default {
  components: {
    ColorPicker: convertToVueComponent(PropComponents.ColorPicker)
  }
};
</script>

四、样式配置chartConfig

chartConfig配置用以说明组件有哪些配置,既用于传给组件,也用于说明编辑器的选项.

四种概念:

  • 配置模块
  • 配置组
  • 配置项
  • 配置组件

示例:

//使用组件SDK的基础配置组件PropComponents
import { PropComponents } from 'dmp-chart-sdk'

export default {

  chartConfig:[
    //这是一个配置模块
    {
      field: 'module1',        // 模块字段,必填
      title: '模块1',           // 模块名称
      show: true,              // 设置模块开关按钮的状态(开启或关闭),不设置该属性则不显示开关按钮
      spread: true,            // 设置模块的展开状态(下拉展开或收缩隐藏)
      items: [                 // 配置模块包含配置组或配置项

        //这是一个配置组
        {
          field: 'group1',     // 配置组字段,必填
          label: '配置组1',     // 配置组名称
          show: {              // 配置组开关按钮,不设置则不显示
            field: 'checked',  // 开关字段名,必填
            data: true         // 开关按钮状态(开启或关闭)
          },
          items:[              // 配置组包含配置项,不支持嵌套配置组

            //这是一个配置项
            {
              field: 'item1',      // 配置项字段,必填
              label: '配置项1',     // 配置项名称,不设置该属性则不显示label

              //这是一个内置配置组件
              component: PropComponents.ColorPicker,
              data: ''             // 配置项默认值,传入配置组件
            }
          ]
        },

        //这是一个配置项
        {
          field: 'item2',      // 配置项字段,必填
          label: '配置项2',     // 配置项名称,不设置该属性则不显示label

          //这是一个内置配置组件,可传递prop属性
          component: {
           component: PropComponents.Spinner,
           props: {
             min: 12
           }
          },
          data: 14          // 配置项默认值,传入配置组件
        }
      ]
    }
  ]
}

传递给组件的配置数据


//react
const { config } = this.props

//vue
const config = this.config

//配置JSON数据如下
config={
  module1:{
    show: true,
    spread: true
    group1:{
      checked: true,
      item1: ''
    }
    item2: 14
  }
}

效果

dmp chartconfig

平台内置通用配置(标题、背景、边框),可选择禁用(不建议)。

chartConfig=[

  //禁用标题模块
  {
    field: 'containerTitle',
    disabled: true
  },

  //禁用背景模块
  {
    field: 'containerBackground',
    disabled: true
  },

  //禁用边框模块
  {
    field: 'containerBorder',
    disabled: true
  }
]

五、内置样式配置组件PropComponents

PropComponents.Border

dmp border

示例

{
  component: {
    component:PropComponents.Border,
    props:{
      hideColor: false,   //是否隐藏颜色配置项
      colorLabel: '颜色',  //颜色配置项标题
      styleLabel: '粗细'   //线条配置项标题
    }
  },
  data: {
     borderColor: 'transparent',
     borderStyle: 'solid',       //solid(实线), dashed(虚线), dotted(点线)
     borderWidth: 0
  }
}

PropComponents.Checkbox

dmp checkbox

示例

{
  component: PropComponents.Checkbox,
  data: true
}

PropComponents.ColorPicker

dmp colorpicker

示例

{
  component: PropComponents.ColorPicker,
  data: '#24BCFA'
}

PropComponents.DatePicker

dmp datepicker

配置属性(prop) 含义 默认值
single 日期格式为单日期,还是区间 true
parentEl 日期控件挂载父节点 body

示例

{
  component: {
    component: PropComponents.DatePicker,
    props:{
      single: false,
      parentEl: 'body'
    }
  },
  data: ['2017-08-16', '2017-10-25'] // single:true时,data:'2017-08-16'
}

PropComponents.FontStyle

dmp fontstyle

示例

{
  component: PropComponents.FontStyle,
  data: {
     fontWeight: 'normal',   //bold, normal
     fontStyle: 'normal',    //italic, normal
     textDecoration: 'none'  //underline, none
  }
}

PropComponents.GridSpinner

dmp gridspinner

配置属性(prop) 含义 默认值 备注
options 配置选项 [] [{name:'width', label:'宽', max: +Infinity, min: 10, step: 1},{...},{...},{...}]

示例

{
  component: {
    component: PropComponents.GridSpinner,
    props: {
      indent: false,
      options: [
        {
          name: 'width',
          label: '宽',
          max: +Infinity,
          min: 10,
          step: 1
        },
        {
          name: 'height',
          label: '高',
          max: +Infinity,
          min: 10,
          step: 1
        },
        {
          name: 'x',
          label: 'X',
          max: +Infinity,
          min: -Infinity,
          step: 1
        },
        {
          name: 'y',
          label: 'Y',
          max: +Infinity,
          min: -Infinity,
          step: 1
        }
      ]
    }
  },
  data: {
    width: 478,
    height: 360,
    x: 86,
    y: 44
  }
}

PropComponents.ImageUploader

imageUploader

示例

{
   component: PropComponents.ImageUploader,
   data: ''
}

PropComponents.Input

dmp input

示例

{
  component: {
    component:PropComponents.Input,
    props:{
      type:'input', //input或textarea
      placeholder:''
    }
  },
  data: '文本框'
}

PropComponents.Select

dmp select

配置属性(prop) 含义 默认值 备注
style 样式 -
options 选项 [] [{ value: '值', text: '文本' }]

示例

{
  component: {
    component: PropComponents.Select,
    props:{
      options:[
        { value: '文字', text: '文字' },
        { value: '图片', text: '图片' }
      ]
    }
  },
  data: "文字"
}

PropComponents.Slider

dmp slider

配置属性(prop) 含义 默认值
max 最大值 1
min 最小值 0
step 数字间隔 0.01

示例

{
  component: {
    component: PropComponents.Slider,
    props: {
      min: 0,
      max: 100,
      step: 1
    }
  },
  data: 50
}

PropComponents.Spinner

dmp spinner

配置属性(prop) 含义 默认值
max 最大值 无穷大
min 最小值 0
step 数字间隔 1
unit 单位 px

示例

{
  component: {
    component: PropComponents.Spinner,
    props:{
      max: 60,
      min: 12,
      step: 1,
      unit: 'px'
    }
  },
  data: 12
}

PropComponents.TimeSpinner

dmp timespinner

示例

{
  component: PropComponents.TimeSpinner,
  data: {
    time: 0,
    unit: 'hour'  //hour, minute, second
  }
}

PropComponents.TextAlign

dmp textalign

示例

{
  component: PropComponents.TextAlign,
  data: 'left'  //left, center, right
}

六、样式配置组件扩展开发

开发者可扩展开发样式配置组件,以满足图表的个性配置

基础Prop属性:

属性(prop) 含义
chart 当前图表的相关配置(数据集、维度等)
chartData 当前图表请求返回的数据
data 当前配置项的值
onChange 配置项值修改后需触发的事件
  • react示例
import { PropComponents } from 'dmp-chart-sdk'
import MyComponent from './components/mycomponent'

export default {
  chartConfig:[
    {
      field: 'module1',
      title: '模块1',
      show: true,
      spread: true,
      items: [
        {
          field: 'customItem',
          label: '自定义配置项',
          component: MyComponent,  //使用自己开发的配置组件
          data: 'test'
        }
      ]
    }
  }
}

mycomponent.jsx

import React from 'react'
import PropTypes from 'prop-types'
import _ from 'lodash'

class MyComponent extends React.Component {
  static propTypes = {
    chart: PropTypes.object,     //当前图表的相关配置(数据集、维度等)
    chartData: PropTypes.object, //当前图表请求返回的数据
    data: PropTypes.object,      //当前配置项的值
    onChange: PropTypes.func     //配置项值修改后需触发的事件
  }

  constructor(props) {
    super(props)
    this.state = {
      data: props.data
    }
  }

  componentWillReceiveProps(nextProps) {
    if (!_.isEqual(nextProps.chart, this.props.chart)) {
      this.setState({
        data: nextProps.data
      })
    }
  }

  render() {
    const { data } = this.state
    return (
      <div className="diagram-design-config-content">
        <div className="form">
          <input
            type="text"
            className="form-control"
            value={data}
            onChange={this.handleChange}
          />
        </div>
      </div>
    )
  }

  handleChange = (e) => {
    const data = e.target.value
    this.setState({
      data
    }, () => {
      this.props.onChange(data)
    })
  }
}

export default MyComponent
  • vue示例
import { PropComponents, getVueComponent } from 'dmp-chart-sdk'
import MyComponent from './components/mycomponent.vue'

export default {
  chartConfig:[
    {
      field: 'module1',
      title: '模块1',
      show: true,
      spread: true,
      items: [
        {
          field: 'customItem',
          label: '自定义配置项',
          component: getVueComponent(MyComponent),  //引入自己开发的vue配置组件
          data: 'test'
        }
      ]
    }
  }
}

mycomponent.vue

<template>
  <div className="diagram-design-config-content">
    <div className="form">
      <color-picker :data="color" :onChange="onChangeColor"/>
    </div>
  </div>
</template>

<script>
import { PropComponents, convertToVueComponent } from "dmp-chart-sdk";

export default {
  props: {
    chart: Object,
    chartData: Object,
    data: String,
    onChange: Function
  },
  data() {
    return {
      color: this.data
    };
  },
  components: {
    ColorPicker: convertToVueComponent(PropComponents.ColorPicker)
  },
  methods: {
    onChangeColor(color) {
      this.$set({ color });
      this.onChange(color);
    }
  }
};
</script>

效果

dmp propcomponent

七、平台功能调用

筛选

开发者在开发筛选器(chart_type === 'filter')时可扩展组件筛选功能,以满足筛选器图表对于其他图表组件进行筛选

平台筛选设置

平台筛选设置

平台筛选设置2

基础Prop属性:

属性(prop) 含义
designTime 设计时编辑区
chartId 当前图表的id
data 当前图表平台属性对象
data.data 当前图表数据集数据
data.indicators 包含当前图表维度、数值、次轴、目标值等数组
data.conditions 当前筛选器图表已触发的筛选条件
data.defaultValue 当前筛选器图表默认值(在设计时筛选器可以添加默认值,预览时会直接选中默认值)
event events.onChangeDatasetDefaultValue(改变筛选器默认值),events.onFilterChange(触发平台筛选)
  • react示例

  handleDateChange(value) {
    const { designTime, data, events, chartId } = this.props
    const { dims } = data.indicators || {}
    const dim = dims && dims[0]
    const newDate = _date2Range(value, this.state.type)
    const conditions = []
    newDate.forEach((item, i) => {
      if (i === 0 && !!item) {
        conditions.push({
          field_name: dim.col_name,
          field_id: dim.dim || dim.id,
          col_value: item,
          operator: '>=',
          formula_mode: dim.formula_mode,
          dim
        })
      } else if (item) {
        conditions.push({
          field_name: dim.col_name,
          field_id: dim.dim || dim.id,
          col_value: item,
          operator: '<=',
          formula_mode: dim.formula_mode,
          dim
        })
      }
    })
    this.setState({
      date: newDate
    }, () => {
      if (designTime) {
        events && events.onChangeDatasetDefaultValue && events.onChangeDatasetDefaultValue(this.state.date.join(','))
      } else {
        events && events.onFilterChange && events.onFilterChange(conditions, chartId)
      }
    })
  }

联动

开发者在开发图表组件(chart_type === 'chart')时可扩展组件联动功能,以满足图表对于其他图表组件进行联动

平台联动设置

平台联动设置

基础Prop属性:

属性(prop) 含义
designTime 设计时编辑区
chartId 当前图表的id
data 当前图表平台属性对象
data.data 当前图表数据集数据
data.indicators 包含当前图表维度、数值、次轴、目标值等数组
event events.onRelateChart(触发平台联动)
linkStatus 当前图表联动选中条件
linkList 当前单图联动列表, 用于标识是否联动了其他单图

组件联动相关属性:

属性(this) 含义
validConnect 是否触发联动事件
hasBindClickEvent 是否绑定联动事件(避免重复触发联动事件)

组件联动注意项: 1.优先级低于穿透(点击事件优先绑定穿透事件) 2.组件本身需要样式区分选中状态与非选中状态 3.组件如果要设置联动,必须存在维度字段

  • react示例

    //维度存在且被联动单图list大于0
    if (dims && dims.length > 0 && linkList && linkList.length > 0) {
      this.hasBindClickEvent = true;
      this.validConnect = false;
      //2018-04-26 处理'{空}'的情况以区别currentName为''的无联动状态
      if (chartRelated && (params.name === currentName || currentName === '{空}')) {
        this.setState({
          currentName: '',
          chartRelated: false
        }, () => {
          if (events.onRelateChart) {
            events.onRelateChart(conditions, chartId, '', () => {
              this.hasBindClickEvent = false
              this.validConnect = true
              this.bindEvents()
            })
          }
        })
      } else {
        //拆分name 获得condition_value
        const valueArr = params.name.split('&')
        valueArr.forEach((item, index) => {
          let condition = { chart_id: chartId }
          // 拼接conditions
          item = item === '-' ? '' : item
          if (dims[index]) {
            condition = { ...condition, col_value: item, col_name: dims[index].col_name, dim: dims[index], operator: '=' }
            conditions.push(condition)
          }
        })
        //将params.name为''的情况处理为'空'
        this.setState({
          currentName: params.name || '{空}',
          chartRelated: true
        }, () => {
          if (events.onRelateChart) {
            events.onRelateChart(conditions, chartId, params.name || '{空}', () => {
              this.hasBindClickEvent = false
              this.validConnect = true
              this.bindEvents()
            })
          }
        })
      }
    }

跳转

开发者在开发有数据集的单图组件(chart_type === 'chart')时,以满足单图组件发起报告切换、路由切换、新开标签页功能

平台跳转设置

reportjump

基础Prop属性:

属性(prop) 含义
designTime 设计时编辑区
chartId 当前图表的id
data 当前图表平台属性对象
dashboardName 当前起跳报告报告名称(用于显示在跳转时面包屑上)
userToken 当前用户登录态token,用于跳转时第三方验证
platform 当前报告类型(pc端、mobile端)
data.paramsConditions 后台返回的当前图表参数跳转条件
events.onRedirect 平台跳转新API
redirectRelation 平台跳转设置

平台跳转新API参数:

参数(params) 含义
params.type 跳转类型(table_like、chart_like、pie_like)后续组件内的逻辑处理可能会移到sdk
params.col 设置跳转的字段key(别名alias)
params.dashboardName 当前跳转报告名
params.dataset_field_id 设置跳转的字段id(dim or num)
params.platform 当前报告类型(pc端、mobile端)
params.events 当前图表的事件props
params.router 当前图表路由对象
params.conditions 后台返回的当前图表参数跳转条件
params.data 当前点击项的数据(维度值、数值)集合({ key(别名alias): value })
params.token 当前用户登录态token
  • 组件方法handlePlanformRedirect
  //只需要输出
  handlePlanformRedirect(rowObj, id, col) {
    const { events, data, dashboardName, userToken, platform } = this.props
    const type = 'table_like'
    const paramObj = {
      type,
      col,
      platform,
      events,
      router: this.context.router,
      dataset_field_id: id,
      dashboardName,
      token: userToken,
      data: rowObj,
      conditions: data.paramsConditions || []
    }
    events.onRedirect && events.onRedirect(paramObj)
  }
  • 组件内处理数据

  • 所有else if为新增逻辑判断,即先兼容平台旧跳转设置、如果旧跳转设置不存在的情况调用新API: handlePlanformRedirect

  • 示例代码为柱状类跳转、是一种较为完整跳转设置(数值跳转、维度跳转、参数跳转、多数值维度同时设置跳转)
  • 未来组件内处理数据会抽象到平台,所有组件只需要调用组件方法并输出参数即可
    //情况一存在维度
    if (dims && dims.length > 0) {
      dims.forEach((dim, index) => {
        const key = dim.alias || dim.alias_name || dim.col_name
        const reportObj = dimsReportRedirect[key]
        dimKeys.push(key)
        if (reportObj && !hasReportRedirect && reportObj.isOpen) {
          this.handleReportRedirect(reportObj, keys[index])
          hasReportRedirect = true
        } else if (redirectRelation && !hasReportRedirect) {
          const id = dim.dim || dim.dataset_field_id
          const redirect = _.find(redirectRelation.chart_redirect, item => item.dataset_field_id === id)
          //跳转设置存在并且是维度跳转
          if (redirect && redirect.type === 0) {
            this.handlePlanformRedirect({ [key]: keys[index] }, id, key)
            hasReportRedirect = true
          }
        }
      })
      nums.forEach((num, index) => {
        const key = num.alias || num.alias_name || num.col_name
        const reportObj = numsReportRedirect[key]
        //把params的值跟维度别名关联起来
        const keysArr = {}
        keys.forEach((k, i) => {
          keysArr[dimKeys[i]] = k
        })
        //2018-07-18加入新判断,目前会根据点击的柱子决定跳转顺序
        if (reportObj && !hasReportRedirect && reportObj.isOpen && index === params.seriesIndex) {
          this.handleReportRedirect(reportObj, keysArr, keysArr)
          hasReportRedirect = true
        } else if (redirectRelation && !hasReportRedirect && index === params.seriesIndex) {
          //如果存在维度,则默认
          const id = num.num || num.dataset_field_id
          const redirect = _.find(redirectRelation.chart_redirect, item => item.dataset_field_id === id)
          //跳转设置存在并且是数值跳转
          if (redirect && redirect.type === 1) {
            this.handlePlanformRedirect(keysArr, id, key)
            hasReportRedirect = true
          }
        }
      })
    } else {
      //情况二 无维度
      const key = params.seriesName
      const reportObj = numsReportRedirect[key]
      if (reportObj && !hasReportRedirect && reportObj.isOpen) {
        this.handleReportRedirect(reportObj, key)
        hasReportRedirect = true
      } else if (redirectRelation && !hasReportRedirect) {
        const id = this._getIdByAlias(key)
        this.handlePlanformRedirect({}, id)
        hasReportRedirect = true
      }
    }
    if (hasReportRedirect) return

八、报告主题开发

报告主题的加入提升了DMP的多样性,能够满足更多的报告风格的需求。为了使开发者可以快速的上手,开发一套独一无二的报告主题,接下来将介绍报告主题的具体开发步骤。

首先,我们得对单图中的配置文件(designer/index.js)进行升级,这里提供了两个函数,分别是getChartConfigColorByKeygenerateDefaultColorTheme,其中第一个方法为单图中的样式动态的提供颜色(渐变色),第二个方法则是动态的改变配色方案。通过这两个方法可以读取echart.js文件中设置的主题样式和应用于单图,接下来我们就来看下如何应用这两个方法。

  • 单图示例
  // 获取配色方案
  {
    title: '配色方案',
    spread: true,
    field: 'theme',
    items: [{
      label: '',
      field: 'colorTheme',
      theme_controled: true,
      component: {
        component: PropComponents.ColorThemeConfig,
        props: {
          gradient: true,
          dimensionSwitch: false,
          legends: 'line_like'
        }
      },
      data: generateDefaultColorTheme,
    }],
  }
  // 获取颜色
  {
    field: 'color',
    label: '颜色',
    theme_controled: true,
    component: PropComponents.ColorPicker,
    data: getChartConfigColorByKey.bind(null, 'text')
  }

注:每个需要使用到这两个函数的配置项都需要添加theme_controled字段,因为在编辑时切换主题需要通过这个字段来判断哪个配置项应用了动态获取颜色和配色方案

接下来,我们来看一下echart.js中的配置,首先需要一种配色方案,一般是由多个颜色组合而成的数组。如下所示:

  • 配色方案示例
  gradual_blue: {
    name: '渐变蓝',
    colors: ['#297CBA', '#1f3a90', '#131568', '#0d1544', '#297cba', '#54c0d5', '#b3e2cf', '#dcedc8'],
    type: 0
  },

除了新增配色方案之外,还需要为几个单图中特别的字段进行配色,这里要注意,如果为一个主题新增了配色属性,那么其余所有的主题都需要新增这个配色。

  • 单图配色示例
  // 渐变蓝
  gradual_blue: {
    rank: 4,
    name: '渐变蓝',
    dashboard_background: 'RGBA(255,255,255,1)',
    tooltip_background: '#FFFFFF',
    tooltip_extra_css: 'box-shadow: 1px 1px 4px 2px rgba(0,0,0,0.10);max-height: 450px;overflow-y:auto; transform: translateZ(1px);',
    tooltip_title_color: '#555555',
    default_color_theme: {
      v: '1',
      themeKey: 'gradual_blue',
      customColors: [],
      affect: 0
    },
    grad_color_theme: {
      v: '1',
      themeKey: 'gradual_blue',
      customColors: [
        {
          value: ['#54C0D5', '#1F3A90']
        }
      ],
      affect: 0
    },
    chart_colors: {
      text: 'RGBA(46,46,46,1)',
      content: 'RGBA(41,124,186,1)',
    }
  }

单图配色相关属性:

属性 含义
dashboard_background 主题的背景色
tooltip_* tooltip工具栏相关的配色
default_color_theme 默认配色方案
grad_color_theme 默认渐变配色方案
chart_colors 单图中属性项的颜色

通过以上的步骤,一个全新的主题就算是成功创建了,接来下只需要在新增报告中加入一个新主题的选项,就可以尽情的欣赏自己的制作的主题了。

九、开发建议

1、平台内置,组件开发不再需要安装的Node包列表:

react react-dom react-bootstrap-myui dmp-chart-sdk prop-types echarts lodash moment jquery isomorphic-fetch

另外平台已引入高德地图开发API <script src="https://webapi.amap.com/maps?v=1.4.4&key="></script>

results matching ""

    No results matching ""