组件/数据展示

EECharts Apache ECharts

import EUI 1.0

示例与代码

折线图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "line", "smooth": true, "data": [ 120, 182, 191, 234, 290, 330, 310 ] }, { "name": "Desktop", "type": "line", "smooth": true, "data": [ 90, 132, 151, 184, 240, 270, 290 ] } ] }) }

分组柱状图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "bar", "barMaxWidth": 28, "data": [ 120, 182, 191, 234, 290, 330, 310 ] }, { "name": "Desktop", "type": "bar", "barMaxWidth": 28, "data": [ 90, 132, 151, 184, 240, 270, 290 ] } ] }) }

圆环图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "legend": { "bottom": 12 }, "series": [ { "type": "pie", "radius": [ "42%", "68%" ], "center": [ "50%", "46%" ], "label": { "show": true }, "data": [ { "value": 1048, "name": "Search" }, { "value": 735, "name": "Direct" }, { "value": 580, "name": "Referral" }, { "value": 484, "name": "Social" } ] } ] }) }

散点图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "value" }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "scatter", "symbolSize": 14, "data": [ [ 10, 12 ], [ 18, 24 ], [ 26, 19 ], [ 34, 42 ], [ 42, 36 ], [ 50, 58 ], [ 58, 52 ] ] }, { "name": "Desktop", "type": "scatter", "symbolSize": 14, "data": [ [ 12, 20 ], [ 20, 14 ], [ 28, 31 ], [ 36, 28 ], [ 44, 49 ], [ 52, 42 ], [ 60, 64 ] ] } ] }) }

面积图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "line", "smooth": true, "data": [ 120, 182, 191, 234, 290, 330, 310 ], "areaStyle": { "opacity": 0.2 } }, { "name": "Desktop", "type": "line", "smooth": true, "data": [ 90, 132, 151, 184, 240, 270, 290 ], "areaStyle": { "opacity": 0.2 } } ] }) }

堆叠面积图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "line", "smooth": true, "data": [ 120, 182, 191, 234, 290, 330, 310 ], "areaStyle": { "opacity": 0.2 }, "stack": "total" }, { "name": "Desktop", "type": "line", "smooth": true, "data": [ 90, 132, 151, 184, 240, 270, 290 ], "areaStyle": { "opacity": 0.2 }, "stack": "total" } ] }) }

阶梯折线图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "line", "smooth": false, "data": [ 120, 182, 191, 234, 290, 330, 310 ], "step": "middle" }, { "name": "Desktop", "type": "line", "smooth": false, "data": [ 90, 132, 151, 184, 240, 270, 290 ], "step": "middle" } ] }) }

横向条形图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "value" }, "yAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "series": [ { "name": "Mobile", "type": "bar", "barMaxWidth": 28, "data": [ 120, 182, 191, 234, 290, 330, 310 ] }, { "name": "Desktop", "type": "bar", "barMaxWidth": 28, "data": [ 90, 132, 151, 184, 240, 270, 290 ] } ] }) }

堆叠柱状图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "bar", "barMaxWidth": 28, "data": [ 120, 182, 191, 234, 290, 330, 310 ], "stack": "total" }, { "name": "Desktop", "type": "bar", "barMaxWidth": 28, "data": [ 90, 132, 151, 184, 240, 270, 290 ], "stack": "total" } ] }) }

正负条形图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "value" }, "yAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "series": [ { "name": "Mobile", "type": "bar", "barMaxWidth": 28, "data": [ 120, 182, 191, 234, 290, 330, 310 ] }, { "name": "Desktop", "type": "bar", "barMaxWidth": 28, "data": [ -90, -132, -151, -184, -240, -270, -290 ] } ] }) }

柱线双轴组合图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": [ { "type": "value" }, { "type": "value", "max": 100 } ], "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "bar", "barMaxWidth": 28, "data": [ 120, 182, 191, 234, 290, 330, 310 ] }, { "name": "Desktop", "type": "line", "barMaxWidth": 28, "data": [ 32, 48, 45, 60, 76, 90, 85 ], "yAxisIndex": 1 } ] }) }

