Max Charts 使用指南

1. Introduction

Max Charts 是一个基于 ECharts 的图表库，它提供了一套简单易用的 Vue 组件，让你可以快速的在你的项目中快速引入Jiker Max 平台的图表和看板。

2. Installation

npm install max-charts

或

yarn add max-charts

3. Configuration

1. Environment

在项目中的 .env.local 文件中，添加内容如下：

VUE_APP_MAX_API_PREFIX = "对接的Max平台API地址";

2. Permission

组件在使用的时候，需要有对应的 token，token 的获取方式见 Max 平台 OpenAPI 文档

使用组件时候 token 需要在组件的 props 中传入，如下：

<max-diy-chart :token="token" />

3.所需的 NPM 包

组件在使用的时候，本地需要有对应的 NPM 包，如下：

{
  "dependencies": {
    "element-ui": "^2.15.13",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "vue": "^2.6.14"
  }
}

PS: Max 相关的平台在引入时候可以正常使用，无需额外的权限配置

4. Usage

import Vue from "vue";
import MaxCharts from "max-charts";

Vue.use(MaxCharts);

5. Components

1. MaxDiyChart

MaxDiyChart 在项目中快速的引入Jiker Max 平台的图表。

支持的配置如下：

<max-diy-chart
  id="b2smc6e1" //图表id 必填
  token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9" //token 非Max平台必填
  name="图表名称" // 不填写则使用图表原本的名称
  description="图表描述" // 不填写则使用图表原本的描述
  height="400" //图表高度 默认400
  width="400" //图表宽度 默认400
  background="#f2f3f5" //背景 默认#f2f3f5
  border="1px solid rgba(0, 0, 0, 0.06)" //边框 默认1px solid rgba(0, 0, 0, 006)
  :cardStyle="{}" //可配置其他卡片样式 默认为空对象{}
  :indicatorParams="[]" //图表选择器默认参数 默认为空数组[],配置方法参考MaxSelector组件的sqlParams
  :selectorDisabled="false" //图表选择器是否禁用 默认false
  selectorExpandTrigger="click" //图表选择器展开方式 默认click
  selectorSize="mini" //图表选择器大小 默认mini
></max-diy-chart>

2. MaxDashboard

MaxDashboard 在项目中快速的引入Jiker Max 平台的看板。

支持的配置如下：

<max-dashboard
  id="2"  //看板id 必填
  token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"  //token 非Max平台必填
  pageWidth="1080" // 看板的宽度 默认1080
  background="#f2f3f5" //背景 默认#f2f3f5
  :dashboardParams="[]" //看板全局选择器默认参数 默认为空数组[],配置方法参考MaxSelector组件sqlParams
  :dashboardSelectorDisabled="false" //看板的全局选择器是否禁用 默认false
  :dashboardSelectorHidden="false" //看板的全局选择器是否隐藏 默认false
  :selectorDisabled="false" //所有的选择器是否禁用 默认false
  selectorSize="mini" //所有的选择器大小 默认mini
  selectorExpandTrigger="click" //所有的选择器展开方式 默认click
></max-dashboard>

3. MaxSelector

MaxSelector 在项目中快速的引入Jiker Max 平台的选择器集合。

支持的配置如下：

<max-selector
  :timer="timer"
  :indicators="indicators"
  :search="search"
  :sqlParams="sqlParams"
  size="mini" //选择器大小 默认mini
  expandTrigger="click" //选择器展开方式 默认click
  :disabled="false" //选择器是否禁用 默认false
  :useFirstAsDefault="true" //是否使用第一项作为默认值 默认true
  :showAllLevel="true" //是否显示所有层级 默认true
  :token="token" //token 非Max平台必填
  @change="handleChange" //选择器值改变时触发的回调
></max-selector>

data(){
  return {

    // 时间选择器配置,开始时间字段、结束时间字段、默认时间
    // 默认时间可以是数字：1: 近7天 2: 近30天 3: 近90天
    // 默认时间也可以是一个数组，如：[2021-10-11, 2099-10-11]
    timer: ["start_time", "end_time", 2],

    // 选择器配置，搜索字段、默认搜索值
    indicators: [
      {
        uuid: "8f_kSfoa", // 必填 关联数据集的uuid
        indicator: "industry_uuid", // 必填 指标字段名称
        isMultiple: false, // 是否多选
        width: 200, // 选择器宽度
        defaultValue: null, // 默认值
      },
      {
        indicator: "job_id",
        uuid: "X2SKAIVx",
      },
    ],

    // 搜索框配置
    search: [
      {
        field: "job_name", //必填 搜索字段
        label: "岗位", // 搜索框的的文字
        width: 200, // 搜索框宽度
      },
    ],

    // 默认参数配置
    // MaxSelector的默认值可以不用这种方式配置，可以通过timer[2]和indicators的defaultValue配置默认值
    // MaxDiyChart中的indicatorParams和MaxDashboard中的dashboardParams使用这种方法配置默认值
    sqlParams: [
      {
        key: "account_id", //必填 选择器指标字段名称
        value: 3, //必填 选择器指标字段值
      },
      {
        key: "account_id",
        isMultiple: true, // 多选时候必填
        value: [1, 2, 3], // 如果是多选，value需要是一个数组
      },
      {
        key: "start_date", // 时间选择器的开始时间字段
        value: "2020-01-01", // 时间选择器的开始时间字段值
      },
      {
        key: "end_date", // 时间选择器的结束时间字段
        value: "2020-12-31", // 时间选择器的结束时间字段值
      },
    ],
  }
}

6. Issues

如果在使用过程中遇到问题： Max Charts Issues

7. License

MIT Copyright (c) 2023-present yangyang