更多图表

这是一个万能的图表组件，可配置出多种图表如折线图、饼状图、面积图、地图、漏斗图、仪表盘等所有的图表。使用该组件，可实现快速引入所有的 Echarts 图表。

适用场景

当官方组件库中柱状图、折线图、饼状图不满足需求时，您可以使用该组件。

使用前，请您先前往Echarts 官网查看图表示例找到您需要的图表。
使用时，直接配置 Options 设置图标数据、样式等。通过本文档您也可了解配置项。

基础功能

1. 模板

该组件提供了几套常用图表模板，如折线图、面积图、饼状图等。

2. 图表配置项（Option）

您也可以自行修改图表配置项Option，立即可实现任意的图表。前往示例配置，复制配置对象 Option，即可快速实现图表。如下：

关于配置项，以下做简单的介绍，具体您前往 Echarts 官网学习和查看 Echarts 官方配置文档

设置数据

主要通过xAxis和series配置数据，series允许配置多数据，如折线图的多条线。详见说明

xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  // 横坐标数据
},
yAxis: {},
series: [
    {
      type: 'line',  // type指定图表类型，可设置line、pie、bar等
      // 图表数值
      data: [150, 230, 224, 218, 135, 147, 260], // 纵坐标数据
      name: '系列1'  // 系列名
    }
]

设置标签

通过label属性控制图表标签。详见说明

label: {
      show: true,   // 是否展示
      formatter: function(params){  // 标签自定义展示
        return params
      }
},

如果需要自定义标签，请参考格式化formatter 函数文档

设置标题

通过title属性控制图表标题和位置。详见说明

title: {
        text: '图表标题',
        x: '50%' // 图表标题位置
}

设置图例

通过legend属性控制图表标题和位置。详见说明

设置配色

通过series中的lineStyle、itemStyle、areaStyle设置不同序列的颜色和样式。详见图表自定义样式

series: [{
    lineStyle: {
        color: '#2A70E2',
        width:'2',
        type: 'solid'
      },
      itemStyle:{
        color: 'auto',
      },
      areaStyle: {
        color: '#2A70E2',
        opacity: '0.5'
      }
   },{
    lineStyle: {
        color: '#2A70E2',
        width:'2',
        type: 'solid'
      },
      itemStyle:{
        color: 'auto',
      },
      areaStyle: {
        color: '#2A70E2',
        opacity: '0.5'
      }
}]

3. 初始化图表 Opts

可配置图表宽、高等，详见图表初始化 init 方法的 opts 配置项

属性说明

组件接收的外部传入的属性

chart初始化参数	`opts`	`object`	可配置render渲染模式等，对应图表初始化init方法的opts配置项可以参考Echarts图表配置，详见配置项目示例：{}
模板	`template`	`string`	预设模板，可以通过选择不同的模板快速配置所需的图表类型示例："square"
图表配置项（option）	`option`	`object`	通用图表可配置多种Echarts的图表，Option的type属性指定图表类型。您可以直接查看模板示例，快速配置不同类型的图表。详见通用图表使用文档可以参考Echarts图表配置，详见配置项目示例：{}
深色模式	`dark`	`boolean`	示例：false

事件说明

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

图表Ready	`onReady`	`object` echartsInstance: `object` 图表实例可以通过图表实例进行图表的相关操作，具体操作内容见Echarts官方说明 echarts: `object` echarts对象相当于项目中直接引入echarts，可以通过echarts对象直接调用其内部方法进行相应操作，例如echarts.color、echarts.graphic等，具体内容见Echarts官方说明	兼容三端	当前图表已完成实例初始化
单击	`click`		移动端,PC端	当点击图表中的坐标点时触发该方法，具体可以见Echarts官方事件说明
双击	`dblclick`		移动端,PC端	当双击图表中的坐标点时触发该方法，具体可以见Echarts官方事件说明

属性 API

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考属性 API

图表实例	`echartsInstance`	`object`	可以通过图表实例进行图表的相关操作，具体操作内容见Echarts官方说明
echarts对象	`echarts`	`object`	相当于项目中直接引入echarts，可以通过echarts对象直接调用其内部方法进行相应操作，例如echarts.color、echarts.graphic等，具体内容见Echarts官方说明

方法 API

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

设置图表配置	`setOption`	`object` option: `object` 图表配置 opts: `object` notMerge: `boolean` 是否不跟之前设置的 option 进行合并 replaceMerge: 用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge" lazyUpdate: `boolean` 在设置完 option 后是否不立即更新图表，如果为 true，则会在下一个 animation frame 中，才更新图表	设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，您可以直接查看Echarts官方图表示例
设置主题	`setTheme`	`object` theme: `string`	设置图表实例的主题，支持设置不同类型的主题，默认有dart、auto，也可以通过Echarts官方提供的registerTheme方法注册主题

样式 API

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式，详细说明请参考样式 API

根元素

.wd-chart

树组件根元素

/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-chart {
  /* 在这里编写CSS 样式 */
}

PC 端根元素

.wd-pc-chart

可以为 PC 端的编写样式

/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-chart {
  /* 在这里编写CSS 样式 */
}

H5 端根元素

.wd-h5-chart

可以为 H5 端的编写样式

/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-chart {
  /* 在这里编写CSS 样式 */
}

了解样式 API

常见问题

图表组件和通用图表组件的关系

通用图表组件是一个万能的图表组件，可配置出多种图表如折线图、饼状图、面积图、地图、漏斗图、仪表盘等所有的图表。使用该组件，可实现快速引入所有的 Echarts 图表。
通用图表组件的 UI 配置更加灵活，支持基本上常见的所有的图表类型
通用图表组件本身和数据无关，数据统计可以通过 Query 来实现，通过 APIs 或者 MySQL 连接器来进行数据统计，再绑定到通用图表组件上。

更多图表

适用场景​

基础功能​

1. 模板​

2. 图表配置项（Option）​

设置数据​

设置标签​

设置标题​

设置图例​

设置配色​

3. 初始化图表 Opts​

属性说明​

事件说明​

属性 API​

方法 API​

样式 API​

常见问题​

图表组件和通用图表组件的关系​