饼图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "legend": { "bottom": 12 }, "series": [ { "type": "pie", "radius": "65%", "center": [ "50%", "46%" ], "label": { "show": true }, "data": [ { "value": 1048, "name": "Search" }, { "value": 735, "name": "Direct" }, { "value": 580, "name": "Referral" }, { "value": 484, "name": "Social" } ] } ] }) }

南丁格尔玫瑰图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "legend": { "bottom": 12 }, "series": [ { "type": "pie", "radius": [ "20%", "68%" ], "center": [ "50%", "46%" ], "label": { "show": true }, "data": [ { "value": 1048, "name": "Search" }, { "value": 735, "name": "Direct" }, { "value": 580, "name": "Referral" }, { "value": 484, "name": "Social" } ], "roseType": "area" } ] }) }

多层圆环图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "legend": { "bottom": 12 }, "series": [ { "type": "pie", "radius": [ "48%", "68%" ], "center": [ "50%", "46%" ], "label": { "show": true }, "data": [ { "value": 1048, "name": "Search" }, { "value": 735, "name": "Direct" }, { "value": 580, "name": "Referral" }, { "value": 484, "name": "Social" } ] }, { "type": "pie", "radius": [ "20%", "38%" ], "center": [ "50%", "46%" ], "label": { "position": "inside" }, "data": [ { "name": "Mobile", "value": 60 }, { "name": "Desktop", "value": 40 } ] } ] }) }

气泡图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "value" }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "scatter", "symbolSize": 14, "data": [ { "value": [ 10, 12 ], "symbolSize": 12 }, { "value": [ 18, 24 ], "symbolSize": 18 }, { "value": [ 26, 19 ], "symbolSize": 24 }, { "value": [ 34, 42 ], "symbolSize": 30 }, { "value": [ 42, 36 ], "symbolSize": 36 }, { "value": [ 50, 58 ], "symbolSize": 42 }, { "value": [ 58, 52 ], "symbolSize": 48 } ] }, { "name": "Desktop", "type": "scatter", "symbolSize": 14, "data": [ { "value": [ 12, 20 ], "symbolSize": 12 }, { "value": [ 20, 14 ], "symbolSize": 18 }, { "value": [ 28, 31 ], "symbolSize": 24 }, { "value": [ 36, 28 ], "symbolSize": 30 }, { "value": [ 44, 49 ], "symbolSize": 36 }, { "value": [ 52, 42 ], "symbolSize": 42 }, { "value": [ 60, 64 ], "symbolSize": 48 } ] } ] }) }

涟漪散点图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "legend": { "top": 8, "data": [ "Mobile", "Desktop" ] }, "grid": { "left": 48, "right": 24, "top": 56, "bottom": 72 }, "xAxis": { "type": "value" }, "yAxis": { "type": "value" }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 12 } ], "series": [ { "name": "Mobile", "type": "effectScatter", "symbolSize": 14, "data": [ [ 10, 12 ], [ 18, 24 ], [ 26, 19 ], [ 34, 42 ], [ 42, 36 ], [ 50, 58 ], [ 58, 52 ] ], "rippleEffect": { "scale": 3, "brushType": "stroke" } }, { "name": "Desktop", "type": "effectScatter", "symbolSize": 14, "data": [ [ 12, 20 ], [ 20, 14 ], [ 28, 31 ], [ 36, 28 ], [ 44, 49 ], [ 52, 42 ], [ 60, 64 ] ], "rippleEffect": { "scale": 3, "brushType": "stroke" } } ] }) }

雷达图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "legend": { "bottom": 0 }, "radar": { "radius": "65%", "indicator": [ { "name": "Speed", "max": 100 }, { "name": "Quality", "max": 100 }, { "name": "Cost", "max": 100 }, { "name": "Reliability", "max": 100 }, { "name": "Coverage", "max": 100 } ] }, "series": [ { "type": "radar", "areaStyle": { "opacity": 0.15 }, "data": [ { "name": "Mobile", "value": [ 90, 80, 60, 85, 75 ] }, { "name": "Desktop", "value": [ 70, 95, 80, 90, 60 ] } ] } ] }) }

