跳到主要内容

更多图表

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

适用场景

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

  • 使用前,请您先前往Echarts 官网查看图表示例找到您需要的图表。

  • 使用时,直接配置 Options 设置图标数据、样式等。通过本文档您也可了解配置项。

基础功能

1. 模板

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

2. 图表配置项(Option)

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

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

设置数据

主要通过xAxisseries配置数据,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中的lineStyleitemStyleareaStyle设置不同序列的颜色和样式。详见图表自定义样式

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初始化参数optsobject

可配置render渲染模式等,对应图表初始化init方法的opts配置项

可以参考Echarts图表配置,详见配置项目

示例:{}

模板templatestring

预设模板,可以通过选择不同的模板快速配置所需的图表类型

示例:"square"

图表配置项(option)optionobject

通用图表可配置多种Echarts的图表,Option的type属性指定图表类型。您可以直接查看模板示例,快速配置不同类型的图表。详见通用图表使用文档

可以参考Echarts图表配置,详见配置项目

示例:{}

深色模式darkboolean

示例:false

事件说明

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

事件名
事件code
事件出参 event.detail
适用情况
说明
单击click 移动端,PC端

当点击图表中的坐标点时触发该方法,具体可以见Echarts官方事件说明

双击dblclick 移动端,PC端

当双击图表中的坐标点时触发该方法,具体可以见Echarts官方事件说明

属性 API

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

只读属性名
属性标识
类型
说明
图表实例echartsInstanceobject

可以通过图表实例进行图表的相关操作,具体操作内容见Echarts官方说明

echarts对象echartsobject

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

方法 API

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

方法名
方法标识
参数
方法说明
设置图表配置setOptionobject
  • option: object 图表配置
    • opts: object
      • notMerge: boolean

        是否不跟之前设置的 option 进行合并

      • replaceMerge:

        用户可以在这里指定一个或多个组件,如:xAxis, series,这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件,也可使用 "replaceMerge"

      • lazyUpdate: boolean

        在设置完 option 后是否不立即更新图表,如果为 true,则会在下一个 animation frame 中,才更新图表

    设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,您可以直接查看Echarts官方图表示例

    设置主题setThemeobject
    • theme: string

    设置图表实例的主题,支持设置不同类型的主题,默认有dart、auto,也可以通过Echarts官方提供的registerTheme方法注册主题

    样式 API

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

    名称
    类名
    说明
    根元素.wd-chart树组件根元素
    PC 端按钮根元素.wd-pc-chart可以为 PC 端的编写样式
    H5 端按钮根元素.wd-h5-chart可以为 H5 端的编写样式

    了解样式 API

    常见问题

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

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