图表

系统将 ECharts 封装成图表组件，通过配置数据，设置 option，实现各种图表。下面列举了一些常用的图表。

图表组件

添加组件

从市场添加图表组件，在页面上添加图表组件，绑定图表使用的数据组件

图表设置

通过设置图表类型、设置图表使用的数据列、设置图表样式等完成图表的配置

图表类型

系统提供了多种图表模板，每种模板中定义了相应的 option，如下图所示

特别说明

• 选择白色字体的图表模板后，必须设置图表父容器的背景色，否则因为字体是白色的，运行时看不到文字

数据设置

数据类型分为：维度、指标、最大值、颜色、X轴、Y轴、信息等。

以柱图为例，维度表示分类（显示在X轴上），指标表示值（显示在Y轴上），指标可以有多个，如下图所示

以饼图为例，维度表示分类，指标表示值，指标只能有一个，如下图所示

以散点图为例，X 轴和 Y 轴表示点的坐标，指标表示点的值，可以转化为点的直径，直观的显示值的大小，信息是点的说明，如下图所示

以雷达图为例，维度表示分类，指标除以最大值表示点的位置，指标可以有多个，指标颜色表示点的颜色，如下图所示

综上所述，不同的图表类型，设置不同的数据类型。数据类型说明见下表

在数据设置中，选中图表使用的列，并设置数据类型，如下图所示。图表组件就会以这里设置的方式，渲染数据组件中的数据

样式设置

ECharts 提供了大量的配置项，这里只列出了一些图表模板中使用的配置项，可以在这里设置，也可以直接修改 option

自定义 option

ECharts 提供丰富的图表，丰富的展现形式，参考官网示例。这些丰富的样式都是通过配置项实现的，参考官网配置项手册。在 option 中直接编辑配置项即可。例如下图中增加 "stack": "Total" 实现堆叠效果

特别说明

• option 是 JSON 格式的，添加的代码必须符合 JSON 规范
• 图表组件使用 ECharts 的数据集单独声明数据，参考官网示例时，注意这个区别

皮肤设置

系统默认提供了4个皮肤，如需定义新的皮肤，需要修改组件。建议在企业门户的主题配置中定义图表的皮肤

图表事件

图表组件提供一个显示前事件，用于修改 option。在事件中，通过 event.detail.option 获取到图表组件生成的 option，提供给开发者修改，修改后赋值给 event.detail.option 即可生效。

在事件中输出 option 的代码如下

    onEcharts0BeforeSetOption = (event) => {
        console.log(event.detail.option);
    }

在控制台中看到输出的 option，如下图所示

柱状图、折线图、双 Y 轴

柱图和线图支持两种数据格式

• 数据在行上

• 数据在列上

当数据在行上时，在数据设置中，设置两个维度和一个指标即可，系统会将数据转换成图表需要的数据格式

当数据在列上时，在数据设置中，设置一个维度和多个指标即可

饼图/圆环图

饼图和圆环图的区别在于 option 中半径 radius 的设置，设置一个值表示外半径，显示为饼图，设置一个数组，表示内、外半径，显示为圆环图，如下图所示。

在数据设置中，设置一个维度和一个指标

运行效果如下

散点图

在数据设置中，设置 X 轴、Y 轴、指标、信息，如下图所示

X 轴、Y 轴、指标、信息在数据集中的下标分别是0、1、2、3。

• option 中的 symbolSize 表示点的大小，data[2]表示指标
• option 中的 label.formatter 表示文本标签格式，@[3] 表示信息，@[2]表示指标

运行效果如下图所示

雷达图

在数据设置中，设置维度、指标（可多个）、最大值、颜色（可选，可多个），如下图所示

颜色列和指标列需要有名称上的对应关系，指标列为xxx，颜色列为xxxcolor，如下图所示

运行效果如下图所示

散点图模板 option 中定义的 z 等于2和 z 等于3的 series ，如下图所示，这些代码是为了显示彩色点

散点图模板 option 中定义了调色板颜色（两个灰色），如下图所示

去掉调色板颜色后，会以默认的颜色显示，如下图所示

仪表盘

仪表盘只显示一个值，在数据设置中，设置一个指标，如下图所示

仪表盘模板 option 中定义了：最大值、最小值、刻度分隔段数、刻度分段颜色等，如下图所示

数据组件中只有一条记录，运行效果如下图所示。数据组件中有多条记录时，显示第一行数据中的值

漏斗图

漏斗图和饼图展示的数据一样，只是展示方式不同。在数据设置中，设置一个维度和一个指标，如下图所示

运行效果如下图所示

添加 echarts 事件

echarts 图表提供了很多事件，例如单击、图例切换等事件

在 echarts 组件的 echarts 事件属性中定义事件名及方法，格式如下：

react 代码（JSON格式）

    {
        "事件名1": $page.方法名1,
        "事件名2": $page.方法名2
    }

vue 代码（数组格式）

    [['事件名1', 方法名1],['事件名2', 方法名2]]

本例添加单击 click 和图例切换事件 legendselectchanged，事件名称从 echarts 官网获取

设置 echarts 事件属性

在 echarts 组件的 echarts 事件属性中输入下面的代码

react 代码

    {'click':$page.chartClick,'legendselectchanged':$page.legendselectchanged}

vue 代码

    [['click', chartClick],['legendselectchanged', legendselectchanged]]

添加 JS 方法

在 JS 文件中添加 chartClick 和 legendselectchanged 方法，代码如下

react 代码

    chartClick = (params) => {
    }

    legendselectchanged = (params) => {
        // 获取点击图例的选中状态
        let isSelected = params.selected[params.name];
        // 在控制台中打印
        console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
        // 打印所有图例的状态
        console.log(params.selected);
    }

vue 代码

    let chartClick = (params) => {
        alert("click");
    }

    let legendselectchanged = (params) => {
        // 获取点击图例的选中状态
        let isSelected = params.selected[params.name];
        // 在控制台中打印
        console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
        // 打印所有图例的状态
        console.log(params.selected);
    }

直接引用 echarts 的 js 库画图表

平台提供的有 echarts 组件已经带了 js 类库，可以从市场中引入 echarts 组件后就可以直接 import 类库直接用原始 echarts 的方式画图

这种方式不需要在页面中放图表组件，可以直接在 js 中给要显示图表的区块画需要的图就可以，具体如下：

js 引入：import * as echarts from "echarts";

react 体系

    //获取页面dom
    let pageRoot = this.getPage().renderRoot;
    //获取要画图标的区块div
    let divChart = pageRoot.querySelector("#div0");
    //初始化echarts
    let myChart = echarts.init(divChart);
    //设置数据
    myChart.setOption(option);

vue 体系

    //获取页面dom
    let pageRoot = $page.getPage().renderRoot;
    //获取要画图标的区块div
    let divChart = pageRoot.querySelector("#div0");
    //初始化echarts
    let myChart = echarts.init(divChart);
    //设置数据
    myChart.setOption(option);

上面的代码中，使用了 querySelector 获取 DOM 元素，建议使用 ref 获取 DOM 元素