仪表盘

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "series": [ { "type": "gauge", "min": 0, "max": 100, "radius": "80%", "detail": { "formatter": "{value}%" }, "data": [ { "name": "Completion", "value": 72 } ] } ] }) }

进度仪表盘

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "series": [ { "type": "gauge", "min": 0, "max": 100, "radius": "80%", "detail": { "formatter": "{value}%" }, "data": [ { "name": "Completion", "value": 72 } ], "startAngle": 90, "endAngle": -270, "progress": { "show": true, "roundCap": true }, "pointer": { "show": false }, "axisLine": { "lineStyle": { "width": 20 } }, "axisTick": { "show": false }, "splitLine": { "show": false }, "axisLabel": { "show": false } } ] }) }

漏斗图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "legend": { "bottom": 0 }, "series": [ { "type": "funnel", "top": 20, "bottom": 50, "left": "15%", "width": "70%", "label": { "position": "inside" }, "data": [ { "name": "Visitors", "value": 100 }, { "name": "Signups", "value": 82 }, { "name": "Trials", "value": 64 }, { "name": "Orders", "value": 46 }, { "name": "Renewals", "value": 28 } ] } ] }) }

笛卡尔热力图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "grid": { "left": 55, "right": 25, "top": 25, "bottom": 75 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "type": "category", "data": [ "00:00", "06:00", "12:00", "18:00" ] }, "visualMap": { "min": 0, "max": 100, "orient": "horizontal", "left": "center", "bottom": 0 }, "series": [ { "type": "heatmap", "label": { "show": true }, "data": [ [ 0, 0, 0 ], [ 0, 1, 23 ], [ 0, 2, 46 ], [ 0, 3, 69 ], [ 1, 0, 19 ], [ 1, 1, 42 ], [ 1, 2, 65 ], [ 1, 3, 88 ], [ 2, 0, 38 ], [ 2, 1, 61 ], [ 2, 2, 84 ], [ 2, 3, 6 ], [ 3, 0, 57 ], [ 3, 1, 80 ], [ 3, 2, 2 ], [ 3, 3, 25 ], [ 4, 0, 76 ], [ 4, 1, 99 ], [ 4, 2, 21 ], [ 4, 3, 44 ], [ 5, 0, 95 ], [ 5, 1, 17 ], [ 5, 2, 40 ], [ 5, 3, 63 ], [ 6, 0, 13 ], [ 6, 1, 36 ], [ 6, 2, 59 ], [ 6, 3, 82 ] ] } ] }) }

日历热力图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "calendar": { "top": 65, "left": 60, "right": 30, "range": "2026-10", "cellSize": [ "auto", "auto" ], "yearLabel": { "show": false }, "bottom": 70 }, "visualMap": { "min": 0, "max": 100, "orient": "horizontal", "left": "center", "bottom": 0 }, "series": [ { "type": "heatmap", "coordinateSystem": "calendar", "data": [ [ "2026-10-01", 17 ], [ "2026-10-02", 34 ], [ "2026-10-03", 51 ], [ "2026-10-04", 68 ], [ "2026-10-05", 85 ], [ "2026-10-06", 1 ], [ "2026-10-07", 18 ], [ "2026-10-08", 35 ], [ "2026-10-09", 52 ], [ "2026-10-10", 69 ], [ "2026-10-11", 86 ], [ "2026-10-12", 2 ], [ "2026-10-13", 19 ], [ "2026-10-14", 36 ], [ "2026-10-15", 53 ], [ "2026-10-16", 70 ], [ "2026-10-17", 87 ], [ "2026-10-18", 3 ], [ "2026-10-19", 20 ], [ "2026-10-20", 37 ], [ "2026-10-21", 54 ], [ "2026-10-22", 71 ], [ "2026-10-23", 88 ], [ "2026-10-24", 4 ], [ "2026-10-25", 21 ], [ "2026-10-26", 38 ], [ "2026-10-27", 55 ], [ "2026-10-28", 72 ], [ "2026-10-29", 89 ], [ "2026-10-30", 5 ], [ "2026-10-31", 22 ] ] } ] }) }

