1.0.8 • Published 12 months ago
max-charts v1.0.8
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