通用图表
#
适用场景通用图表是一个万能图表,可配置出多种图表如折线图、饼状图、面积图、地图、漏斗图、仪表盘等。
使用说明
进入应用编辑器页面,将图表组件 > 通用图表组件拖进相应容器即可。
属性说明
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
chart初始化参数 | opts | object | 高级属性 | {} | - |
模板 | template | "gauge"|"square"|"scatter"|"line"|"bar"|"pie"|"empty" | 基础 | "square" | 预设模板 |
图表配置项(option) | option | object | 基础 | {} | - |
深色模式 | dark | boolean | 基础 | false | - |
事件说明
组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
单击 | click | 移动端,PC端 | - | |
双击 | dblclick | 移动端,PC端 | - |
属性 API
通过属性 API,可以获取组件内部的状态和属性值
只读属性名 | 属性标识 | 类型 | 说明 |
---|
图表实例 | echartsInstance | object |
方法 API
通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等
方法名 | 方法标识 | 方法说明 |
---|
设置图表配置 | setOption | 设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成 |
设置主题 | setTheme | 设置图表实例的主题 |
样式 API
通过样式 API,可以覆盖组件中内部元素的样式来实现自定义
名称 | 类名 | 说明 |
---|
根元素 | .wd-chart | 树组件根元素 |
PC 端按钮根元素 | .wd-pc-chart | 可以为 PC 端的编写样式 |
H5 端按钮根元素 | .wd-h5-chart | 可以为 H5 端的编写样式 |