K 线图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "grid": { "left": 55, "right": 25, "top": 25, "bottom": 65 }, "xAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ] }, "yAxis": { "scale": true }, "dataZoom": [ { "type": "inside" }, { "type": "slider", "height": 20, "bottom": 0 } ], "series": [ { "type": "candlestick", "data": [ [ 20, 25, 18, 28 ], [ 25, 23, 20, 29 ], [ 23, 30, 21, 32 ], [ 30, 28, 26, 34 ], [ 28, 35, 27, 38 ], [ 35, 33, 31, 39 ], [ 33, 40, 32, 42 ] ] } ] }) }

箱线图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "grid": { "left": 50, "right": 25, "top": 25, "bottom": 40 }, "xAxis": { "type": "category", "data": [ "Mobile", "Desktop", "Search", "Social" ] }, "yAxis": { "type": "value" }, "series": [ { "type": "boxplot", "data": [ [ 5, 15, 25, 35, 50 ], [ 10, 25, 40, 55, 70 ], [ 8, 20, 32, 48, 65 ], [ 12, 30, 45, 62, 85 ] ] }, { "type": "scatter", "data": [ [ 0, 65 ], [ 2, 80 ], [ 3, 95 ] ] } ] }) }

关系图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "series": [ { "type": "graph", "layout": "circular", "roam": true, "symbolSize": 64, "label": { "show": true }, "edgeSymbol": [ "none", "arrow" ], "lineStyle": { "curveness": 0.15 }, "data": [ { "name": "Client" }, { "name": "Gateway" }, { "name": "Service" }, { "name": "Storage" }, { "name": "Cache" } ], "links": [ { "source": "Client", "target": "Gateway" }, { "source": "Gateway", "target": "Service" }, { "source": "Service", "target": "Storage" }, { "source": "Service", "target": "Cache" }, { "source": "Client", "target": "Cache" } ], "top": 35, "bottom": 35 } ] }) }

树形图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "series": [ { "type": "tree", "top": 30, "bottom": 30, "left": "12%", "right": "18%", "symbolSize": 12, "initialTreeDepth": -1, "label": { "position": "left" }, "leaves": { "label": { "position": "right" } }, "data": [ { "name": "EUI", "children": [ { "name": "Interface", "children": [ { "name": "QML" }, { "name": "Controls" } ] }, { "name": "Engine", "children": [ { "name": "C++" }, { "name": "Rendering" } ] } ] } ] } ] }) }

径向树图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "series": [ { "type": "tree", "top": 30, "bottom": 30, "left": "10%", "right": "10%", "symbolSize": 12, "initialTreeDepth": -1, "label": { "position": "right", "distance": 8 }, "leaves": { "label": { "position": "right" } }, "data": [ { "name": "EUI", "children": [ { "name": "Interface", "children": [ { "name": "QML" }, { "name": "Controls" } ] }, { "name": "Engine", "children": [ { "name": "C++" }, { "name": "Rendering" } ] } ] } ], "layout": "radial" } ] }) }

矩形树图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "series": [ { "type": "treemap", "top": 15, "bottom": 35, "left": 10, "right": 10, "upperLabel": { "show": true, "height": 24, "color": "#303133" }, "data": [ { "name": "Mobile", "value": 60, "children": [ { "name": "Search", "value": 35 }, { "name": "Social", "value": 25 } ] }, { "name": "Desktop", "value": 40, "children": [ { "name": "Direct", "value": 25 }, { "name": "Referral", "value": 15 } ] } ], "itemStyle": { "borderColor": "#e8edf4", "borderWidth": 3, "gapWidth": 3 } } ] }) }

旭日图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "series": [ { "type": "sunburst", "radius": [ "15%", "80%" ], "label": { "rotate": "radial" }, "data": [ { "name": "Mobile", "value": 60, "children": [ { "name": "Search", "value": 35 }, { "name": "Social", "value": 25 } ] }, { "name": "Desktop", "value": 40, "children": [ { "name": "Direct", "value": 25 }, { "name": "Referral", "value": 15 } ] } ] } ] }) }

