跳到主要内容

更多图表

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

4. echart 官网示例

以 echart 的航班选座官方示例为例,在微搭组件中实现该效果,操作步骤如下:

1)当前页面“新建 javascript 方法” chartInit

2)定义“chartInit”方法

模仿 echarts 的示例改造,代码中替换对应组件属性: echarts 替换成 $w.chart1.echarts, myChart 替换成 $w.chart1.echartsInstance

export default async function ({ event, data }) {
const res = await fetch(
'https://lowcode-6g4bqrjy45e3e14b-1300677802.tcloudbaseapp.com/resources/2024-07/lowcode-1875317',
{
method: 'GET',
headers: {
'Content-Type': 'image/svg+xml',
},
}
);
const svg = await res.text();
$w.chart1.echarts.registerMap('flight-seats', { svg: svg });
const takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];
const option = {
tooltip: {},
geo: {
map: 'flight-seats',
roam: true,
selectedMode: 'multiple',
layoutCenter: ['50%', '50%'],
layoutSize: '95%',
tooltip: {
show: true,
},
itemStyle: {
color: '#fff',
},
emphasis: {
itemStyle: {
color: undefined,
borderColor: 'green',
borderWidth: 2,
},
label: {
show: false,
},
},
select: {
itemStyle: {
color: 'green',
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2,
},
},
regions: makeTakenRegions(takenSeatNames),
},
};
function makeTakenRegions(takenSeatNames) {
var regions = [];
for (var i = 0; i < takenSeatNames.length; i++) {
regions.push({
name: takenSeatNames[i],
silent: true,
itemStyle: {
color: '#bf0e08',
},
emphasis: {
itemStyle: {
borderColor: '#aaa',
borderWidth: 1,
},
},
select: {
itemStyle: {
color: '#bf0e08',
},
},
});
}
return regions;
}
$w.chart1.echartsInstance.setOption(option);
// Get selected seats.
$w.chart1.echartsInstance.on('geoselectchanged', function (params) {
const selectedNames = params.allSelected[0].name.slice();
// Remove taken seats.
for (var i = selectedNames.length - 1; i >= 0; i--) {
if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
selectedNames.splice(i, 1);
}
}
console.log('selected', selectedNames);
});
}

3)设置组件的属性,并绑定“chartInit”函数

属性说明

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

属性名
属性标识
类型
说明
chart初始化参数optsobject

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

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

示例:{}

模板templatestring

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

示例:"square"

图表配置项(option)optionobject

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

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

示例:{}

深色模式darkboolean

示例:false

事件说明

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

事件名
事件code
事件出参 event.detail
适用情况
说明
图表ReadyonReadyobject
  • 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

      只读属性名
      属性标识
      类型
      说明
      图表实例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 即可为所有的按钮组件编写样式,通过 :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 连接器来进行数据统计,再绑定到通用图表组件上。