桑基图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "item" }, "series": [ { "type": "sankey", "left": 35, "right": 90, "top": 25, "bottom": 25, "lineStyle": { "color": "source", "curveness": 0.5 }, "data": [ { "name": "Search" }, { "name": "Social" }, { "name": "Mobile" }, { "name": "Desktop" }, { "name": "Orders" } ], "links": [ { "source": "Search", "target": "Mobile", "value": 40 }, { "source": "Search", "target": "Desktop", "value": 25 }, { "source": "Social", "target": "Mobile", "value": 30 }, { "source": "Social", "target": "Desktop", "value": 15 }, { "source": "Mobile", "target": "Orders", "value": 55 }, { "source": "Desktop", "target": "Orders", "value": 30 } ] } ] }) }

平行坐标图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "parallel": { "left": 55, "right": 55, "top": 40, "bottom": 35 }, "parallelAxis": [ { "dim": 0, "name": "Speed", "min": 0, "max": 100 }, { "dim": 1, "name": "Quality", "min": 0, "max": 100 }, { "dim": 2, "name": "Cost", "min": 0, "max": 100 }, { "dim": 3, "name": "Reliability", "min": 0, "max": 100 }, { "dim": 4, "name": "Coverage", "min": 0, "max": 100 } ], "series": [ { "type": "parallel", "lineStyle": { "width": 2, "opacity": 0.6 }, "data": [ [ 90, 80, 60, 85, 75 ], [ 70, 95, 80, 90, 60 ], [ 60, 70, 95, 65, 90 ], [ 85, 65, 70, 95, 80 ] ] } ] }) }

主题河流图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "bottom": 0 }, "singleAxis": { "type": "time", "top": 30, "bottom": 60 }, "series": [ { "type": "themeRiver", "data": [ [ "2026-10-01", 23, "Mobile" ], [ "2026-10-01", 24, "Desktop" ], [ "2026-10-01", 25, "Search" ], [ "2026-10-02", 26, "Mobile" ], [ "2026-10-02", 28, "Desktop" ], [ "2026-10-02", 30, "Search" ], [ "2026-10-03", 29, "Mobile" ], [ "2026-10-03", 32, "Desktop" ], [ "2026-10-03", 35, "Search" ], [ "2026-10-04", 32, "Mobile" ], [ "2026-10-04", 36, "Desktop" ], [ "2026-10-04", 40, "Search" ], [ "2026-10-05", 35, "Mobile" ], [ "2026-10-05", 40, "Desktop" ], [ "2026-10-05", 45, "Search" ], [ "2026-10-06", 38, "Mobile" ], [ "2026-10-06", 44, "Desktop" ], [ "2026-10-06", 50, "Search" ], [ "2026-10-07", 41, "Mobile" ], [ "2026-10-07", 48, "Desktop" ], [ "2026-10-07", 20, "Search" ], [ "2026-10-08", 44, "Mobile" ], [ "2026-10-08", 52, "Desktop" ], [ "2026-10-08", 25, "Search" ], [ "2026-10-09", 47, "Mobile" ], [ "2026-10-09", 21, "Desktop" ], [ "2026-10-09", 30, "Search" ], [ "2026-10-10", 50, "Mobile" ], [ "2026-10-10", 25, "Desktop" ], [ "2026-10-10", 35, "Search" ], [ "2026-10-11", 53, "Mobile" ], [ "2026-10-11", 29, "Desktop" ], [ "2026-10-11", 40, "Search" ], [ "2026-10-12", 21, "Mobile" ], [ "2026-10-12", 33, "Desktop" ], [ "2026-10-12", 45, "Search" ], [ "2026-10-13", 24, "Mobile" ], [ "2026-10-13", 37, "Desktop" ], [ "2026-10-13", 50, "Search" ], [ "2026-10-14", 27, "Mobile" ], [ "2026-10-14", 41, "Desktop" ], [ "2026-10-14", 20, "Search" ] ], "label": { "show": false } } ] }) }

极坐标柱状图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "legend": { "bottom": 0 }, "polar": { "radius": "70%" }, "angleAxis": { "type": "category", "data": [ "Mon", "Tue", "Wed", "Thu", "Fri" ] }, "radiusAxis": {}, "series": [ { "name": "Mobile", "type": "bar", "coordinateSystem": "polar", "stack": "total", "data": [ 12, 18, 15, 25, 20 ] }, { "name": "Desktop", "type": "bar", "coordinateSystem": "polar", "stack": "total", "data": [ 8, 12, 10, 15, 18 ] } ] }) }

象形柱图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "grid": { "left": 50, "right": 25, "top": 25, "bottom": 40 }, "xAxis": { "type": "category", "data": [ "QML", "C++", "Qt" ] }, "yAxis": { "type": "value" }, "series": [ { "type": "pictorialBar", "symbol": "roundRect", "symbolRepeat": true, "symbolSize": [ 35, 10 ], "symbolMargin": 3, "data": [ 75, 92, 86 ] } ] }) }

路径流向图

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": {}, "grid": { "left": 35, "right": 35, "top": 25, "bottom": 30 }, "xAxis": { "min": 0, "max": 100 }, "yAxis": { "min": 0, "max": 100 }, "series": [ { "type": "lines", "coordinateSystem": "cartesian2d", "effect": { "show": true, "symbolSize": 6 }, "lineStyle": { "width": 2, "curveness": 0.2 }, "data": [ { "coords": [ [ 10, 20 ], [ 90, 80 ] ] }, { "coords": [ [ 10, 80 ], [ 90, 20 ] ] }, { "coords": [ [ 10, 50 ], [ 90, 50 ] ] } ] } ] }) }

Dataset 与编码映射

此组件使用 Qt WebEngine。请在 Gallery 中运行这些图表示例。

在 Gallery 中体验 ↗

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EECharts { height: 360 width: parent.width option: ({ "tooltip": { "trigger": "axis" }, "legend": { "bottom": 0 }, "grid": { "left": 50, "right": 25, "top": 25, "bottom": 65 }, "dataset": { "source": [ [ "Product", "Mobile", "Desktop" ], [ "QML", 75, 90 ], [ "C++", 85, 70 ], [ "Qt", 95, 80 ] ] }, "xAxis": { "type": "category" }, "yAxis": {}, "series": [ { "type": "bar", "encode": { "x": "Product", "y": "Mobile" } }, { "type": "bar", "encode": { "x": "Product", "y": "Desktop" } } ] }) }

属性

属性说明取值与默认值

enabledbool

是否允许交互；false 时控件禁用。

默认值true

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

optionvar

完整 ECharts 配置对象，必须可序列化为 JSON，不能包含函数。

默认值({})

rendereralias

图表使用的渲染器。

"canvas" / "svg"

默认值别名：bridge.renderer

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

errorStringalias只读

最近一次操作失败的说明。

默认值别名：bridge.errorString

readyalias只读

渲染器或图表是否已准备完成。

默认值别名：bridge.ready

supportedalias只读

当前渲染后端是否支持 ECharts 的 WebEngine 视图。

默认值别名：bridge.supported

信号

签名作用

finished()

图表完成渲染时触发。

failed(string message)

操作失败时触发，message 为错误信息。

clicked(var parameters)

点击图表数据时触发，parameters 包含系列、数据项和值等信息。

dataZoomed(var parameters)

图表缩放范围变化时触发，parameters 为缩放事件数据。

legendSelected(var parameters)

图例选择变化时触发，parameters 包含当前图例选择信息。

方法

签名作用

clear()

清空组件当前内容或选择。

resize()

根据当前容器尺寸重新调整图表。

appendData(data)

向图表追加数据。

dispatchAction(action)

执行 action 指定的图表动作，例如高亮或缩放。

setOption(option, settings)

应用图表配置 option；settings 控制合并和更新方式。