From 1ed4099a6044c16c952d3719430584450ecb6ffb Mon Sep 17 00:00:00 2001 From: Davont Date: Thu, 24 Oct 2024 10:56:27 +0800 Subject: [PATCH 1/8] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9chart=E6=A1=88?= =?UTF-8?q?=E4=BE=8B=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sites/demos/apis/chart-autonavi-map.js | 396 ++----- examples/sites/demos/apis/chart-baidu-map.js | 396 ++----- examples/sites/demos/apis/chart-bar.js | 1009 +++++++++++++---- examples/sites/demos/apis/chart-boxplot.js | 496 ++++---- examples/sites/demos/apis/chart-candle.js | 618 +++++----- examples/sites/demos/apis/chart-funnel.js | 576 +++++----- examples/sites/demos/apis/chart-gauge.js | 679 +++++++---- examples/sites/demos/apis/chart-graph.js | 338 +----- examples/sites/demos/apis/chart-heatmap.js | 683 ++++++----- examples/sites/demos/apis/chart-histogram.js | 1009 +++++++++++++---- examples/sites/demos/apis/chart-line.js | 916 +++++++++++---- examples/sites/demos/apis/chart-liquidfill.js | 502 ++++---- examples/sites/demos/apis/chart-map.js | 340 +----- examples/sites/demos/apis/chart-pie.js | 878 ++++++++++---- examples/sites/demos/apis/chart-process.js | 432 ++++++- examples/sites/demos/apis/chart-radar.js | 675 ++++++----- examples/sites/demos/apis/chart-ring.js | 877 ++++++++++---- examples/sites/demos/apis/chart-sankey.js | 511 +++++---- examples/sites/demos/apis/chart-scatter.js | 852 ++++++++++---- examples/sites/demos/apis/chart-sunburst.js | 485 +++----- examples/sites/demos/apis/chart-tree.js | 474 +++----- examples/sites/demos/apis/chart-waterfall.js | 1009 +++++++++++++---- examples/sites/demos/apis/chart-wordcloud.js | 494 ++++---- examples/sites/src/assets/markdown.less | 128 +++ examples/sites/src/assets/md-preview.less | 208 ++++ examples/sites/src/main.js | 2 + .../src/views/components/async-highlight.vue | 4 +- .../sites/src/views/components/components.vue | 21 +- packages/vue/src/huicharts/src/index.ts | 2 +- 29 files changed, 8980 insertions(+), 6030 deletions(-) create mode 100644 examples/sites/src/assets/markdown.less create mode 100644 examples/sites/src/assets/md-preview.less diff --git a/examples/sites/demos/apis/chart-autonavi-map.js b/examples/sites/demos/apis/chart-autonavi-map.js index e1d900451d..af7acbd625 100644 --- a/examples/sites/demos/apis/chart-autonavi-map.js +++ b/examples/sites/demos/apis/chart-autonavi-map.js @@ -2,342 +2,65 @@ export default { mode: ['pc'], apis: [ { - name: 'chart', + name: 'chart-autonavi-map', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', + name: 'key', type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', + defaultValue: '无', + typeAnchorName: 'Key', desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' + 'zh-CN': '高德地图秘钥', + 'en-US': 'Gaode Map Key' }, mode: ['pc'], pcDemo: '' }, { - name: 'theme-name', + name: 'url', type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + defaultValue: '见详情', + typeAnchorName: 'Url', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '高德地图前缀地址', + 'en-US': 'Gaode map prefix address' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', + name: 'v', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", + defaultValue: '1.4.3', + typeAnchorName: 'V', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '高德地图版本', + 'en-US': 'Gaode Map Version' }, mode: ['pc'], pcDemo: '' }, { - name: 'options', + name: 'amap', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option', - type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'AMap', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '高德地图配置项', + 'en-US': 'Gaode Map Configuration Item' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'series', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Series', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '高德地图插件配置项', + 'en-US': 'Gaode Map Plugin Configuration Item' }, mode: ['pc'], pcDemo: '' @@ -390,18 +113,67 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'AMap', + type: 'interface', + code: ` + 格式示例： + +amap: { + viewMode: '3D', + resizeEnable: true, + center: [118.79322240845, 31.936064370321], + zoom: 10 + }, + +说明：通过配置\`amap\`属性，修改高德地图的初始配置属性。
+\`viewMode\`：高德地图的3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验。
+\`resizeEnable\`：是否开启高德地图resize。
+\`center\`：高德地图中心经纬度。
+\`zoom\`：高德地图缩放级别。
+其他更多属性配置可见Echarts高德地图扩展的git网址：https://github.com/plainheart/echarts-extension-amap/blob/master/README.zh-CN.md。` + }, + { + name: 'Key', + type: 'interface', + code: ` + 说明：通过配置\`key\`属性，修改高德地图api的密钥。
` + }, + { + name: 'Series', + type: 'interface', + code: ` + 格式示例： + + series: [ + { + type: 'scatter', + coordinateSystem: 'amap', + data: [[118.79, 31.936, 8], [119, 32, 20]], + encode: { + value: 2 + } + } + ] + +说明：通过配置\`series\`属性，修改高德地图的初始配置属性。
+其他更多属性配置可见Echarts高德地图扩展的git网址：https://github.com/plainheart/echarts-extension-amap/blob/master/README.zh-CN.md。` + }, + { + name: 'Url', + type: 'interface', + code: ` + 说明：通过配置\`url\`属性，修改高德地图api的前缀地址。
+` + }, + { + name: 'V', type: 'interface', code: ` - interface Options { - key: string // 高德地图密钥 - url: string // 高德地图密钥 - v: string // 高德地图版本,默认值: 1.4.3 - amap: object // 高德地图配置项 默认不触发 - series: object // 高德地图插件配置项 - }` + 说明：通过配置v属性，修改高德地图api的版本号，默认1.4.3。
+` } ] } diff --git a/examples/sites/demos/apis/chart-baidu-map.js b/examples/sites/demos/apis/chart-baidu-map.js index 8d5d00393f..2612cbb346 100644 --- a/examples/sites/demos/apis/chart-baidu-map.js +++ b/examples/sites/demos/apis/chart-baidu-map.js @@ -4,346 +4,68 @@ export default { { name: 'chart-baidu-map', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', + name: 'key', type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + defaultValue: '无', + typeAnchorName: 'Key', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '百度地图秘钥', + 'en-US': 'Baidu Map Key' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', + name: 'url', type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + defaultValue: '见详情', + typeAnchorName: 'Url', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '百度地图前缀地址', + 'en-US': 'BaIdu map prefix address' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', + name: 'v', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', + defaultValue: '1.4.3', + typeAnchorName: 'V', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '百度地图版本', + 'en-US': 'Baidu Map Version' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', + name: 'bmap', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'BMap', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '百度地图配置项', + 'en-US': 'Baidu Map Configuration Item' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', + name: 'series', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Series', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '百度地图插件配置项', + 'en-US': 'Baidu Map Plugin Configuration Item' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,18 +112,66 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'BMap', + type: 'interface', + code: `

格式示例：

+
bmap: {
+        center: [118.775859, 31.985021],
+        zoom: 17,
+        roam: true,
+        mapStyle: {}
+    }
+
+

说明：通过配置bmap属性，修改百度地图的初始配置属性。

+center：百度地图中心经纬度。

+zoom：百度地图缩放级别。

+roam：是否开启拖拽缩放，可选值为：'scale', 'move', 'true'，默认true关闭。

+mapStyle：百度地图的自定义样式。

+其他更多属性配置可见Echarts百度地图扩展的git网址：https://github.com/apache/echarts/tree/release/extension-src/bmap。

+
` + }, + { + name: 'Key', + type: 'interface', + code: `

说明：通过配置key属性，修改百度地图api的密钥。

+需要用户获取在百度地图开发者平台申请的密钥，申请网站：https://lbsyun.baidu.com/

+
` + }, + { + name: 'Series', + type: 'interface', + code: `

格式示例：

+
series: [{
+        type: 'scatter',
+        coordinateSystem: 'bmap',
+        data: [[118.775859, 31.985021, 1]],
+        encode: {
+            value: 30
+        }
+    }]
+
+

说明：通过配置series属性，修改百度地图的初始配置属性。

+center：百度地图中心经纬度。

+zoom：百度地图缩放级别。

+roam：是否开启拖拽缩放，可以只设置 ‘scale’ 或者 ‘move’。默认关闭。

+mapStyle：百度地图的自定义样式。

+其他更多属性配置可见Echarts百度地图扩展的git网址：https://github.com/apache/echarts/tree/release/extension-src/bmap。

+
` + }, + { + name: 'V', + type: 'interface', + code: `

说明：通过配置v属性，修改百度地图api的版本号，默认2.0。

+
` + }, + { + name: 'Url', type: 'interface', - code: ` - interface Options { - key: string // 百度地图密钥 - url: string // 百度地图密钥 - v: string // 百度地图版本,默认值: 1.4.3 - bmap: object // 百度地图配置项 默认不触发 - series: object // 百度地图插件配置项 - }` + code: `

说明：通过配置url属性，修改百度地图api的前缀地址。

+
` } ] } diff --git a/examples/sites/demos/apis/chart-bar.js b/examples/sites/demos/apis/chart-bar.js index cf5e288af0..1ef3431ce7 100644 --- a/examples/sites/demos/apis/chart-bar.js +++ b/examples/sites/demos/apis/chart-bar.js @@ -4,340 +4,219 @@ export default { { name: 'chart-bar', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', + name: 'theme', type: 'string', - defaultValue: "'400px'", + defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', + name: 'legend', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Legend', desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' + 'zh-CN': '图例配置, 默认显示', + 'en-US': 'Legend configuration, default display' }, mode: ['pc'], pcDemo: '' }, { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + name: 'xAxis', + type: 'string | object', + defaultValue: '图表数据data数据中data[0]对象的第一个key值', + typeAnchorName: 'XAxis', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '配置x轴', + 'en-US': 'Configure x-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', + name: 'yAxis', + type: 'string | object', + defaultValue: '默认显示', + typeAnchorName: 'YAxis', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '配置y轴', + 'en-US': 'Configure y-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', + name: 'padding', type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + name: 'color', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Color', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', + name: 'tooltip', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'options', + name: 'dataZoom', type: 'object', - defaultValue: '', + defaultValue: '默认不显示', + typeAnchorName: 'DataZoom', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '区域缩放轴配置', + 'en-US': 'Regional scaling axis configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', + name: 'dataRules', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'DataRules', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '数据规则', + 'en-US': 'Data rules' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', + name: 'event', type: 'object', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Data', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'type', + type: 'string', + defaultValue: '-', + typeAnchorName: 'Type', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '配置柱状图类型', + 'en-US': 'Configure bar chart type' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', - type: 'object', - defaultValue: '', + name: 'topTipHtml', + type: 'function', + defaultValue: '默认不显示', + typeAnchorName: 'TopTipHtml', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '顶部位置悬浮提示框', + 'en-US': 'Top position floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'itemStyle', type: 'object', - defaultValue: '', + defaultValue: "{barWidth: 8,barGap: '60%'}", + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '柱体样式', + 'en-US': 'Column style' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', - type: 'object', - defaultValue: '', + name: 'direction', + type: 'string', + defaultValue: '-', + typeAnchorName: 'Direction', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '柱体方向', + 'en-US': 'Column direction' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'label', + type: 'object | array', + defaultValue: '默认不显示', + typeAnchorName: 'Label', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '柱体文本', + 'en-US': 'Column Text' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'lineDataName', + type: 'string', + typeAnchorName: 'LineDataName', + defaultValue: '-', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '柱状图更改为折线图的数据名', + 'en-US': 'Change the data name from bar chart to line chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'markline', type: 'object', - defaultValue: '', + typeAnchorName: 'Markline', + defaultValue: '-', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '阈值线配置', + 'en-US': 'Threshold line configuration' }, mode: ['pc'], pcDemo: '' @@ -392,33 +271,669 @@ export default { ], types: [ { - name: 'Options', + name: 'Data', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - legend: object // 图例配置, 默认显示 - xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值 - yAxis: array | object // 配置y轴, 默认值: [50,20,50,20] - padding: array // 图表内边距值, 默认值: [50,20,50,20] - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认显示 - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - dataZoom: object // 区域缩放轴配置, 默认不显示 - linearGradient: object // 线性渐变 - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - type: string // 配置柱状图类型, 默认值: bar - stepGradient: array // 柱体分段渐变 - axisPointer: object // 坐标指示器(数据背景区域样式),(支持 rgb 颜色、英文单词颜色、十六进制颜色), 默认值: rgba(25,25,25,0.08) - topTipHtml: function // 顶部位置悬浮提示框, 默认不显示 - itemStyle: object // 图表数据点文本样式, 默认值: {barWidth: 8, barGap: '60%'} - direction: string // 柱体方向, 默认值: vertical - label: object | array // 柱体文本, 默认不显示 - lineDataName: array // 柱状图更改为折线图的数据名 - markline: object // 阈值线配置, 默认不显示 - - }` + code: `

格式：

+
普通柱状图  堆叠柱状图  瀑布柱状图
+data: [
+        { "Month": 'Jan', "Domestic": 33, "Abroad": 37 },
+        { "Month": 'Feb', "Domestic": 27, "Abroad": 39 },
+        { "Month": 'Mar', "Domestic": 31, "Abroad": 20 },
+        ...
+]
+
+
双向柱状图
+data: [
+        { "Month": 'Jan', "Domestic": 33, "Abroad": -37 },
+        { "Month": 'Feb', "Domestic": 27, "Abroad": -39 },
+        { "Month": 'Mar', "Domestic": 31, "Abroad": -20 },
+        ...
+]
+
+
区间柱状图
+data: [
+        { "Month": 'Jan', "Domestic": [5,20], "Abroad": [5,23] },
+        { "Month": 'Feb', "Domestic": [10,30], "Abroad": [8,25] },
+        { "Month": 'Mar', "Domestic": [8,25], "Abroad": [2,20] },
+        ...
+]
+
+

说明：图表数据 ， Month 为 x 轴数据 ， Domestic 、 Abroad 为 柱状图数据名称 ， Month 及柱状图数据名称可更换

+
` + }, + { + name: 'Direction', + type: 'interface', + code: `

默认值：vertical（垂直）

+

可选值：vertical（垂直） , horizontal（水平）

+

说明：配置柱状图的方向

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

默认值：itemStyle:{barWidth:8,barGap:'60%'}

+

说明：配置柱形的样式

+

itemStyle.barWidth非必填有默认值Number +

默认值：8 +

说明：配置柱形的宽度 +

itemStyle.barGap非必填有默认值String +

默认值：60% +

说明：配置柱形与柱形之间的间距 +

itemStyle.color非必填无默认值Function +

格式： +d + color: params =& gt; { + if(params.dataIndex % 2 == 0) { + return "#777777"; + } + return "#1F55B5"; +} + +

说明：根据数据数组下标配置特定的柱型颜色 +

itemStyle.barMinHeight非必填无默认值Number | string +

格式2% | 2 +

说明：设置柱子的最小高度，可以填具体的值或者百分比，如果填数值，将按echarts原生功能以像素来显示，如果填百分比，则是按数据最大值的百分比计算最小数据，如果小于最小数据就按最小数据显示，建议使用百分比 +

` + }, + { + name: 'Label', + type: 'interface', + code: `

默认值：

+
对象形式
+label:{
+    show:false,
+    position:'inside',
+    offset:[0,0]
+}
+
+
数组形式
+label:[
+    {
+        show:false,
+        position:'inside',
+        offset:[0,0]
+    },
+]
+
+

说明：柱状图的柱形文本配置

+label='Object' , 所有的柱形统一配置

+label='Array' , 可在其内部定义多个样式 ， 按顺序依次对不同名称的柱形进行配置

+

label.show非必填有默认值Boolean +

默认值：false +

说明：柱状图的柱形文本是否显示 +

label.position非必填有默认值String +

默认值：inside（内部） +

可选值：inside（内部） ， top（外部靠顶） ， bottom（外部靠底） ， left（外部靠左） ， right（外部靠右） ， insideLeft（内部靠左） ， insideRight（内部靠右） ， insideTop（内部靠上） ， insideBottom（内部靠底） ， insideTopLeft（内部左上） ， insideBottomLeft（内部左下） ， insideTopRight（内部右上） ， insideBottomRight（内部右下） +

说明：柱状图的柱形文本位置 +

label.offset非必填有默认值Array +

默认值：[0,0] +

说明：柱状图的柱形文本横向及纵向偏移量 +

label.formatter非必填无默认值Function +

格式： +

formatter:params=>{
+            if(params.name==='总进尺'){
+                if(params.seriesName==='Domestic'){
+                    params.value=2120
+                    params.data=2120
+                }else if(params.seriesName==='Abroad'){
+                    params.data=2000
+                    params.value=2120
+                }
+                return params.data+'m'
+            }
+           return params.data+'t'
+        }
+
+

说明：自定义柱状图的柱形文本信息 +

` + }, + { + name: 'LineDataName', + type: 'interface', + code: `

说明：需要转换为折线图的数据名称

+折柱混合图是建立在 barChart 的基础上实现的（不可颠倒），除了折线图的预测线 predict 属性，其它属性都能支持

+
` + }, + { + name: 'Markline', + type: 'interface', + code: `

格式：

+
markLine:{
+    top:38,
+    bottom:20,
+    color:'red'
+}
+
+

说明：柱状图中阈值线的相关配置

+

markLine.top非必填无默认值Number +

说明：配置将哪根 y 轴刻度线做为上阈值线 ， markLine.top 必须大于 MarkLine.bottom +

markLine.bottom非必填无默认值Number +

说明：配置将哪根 y 轴刻度线做为下阈值线 ， markLine.top 必须大于 MarkLine.bottom +

markLine.color非必填有默认值String +

默认值：#f43146 +

说明：配置阈值线颜色 +

` + }, + { + name: 'TopTipHtml', + type: 'interface', + code: `

默认值：

+
topTipHtml 回调函数控制自定义悬浮框：
+( params: Array,
+  ticket: string,
+  callback: (ticket: string, html: string)
+) => string | HTMLElement | HTMLElement[]
+
+

格式：

+
topTipHtml: (params, ticket, callback) => {
+  let htmlString = '';
+  htmlString+=params.value
+  return htmlString;
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+与 tooltip 区别：它只会定位在图像顶部，不随鼠标移动而改变位置;划入 axisPointer 区域不会使其展示，只有划到对应数据才会显型
+详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Type', + type: 'interface', + code: `

默认值：bar（普通柱形）

+

可选值：bar（普通柱形） ， range（区间柱形） ， stack（堆叠柱形） ， both-sides（双向柱形） ， water-fall（瀑布柱形）

+

说明：配置柱状图类型

+type='bar'柱状图为普通柱状图 ， 通过柱形的高度来表现数据的大小

+type='range'柱状图为区间柱状图 ， 用于描述数据从最小值到最大值的区域
type='stack'柱状图为堆叠柱状图 , 用于展示数据叠加效果的区域
type='both-sides'柱状图为双向柱状图 , 两者数据值一正一负 ， 数据拼凑形成柱形
type='water-fall'柱状图为瀑布柱状图 ， 此时图中会自动添加一个 Total(总和)数据的柱形

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'XAxis', + type: 'interface', + code: `

默认值：图表数据data数组中data[0]对象的第一个 key 值

+

格式：

+
String类型
+xAxis:'Month'
+
+

说明：设置图表数据中哪个 key 值作为折线图的横坐标数据

+

格式：

+
Object类型
+xAxis:{
+    data:'Month'，
+    name:'Utils',
+    line:{
+        show:true,
+        lineStyle:{
+            color:'red',
+            type:'dashed',
+            width:2
+        }
+    },
+    interval:2,
+    fullGrid:true,
+    labelRotate:45,
+    ellipsis:{
+        overflow:'truncate',
+        labelWidth:20
+    },
+    nameLocation:'end',
+    nameTextStyle:{
+        fontSize:12,
+        color:#4e4e4e
+    }
+}
+
+

说明：自定义 x 轴配置(将原先的 String 类型的 xAxis、xAxisName、xAxisLine、xAxisInterval、xAxisFullGrid、xAxisLabelRotate、xAxisEllipsis 属性统一整合到 Object 类型的 xAxis 内部)

+

xAxis.data非必填有默认值String +

说明：设置图表数据中哪个 key 值作为折线图的横坐标数据(xAxis.data即String类型的xAxis值) +

xAxis.name非必填无默认值String +

说明：配置x轴文本名称（xAxis.name即xAxisName） +

xAxis.line非必填有默认值Object +

默认值： +

xAxisLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    },
+    text:{
+        color:theme==='dark'?#bbbbbb:#4e4e4e
+    }
+}
+
+

说明：设置 x 轴样式(xAxis.line即xAxisLine) +

xAxis.interval非必填有默认值Number | Function +

默认值：0 +

格式： +

// 当xAxisInterval为2时，x轴的label会每隔2个显示
+xAxisInterval: 2
+
+
// 当xAxisInterval为function时，x轴的label会根据函数的返回结果展示。
+// 返回true表示显示
+// 返回false表示不显示
+// index表示当前x轴数据的索引,value表示当前x轴数据的值
+xAxisInterval: (index,value) => {
+    if (index % 24 === 0) {
+        return true;
+    }
+    if (index === 61) {
+        return true;
+    }
+    return  false;
+},
+
+

说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（xAxis.interval即xAxisInterval） +

xAxis.fullGrid非必填有默认值Boolean +

默认值：false +

说明：设置图表是否顶格到 x 轴左右两边(xAxis.fullGrid即xAxisFullGrid) +

xAxis.show非必填有默认值Boolean +

默认值：true +

说明：设置x坐标轴是否显示 +

xAxis.labelRotate非必填无默认值Number +

默认值：false +

说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(xAxis.labelRotate即xAxisLabelRotate) +

xAxis.ellipsis非必填有默认值Object +

默认值：xAxis.ellipsis:{overflow:'none'} +

格式： +

xAxis.ellipsis:{
+    overflow:'truncate',
+    width:20
+}
+
+

说明：设置 x 轴刻度文本过长展示方式(xAxis.ellipsis即xAxisEllipsis) +

xAxis.nameLocation非必填有默认值String +

默认值：end +

可选值：end、center||middle、start +

说明：设置x轴文本位置 +

xAxis.nameTextStyle非必填有默认值Object +

默认值：{fontSize:12,color:'#4e4e4e'} +

说明：设置x轴文本样式 +

` + }, + { + name: 'YAxis', + type: 'interface', + code: `

格式：

+
数组格式
+yAxis: [
+    {
+        max:60,
+        min:0,
+        interval:10,
+        position:'left',
+        dataName:['Domestic'],
+        name:'value',
+        unit:'元',
+        nameTextStyle:{
+            padding:[0,0,0,-45]
+        }
+    },
+    {
+        max:90,
+        min: 0,
+        interval:15,
+        position:'right',
+        dataName:['Abroad'],
+        name: 'kal',
+        unit: '$',
+        offset:45,
+        nameTextStyle:{
+            padding:[0,-45,0,0]
+        }
+    }
+    ],
+
+
对象格式
+yAxis:
+    {
+        max: 60,
+        min: 0,
+        interval:5,
+        position:'right',
+        name: 'Percent(%)',
+        unit: '%',
+        minInterval:12,
+        maxInterval:8
+    },
+
+

说明：自定义 y 轴配置

+

yAxis.max非必填无默认值Number +

说明：自定义 y 轴最大值 +

yAxis.min非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴最小值 +

yAxis.interval非必填无默认值Number +

说明：自定义 y 轴数值刻度 +

yAxis.splitNumber非必填无默认值Number +

说明：自定义 y 轴分割线数量 ， 在定义 yAXis.interval 时 ， 此属性失效 +

yAxis.position非必填有默认值String +

默认值：left +

可选值：left 、 right +

说明：自定义 y 轴位置 +

yAxis.name非必填无默认值String +

说明：自定义 y 轴名称 +

yAxis.nameTextStyle非必填无默认值Object +

格式： +

nameTextStyle:
+    {
+        align:'right',
+        padding:[0,0,0,0],
+        color:'red',
+        fontSize:30
+    }
+
+

说明：自定义 y 轴标题文本样式 +

yAxis.unit非必填无默认值String +

说明：自定义 y 轴刻度单位 +

yAxis.dataName非必填有默认值Array +

默认值：全部的折线数据 +

说明：自定义哪条折线数据采用此 y 轴的属性，该属性仅在 yAxis 类型为 Array 时会生效。当有折线数据名未被 dataName 所包含，改折线数据样式按照 yAxis[0]配置 +

yAxis.offset非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴相对于默认位置的偏移量 +

yAxis.show非必填有默认值Boolean +

默认值：true +

说明：y 轴是否显示 +

yAxis.labelTextStyle非必填有默认值Object +

默认值：{color:theme==='dark'?#bbbbbb:#4e4e4e,fontSize:12} +

说明：配置y轴刻度文本样式 +

yAxis.minInterval非必填无默认值Number +

说明：配置y轴最小刻度间隔 +

yAxis.maxInterval非必填无默认值Number +

说明：配置y轴最大刻度间隔 +

yAxis.splitLine非必填有默认值Object +

默认值： +

splitLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    }
+}
+
+

说明：配置y轴刻度线样式 +

` + }, + { + name: 'DataZoom', + type: 'interface', + code: `

默认值：

+
dataZoom:{
+    start:0,
+    end:100,
+    show:false,
+    position:{
+        left:36,
+        bottom:20
+    },
+    height:24
+}
+
+

说明：设置折线图区域缩放轴是否展示及位置

+

dataZoom.start非必填有默认值Number +

默认值：0 +

说明：区域缩放轴的数据窗口范围的起始百分比 +

dataZoom.end非必填有默认值Number +

默认值：100 +

说明：区域缩放轴的数据窗口范围的结束百分比 +

dataZoom.show非必填有默认值Boolean +

默认值：false +

说明：是否展示区域缩放轴 +

dataZoom.position非必填有默认值Object +

默认值：position:{left:36,bottom:20} +

说明：
+自定义区域缩放轴的位置
+position:{top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

dataZoom.style非必填有默认值Object +

格式： +

 style:{
+          // 背景底色
+          backgroundColor: '#111',
+          // 选中区域数据填充色
+          selectDataColor:'#314461',
+          // 未选中区域数据填充色
+          unSelectDataColor:'#454749',
+          // 选中区域的蒙层颜色
+          middleFillerColor:'rgba(49,68,97,.5)',
+          // 设置手柄样式
+          handleStyle:{
+            color:'red',
+            borderColor:'yellow',
+            shadowColor:'blue'
+          }
+        }
+
+

说明：自定义区域缩放轴的相关颜色样式配置 +

dataZoom.height非必填有默认值Number +

默认值：24 +

说明：设置区域缩放轴的高度 +

` + }, + { + name: 'DataRules', + type: 'interface', + code: `

说明：根据data数据设置data规则

+

格式：

+
dataRules:{
+    display:['Domestic']
+}
+
+

dataRules.display非必填无默认值Array +

说明：在display数组中的data数据才会生成在图表中 +

` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-boxplot.js b/examples/sites/demos/apis/chart-boxplot.js index 139875fea4..1ac65084cd 100644 --- a/examples/sites/demos/apis/chart-boxplot.js +++ b/examples/sites/demos/apis/chart-boxplot.js @@ -4,346 +4,93 @@ export default { { name: 'chart-boxplot', type: 'component', - props: [ - { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, + options: [ { name: 'theme', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', - type: 'object', - defaultValue: '', + name: 'color', + type: 'array | string', + defaultValue: '随主题', + typeAnchorName: 'Color', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '图表颜色', + 'en-US': 'Chart color' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', + name: 'event', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '图表数据', + 'en-US': 'Chart data' }, mode: ['pc'], pcDemo: '' }, + { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'series', + type: 'array', + defaultValue: '无', + typeAnchorName: 'Series', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '自定义图表series', + 'en-US': 'Custom Chart Series' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', + name: 'dataset', + type: 'array', + defaultValue: '无', + typeAnchorName: 'Dataset', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '自定义图表dataset', + 'en-US': 'Custom Chart Dataset' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,22 +137,159 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'Data', + type: 'interface', + code: `

格式：

+
 data:[
+        [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
+        [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
+        [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
+        ...
+    ]
+
+

说明：一个箱形图的图表数据

+
` + }, + { + name: 'Dataset', + type: 'interface', + code: `

格式：

+
    dataset: [
+        {
+            source: data0
+        },
+        {
+            source: data1
+        },
+        {
+            source: data2
+        },
+        {
+            fromDatasetIndex: 0,
+            transform: { type: 'boxplot' }
+        },
+        {
+            fromDatasetIndex: 1,
+            transform: { type: 'boxplot' }
+        },
+        {
+            fromDatasetIndex: 2,
+            transform: { type: 'boxplot' }
+        }
+    ]
+
+

说明：自定义 dataset，需搭配自定义 series 使用，使用方式及属性和 eCharts 一致，请参考 eCharts 配置;

+

详细参数解释见：https://echarts.apache.org/zh/option.html#dataset

+数据变换教程：https://echarts.apache.org/handbook/zh/concepts/data-transform/; +
` + }, + { + name: 'Series', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认显示 - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - series: array // 自定义图表series - dataset: array // 自定义图表dataset - - }` + code: `

格式：

+
series:[
+        {
+            name: 'category0',
+            type: 'boxplot',
+            datasetIndex: 3
+        },
+        {
+            name: 'category1',
+            type: 'boxplot',
+            datasetIndex: 4
+        },
+        {
+            name: 'category2',
+            type: 'boxplot',
+            datasetIndex: 5
+        }
+    ]
+
+

说明：自定义 series，需搭配自定义 dataset 使用，使用方式及属性和 eCharts 一致，请参考 eCharts 配置
+详细参数解释见： https://echarts.apache.org/zh/option.html#series-sunburst.type

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-candle.js b/examples/sites/demos/apis/chart-candle.js index 3e88812af7..797bb9e1e3 100644 --- a/examples/sites/demos/apis/chart-candle.js +++ b/examples/sites/demos/apis/chart-candle.js @@ -4,346 +4,141 @@ export default { { name: 'chart-candle', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', + name: 'theme', + type: 'string', + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", + name: 'color', + type: 'array | string', + defaultValue: '随主题', + typeAnchorName: 'Color', desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' + 'zh-CN': '图表颜色', + 'en-US': 'Chart color' }, mode: ['pc'], pcDemo: '' }, { - name: 'data', - type: 'object', - defaultValue: '', + name: 'padding', + type: 'array', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'events', + name: 'legend', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Legend', desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' + 'zh-CN': '图例配置', + 'en-US': 'Legend configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', + name: 'dataZoom', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'DataZoom', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '区域缩放轴配置', + 'en-US': 'Regional scaling axis configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', + name: 'event', + type: 'object', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', + name: 'MA', type: 'array', - defaultValue: '', + defaultValue: '无', + typeAnchorName: 'Ma', desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' + 'zh-CN': 'k线图的MA数据均线', + 'en-US': 'MA data moving average of K-line chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', + name: 'volume', type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + defaultValue: '无', + typeAnchorName: 'Volume', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '显示volume数据', + 'en-US': 'Display volume data' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' + 'zh-CN': '图表数据', + 'en-US': 'Chart data' }, mode: ['pc'], pcDemo: '' }, + { - name: 'theme-name', + name: 'upColor', type: 'string', - defaultValue: '', + defaultValue: '错误主题色', + typeAnchorName: 'UpColor', desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' + 'zh-CN': '上行数据颜色', + 'en-US': 'Upward data color' }, mode: ['pc'], pcDemo: '' }, { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', + name: 'downColor', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', + defaultValue: '成功主题色', + typeAnchorName: 'DownColor', desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '下行数据颜色', + 'en-US': 'Upward data color' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -392,21 +187,282 @@ export default { ], types: [ { - name: 'Options', + name: 'Data', + type: 'interface', + code: `

格式：

+
data: [
+  { time: '2013/1/24',open: 2320.26,close:2320.26,lowest:2287.3,highest:2362.94,volume:197310000},
+  { time: '2013/1/25',open:2300,close:2291.3,lowest:2288.26,highest:2308.38,volume:221290000}, 
+  { time: '2013/1/26',open:2295.35,close:2346.5,lowest:2295.35,highest:2346.92,volume:191460000}, 
+  ...
+];
+
+

说明：图表数据 , time 为 x 轴数据 , open为开盘价, close 为 收盘价, lowest为最低价, highest 为最高价,volume为成交价

+open、close、lowest、highest、volume属性名称不可更换，volume可选，如没有volume则不配
+time名称（key 值）可更换,通过配置xAxis:{keyName:“key”}实现自定义

+
` + }, + { + name: 'DownColor', + type: 'interface', + code: `

说明：配置k线图的下行数据的颜色

+
` + }, + { + name: 'Ma', + type: 'interface', + code: `

说明：控制k线图的数据均线显示,数组中的数值代表你想显示的数据均线的天数，确保data中的数据包含MA中所填的数据天数

+格式：

+
MA:[5,10,20]
+
+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：padding仅在不显示的volume的时候可用!!!

+设置图表四个方向的 padding 值

+padding : [top, right, bottom, left]

+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’

+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’

+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + { + name: 'UpColor', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: light - color: array | string // 颜色 - legend: object // 图例配置, 默认显示 - dataZoom: object // 区域缩放轴配置, 默认不显示 - event: object // 图表事件, 默认不触发 - MA: array // k线图的MA数据均线 - data: array // 图表数据(必填) - upColor: string // 上行数据颜色 - downColor: string // 下行数据颜色 - - }` + code: `

说明：配置k线图的上行数据的颜色

+
` + }, + { + name: 'Volume', + type: 'interface', + code: `

说明：控制图表中是否显示volume数据如需使用这个功能，图表data中需要配置volume字段

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'DataZoom', + type: 'interface', + code: `

默认值：

+
dataZoom:{
+    start:0,
+    end:100,
+    show:false,
+    position:{
+        left:36,
+        bottom:20
+    },
+    height:24
+}
+
+

说明：设置折线图区域缩放轴是否展示及位置

+

dataZoom.start非必填有默认值Number +

默认值：0 +

说明：区域缩放轴的数据窗口范围的起始百分比 +

dataZoom.end非必填有默认值Number +

默认值：100 +

说明：区域缩放轴的数据窗口范围的结束百分比 +

dataZoom.show非必填有默认值Boolean +

默认值：false +

说明：是否展示区域缩放轴 +

dataZoom.position非必填有默认值Object +

默认值：position:{left:36,bottom:20} +

说明：
+自定义区域缩放轴的位置
+position:{top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

dataZoom.style非必填有默认值Object +

格式： +

 style:{
+          // 背景底色
+          backgroundColor: '#111',
+          // 选中区域数据填充色
+          selectDataColor:'#314461',
+          // 未选中区域数据填充色
+          unSelectDataColor:'#454749',
+          // 选中区域的蒙层颜色
+          middleFillerColor:'rgba(49,68,97,.5)',
+          // 设置手柄样式
+          handleStyle:{
+            color:'red',
+            borderColor:'yellow',
+            shadowColor:'blue'
+          }
+        }
+
+

说明：自定义区域缩放轴的相关颜色样式配置 +

dataZoom.height非必填有默认值Number +

默认值：24 +

说明：设置区域缩放轴的高度 +

` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-funnel.js b/examples/sites/demos/apis/chart-funnel.js index 546cd71365..31be0e7fff 100644 --- a/examples/sites/demos/apis/chart-funnel.js +++ b/examples/sites/demos/apis/chart-funnel.js @@ -4,346 +4,152 @@ export default { { name: 'chart-funnel', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', + name: 'theme', + type: 'string', defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", + name: 'color', + type: 'array | array', + typeAnchorName: 'Color', + defaultValue: '-', desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'data', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'events', + name: 'event', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', + name: 'legend', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Legend', desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' + 'zh-CN': '图例配置', + 'en-US': 'Legend configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', + name: 'gap', type: 'number', - defaultValue: "'200'", + defaultValue: '1', + typeAnchorName: 'Gap', desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' + 'zh-CN': '数据图形间距', + 'en-US': 'Data graphic spacing' }, mode: ['pc'], pcDemo: '' }, { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', + name: 'sort', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', + defaultValue: 'descending', + typeAnchorName: 'Sort', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', + name: 'size', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Size', desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' + 'zh-CN': '图表大小', + 'en-US': 'Chart size' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-area', + name: 'position', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Position', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '图表位置', + 'en-US': 'Chart position' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', + name: 'label', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Label', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '图表文本', + 'en-US': 'Chart Text' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Data', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '图表数据', + 'en-US': 'Chart Text' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', + name: 'series', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Series', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '图表series', + 'en-US': 'Chart Series' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,25 +196,249 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'Data', + type: 'interface', + code: `

格式：

+
 data:[
+        { value: 60, name: 'Visit' },
+        { value: 40, name: 'Inquiry'},
+        { value: 20, name: 'Order' },
+        { value: 80, name: 'Click' },
+        { value: 100, name: 'Show' }
+    ]
+
+

说明：图表数据，value表示为数据值，name表示为数据名称。

+
` + }, + { + name: 'Gap', + type: 'interface', + code: `

默认值：10

+说明：表示数据图形之间的间距。

+
` + }, + { + name: 'Label', + type: 'interface', + code: `

默认值：

+
 label: {
+        show: true,
+        position: 'outside',
+        formatter: { b| { b }:}{ c | { c } %} , 
+        rich: {
+            b: {
+                color: '#191919',
+                padding: [2, 4, 0, 0]
+            },
+            c: {
+                color: '#000000',
+                fontWeight: 'bold',
+                padding: [2, 0, 0, 0]
+            }
+        }
+    }
+
+

说明：通过配置label属性，来修改图表的文本。

+show：选择是否展现图表文本。

+position：图表文本的位置。可选值：'left/right/top/bottom/inside/insideRight/insideLeft/leftTop/leftBottom/rightTop/rightBottom'。

+formatter：文本内容格式器，支持字符串模板和回调函数两种形式，详细参数解释见：
+https://echarts.apache.org/zh/option.html#series-funnel.label.formatter。

+rich：自定义富文本样式，可以配置formatter文本格式，详细参数解释见：
+https://echarts.apache.org/zh/option.html#series-funnel.label.rich。

+
` + }, + { + name: 'Legend', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: light - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] } - event: object // 图表事件, 默认不触发 - legend: object // 图例配置, 默认显示 - gap: number // 数据图形间距, 默认值: 1 - sort: string // 图表排序方式, 默认值: descending - size: object // 图表大小, 默认不显示 - position: object // 图标位置, 默认显示 - label: object // 图表文本, 默认显示 - data: array // 图表数据(必填) - series: object // 图表series - }` + code: `

默认值：

+
legend: {
+        show: true,
+        icon: 'circle',
+        left: 'right',
+        orient: 'vertical',
+    }
+
+

说明：通过配置legend属性，来修改图表的图例。

+show：选择是否展现图表。

+icon：图例的icon。可选值：'circle/rect/roundRect/triangle/diamond/pin/arrow/none'，也可以通过'image://url'设置为图片。

+left：图例离容器左侧的距离。可选值：像素'20'、百分比：'20%'、'left/center/right'。

+orient：图例列表的布局朝向。可选值：'horizontal/vertical'。

+
` + }, + { + name: 'Position', + type: 'interface', + code: `

格式：

+
position: {
+        left: 'center',
+        right: '80',
+        top: 60,
+        bottom: 60,
+        funnelAlign: 'center',
+        orient: 'horizontal',
+    }
+
+

说明：通过配置position属性，来修改图表位置。

+left：图表离容器左侧的距离。可选值：像素'20'、百分比：'20%'、'left/center/right'。

+right：图表离容器右侧的距离。可选值：像素'20'、百分比：'20%'。

+top：图表离容器上侧的距离。可选值：像素'20'、百分比：'20%'、'top/middle/bottom'。

+bottom：图表离容器下侧的距离。可选值：像素'20'、百分比：'20%'。

+funnelAlign：水平方向对齐布局类型。可选值：'left/center/right'。

+orient：图表朝向，可选值：'vertical'或者'horizontal'。
+以上属性均为ECharts漏斗图的原生属性，详情见：
+https://echarts.apache.org/examples/zh/editor.html?c=funnel。

+
` + }, + { + name: 'Series', + type: 'interface', + code: `

默认值：

+
series:{
+        name: 'Expected',
+        type: 'funnel',
+        left: '10%',
+        width: '80%',
+        label: {
+            formatter: '{b}Expected'
+        },
+        itemStyle: {
+            opacity: 0.7,
+            borderColor: '#fff',
+        },
+        emphasis: {
+            label: {
+                position: 'inside',
+                formatter: '{b}Expected: {c}%'
+            }
+        },
+        data: [
+            { value: 60, name: 'Visit' },
+            { value: 40, name: 'Inquiry' },
+            { value: 20, name: 'Order' },
+            { value: 80, name: 'Click' },
+            { value: 100, name: 'Show' }
+        ]
+      }
+
+

说明：自定义series，{{VITE_BASECOPYRIGHTS}} 仅对此部分的series进行覆盖，详细参数解释见：
+https://echarts.apache.org/zh/option.html#series-funnel。

+
` + }, + { + name: 'Size', + type: 'interface', + code: `

格式：

+
size: {
+        width: '80%',
+        height:'80%',
+        min: 0,
+        max: 100,
+        minSize: '0%',
+        maxSize: '100%',
+    }
+
+

说明：通过配置size属性，来修改图表大小。

+width：图表的宽度，可自适应auto。

+height：图表的高度，可自适应auto。

+min：指定的数据最小值。

+max：指定的数据最大值。

+minSize：数据最小值min映射的宽度。

+maxSize：数据最大值max映射的宽度。
+以上属性均为ECharts漏斗图的原生属性，详情见：
+https://echarts.apache.org/examples/zh/editor.html?c=funnel。

+
` + }, + { + name: 'Sort', + type: 'interface', + code: `

默认值：descending

+

可选值：

+

descending：降序

+ascending：升序

+none：默认按data顺序

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-gauge.js b/examples/sites/demos/apis/chart-gauge.js index f7613fdbec..96812cfc48 100644 --- a/examples/sites/demos/apis/chart-gauge.js +++ b/examples/sites/demos/apis/chart-gauge.js @@ -4,346 +4,287 @@ export default { { name: 'chart-gauge', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', + name: 'theme', + type: 'string', defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", + name: 'color', + type: 'array | string', + defaultValue: '-', + typeAnchorName: 'Color', desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'data', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'events', + name: 'event', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'height', - type: 'string', - defaultValue: "'400px'", + name: 'data', + type: 'array', + defaultValue: "[ value: 90, name: 'Utilization rate' ]", + typeAnchorName: 'Data', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', + name: 'position', type: 'object', - defaultValue: '', + defaultValue: "{center:['50%', '50%'],radius: '70%'}", + typeAnchorName: 'Position', desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' + 'zh-CN': '图表位置及大小', + 'en-US': 'Chart position and size' }, mode: ['pc'], pcDemo: '' }, { - name: 'judge-width', + name: 'pointer', type: 'boolean', defaultValue: 'false', + typeAnchorName: 'Pointer', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' + 'zh-CN': '刻度指针是否显示', + 'en-US': 'Is the scale pointer displayed' }, mode: ['pc'], pcDemo: '' }, + { - name: 'resize-delay', + name: 'min', type: 'number', - defaultValue: "'200'", + defaultValue: '0', + typeAnchorName: 'Min', desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' + 'zh-CN': '刻度盘最小刻度', + 'en-US': 'Minimum scale of dial' }, mode: ['pc'], pcDemo: '' }, { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + name: 'max', + type: 'number', + defaultValue: '100', + typeAnchorName: 'Max', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '刻度盘最大刻度', + 'en-US': 'Maximum scale of dial' }, mode: ['pc'], pcDemo: '' }, + { - mode: [] - }, - { - name: 'theme', + name: 'text', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + defaultValue: '默认居中', + typeAnchorName: 'Text', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '中心文本配置', + 'en-US': 'Central Text Configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', + name: 'startAngle', type: 'number', - defaultValue: "'300'", + defaultValue: '225', + typeAnchorName: 'StartAngle', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '仪表盘起始角度', + 'en-US': 'Starting angle of dashboard' }, mode: ['pc'], pcDemo: '' }, + { - name: 'options', - type: 'object', - defaultValue: '', + name: 'endAngle', + type: 'number', + defaultValue: '-45', + typeAnchorName: 'EndAngle', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '仪表盘结束角度', + 'en-US': 'End angle of dashboard' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', - type: 'object', - defaultValue: '', + name: 'splitColor', + type: 'array', + defaultValue: '随主题', + typeAnchorName: 'SplitColor', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '配置分割区间及颜色', + 'en-US': 'Configure segmentation intervals and colors' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', - type: 'object', - defaultValue: '', + name: 'splitNumber', + type: 'number', + defaultValue: '4', + typeAnchorName: 'SplitNumber', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '刻度线数量配置', + 'en-US': 'Quantity configuration of scale lines' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', + name: 'splitLine', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'SplitLine', desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' + 'zh-CN': '刻度线及文本配置', + 'en-US': 'Scale lines and text configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'markLine', + type: 'number', + defaultValue: '无', + typeAnchorName: 'MarkLine', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '阈值线配置', + 'en-US': 'Threshold line configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'gradientColor', + type: 'array', + defaultValue: '无', + typeAnchorName: 'GradientColor', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '线性渐变', + 'en-US': 'Linear gradient' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', + name: 'itemStyle', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '进度条样式配置', + 'en-US': 'Progress bar style configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'axisLabelStyle', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'AxisLabelStyle', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '刻度线文本样式配置', + 'en-US': 'Scale line text style configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', + name: 'pointerStyle', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'PointerStyle', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '调整指针样式', + 'en-US': 'Adjust pointer style' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', + name: 'mask', type: 'object', - defaultValue: '', + defaultValue: '{show: false, highLight: true}', + typeAnchorName: 'Mask', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '外层光晕蒙层配置', + 'en-US': 'Outer halo mask configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'orbitalColor', + type: 'string', + defaultValue: '随主题', + typeAnchorName: 'OrbitalColor', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '仪表盘的轨道颜色', + 'en-US': 'Track color of dashboard' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', + name: 'silent', + type: 'boolean', + defaultValue: 'false', + typeAnchorName: 'Silent', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '是否关闭hover动效', + 'en-US': 'Do you want to turn off the hover effect' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,36 +331,346 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'AxisLabelStyle', + type: 'interface', + code: `

说明：用于调整刻度文本的样式。

+

axisLabelStyle.color非必填有默认值String +

默认值：theme===dark 为 #bbbbbb , theme===white 为 #4e4e4e +

说明：调整刻度文本的字体颜色 +

axisLabelStyle.fontSize非必填有默认值Number +

默认值：14 +

说明：调整刻度文本的字体大小 +

axisLabelStyle.Weight非必填有默认值Number +

默认值：400 +

说明：调整刻度文本的字体宽度 +

axisLabelStyle.distance非必填有默认值Number +

默认值：16 +

说明：调整刻度文本到刻度线的距离 +

` + }, + { + name: 'Data', + type: 'interface', + code: `

格式:[value:90, name:'Utilization rate']

+

说明：图表数据，value 为仪表盘的刻度,name 为数据名称。

+
` + }, + { + name: 'EndAngle', + type: 'interface', + code: `

默认值：-45

+

说明：仪表盘结束角度。圆心正右手侧为 0 度，正上方为 90 度，正左手侧为 180 度

+
` + }, + { + name: 'GradientColor', + type: 'interface', + code: `

格式：[
+
+‘#5990fd’，
+
+‘#0d9458’，
+
+‘#eeba18’，
+
+‘#ec6f1a’，
+
+‘#f43146’]

+

说明：gradientColor 表示从仪表盘左到右的渐变色,gradientColor.length == 1 时也可以表示单色。注意：splitColor 的优先级高于 gradientColor

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

说明：自定义进度条的宽度

+

itemStyle.width非必填有默认值Number +

默认值：16 +

说明：自定义进度条的宽度 +

itemStyle.lineStyle非必填有默认值Object +

默认值：{width:4,color:#4e4e4e||#bbbbbb,length:10} +

说明：自定义多色盘进度条的间距（或者刻度线）样式，颜色及宽度长度。 +

itemStyle.outerGauge非必填有默认值Object +

默认值：show:true +

说明：自定义多色盘进度条外层光晕是否显示 +

` + }, + { + name: 'MarkLine', + type: 'interface', + code: `

说明：设置阈值线，超出阈值时，进度条会变成warning色

+
` + }, + { + name: 'Mask', + type: 'interface', + code: `

默认值：{show:false,hightLight:true}

+

说明：外层光晕蒙层配置。

+

mask.show非必填有默认值Boolean +

默认值：false +

说明：外层光晕蒙层是否展示(蒙层区域的颜色为gradientColor循环取色，透明度.1) +

mask.hightLight非必填有默认值Boolean +

默认值：true +

说明：外层光晕蒙层是否开启区域高亮
(高亮区域的颜色为gradientColor[0]，透明度1;高亮区域前面的颜色为gradientColor[0]，透明度.5;高亮区域后面的颜色为gradientColor循环取色，透明度.5) +

mask.width非必填无默认值Number +

说明：调整外层光晕到进度条之间的蒙层的宽度，不设置时则与lineDistance正相关。页面适配差异时需手动设置 +

` + }, + { + name: 'Max', + type: 'interface', + code: `

默认值：100

+

说明：仪表盘的最大值

+
` + }, + { + name: 'Min', + type: 'interface', + code: `

默认值：0

+

说明：仪表盘的最小值

+
` + }, + { + name: 'OrbitalColor', + type: 'interface', + code: `

说明：用来控制仪表盘的轨道颜色

+
` + }, + { + name: 'Pointer', + type: 'interface', + code: `

默认值：false

+

可选值：true, false

+

说明：仪表盘的刻度指针是否显示

+
` + }, + { + name: 'PointerStyle', + type: 'interface', + code: `

默认值：

+
pointerStyle:{
+    width:16;
+    length:'10%'
+    pointerDistance:'-108%'
+    lineDistance:'5%'
+}
+
+

说明：用于调整指针样式。

+

pointerStyle.width非必填有默认值Number +

默认值：16 +

说明：调整指针宽度 +

pointerStyle.length非必填有默认值String +

默认值：10% +

说明：调整指针长度 +

pointerStyle.pointerDistance非必填有默认值String +

默认值：-108% +

说明：调整指针距离中心距离 +

pointerStyle.lineDistance非必填有默认值String +

默认值：5% +

说明：调整外层光晕距离进度条距离 +

` + }, + { + name: 'Position', + type: 'interface', + code: `

替代旧属性：chartPosition

+

说明：position 用来控制仪表盘的位置和半径。

+

position.center非必填有默认值Array +

默认值：['50%','50%'] +

说明：center 为中心（圆心）坐标，position.center[0]为横坐标，position.center[1]为纵坐标。 +

支持设置成百分比和数值，设置成百分比时position.center[0]是相对于容器宽度，position.center[1]是相对于容器高度。 +

position.radius非必填有默认值String | Number +

默认值：'70%' +

说明：radius 仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 +

` + }, + { + name: 'Slient', + type: 'interface', + code: `

默认值：false

+

说明：是否关闭 hover 态的效果

+
` + }, + { + name: 'SplitColor', + type: 'interface', + code: `

格式:

+
[
+    [0.25, '#0d9458'],
+    [0.5 , '#eeba18'],
+    [0.75, '#ec6f1a'],
+    [1 ,   '#f43146']
+]
+
+

默认值：'#1f55b5'

+

说明：仪表盘的分割颜色，splitColor[i][0] 的值代表整根轴线的百分比，应在 0 到 1 之间, splitColor[i][1] 是对应的颜色

+
` + }, + { + name: 'SplitLine', + type: 'interface', + code: `

说明：控制刻度线及刻度文本是否显示

+

splitLine.show非必填有默认值Boolean +

默认值：true +

可选值：true, false +

说明：控制刻度线及刻度文本是否显示 +

` + }, + { + name: 'SplitNumber', + type: 'interface', + code: `

默认值：4

+

说明：整个仪表盘被分成的份数，splitNumber = n 时表示被分成了 n 份，有 n+1 条刻度线

+
` + }, + { + name: 'StartAngle', + type: 'interface', + code: `

默认值：225

+

说明：仪表盘起始角度。圆心正右手侧为 0 度，正上方为 90 度，正左手侧为 180 度

+
` + }, + { + name: 'Text', + type: 'interface', + code: `

默认值:显示 data 中的 value 和 name 值

+

说明：仪表盘中间显示的文本格式配置。

+

text.offset非必填有默认值Array +

默认值：[0, 0] +

说明：text 文本相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。 +

text.formatter非必填有默认值Function +

格式： +css +formatter：(value) =& gt; { + return '{value|' + value + '}{unit|%}\n{name|Winning Percentages}' + } + +

说明：格式化文本函数，参数 value 为数据数值，返回的字符串格式： {styleName|要显示的文本}，styleName为text.formatterStyle中的属性名 +

text.formatterStyle非必填有默认值Object +

格式： +css +formatterStyle: { + value: { + fontSize: 50, + fontStyle: 'italic', + fontWeight: 'bolder', + color: '#ffff00', + textShadowColor: '#ffffff', + textShadowBlur: 1, + textShadowOffsetX: 2, + textShadowOffsetY: 2, + padding: [0, 0, 30, 0] + }, + unit: { + fontSize: 12, + fontStyle: 'italic', + color: '#ffff00', + textShadowColor: '#ffffff', + textShadowBlur: 1, + textShadowOffsetX: 2, + textShadowOffsetY: 2, + padding: [22, 0, 30, 6], + }, + name: { + fontSize: 14, + color: '#ffffff', + borderColor: '#ffffff', + borderWidth: 1, + borderRadius: 4, + padding: [5, 5, 5, 5], + } + } + +

说明：格式化文本样式，与上述 formatter 搭配使用，具体支持的样式可见：https://echarts.apache.org/zh/option.html#series-gauge.detail.rich.%3Cstyle_name%3E +

` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` + }, + { + name: 'Silent', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: light - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] } - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填), 默认值: { value: 90, name: 'Utilization rate' } - position: object // 图表位置及大小, 默认值: {center: ['50%','50%'], radius: '70%'} - pointer: boolean // 刻度指针是否显示, 默认值: false - min: number // 仪表盘最小刻度, 默认值: 0 - max: number // 仪表盘最大刻度, 默认值: 100 - text: object // 中心文本配置, 默认值: 显示data中的value和name值 - startAngle: number // 仪表盘起始角度, 默认值: 225 - endAngle: number // 仪表盘结束角度, 默认值: -45 - splitColor: array // 配置分割区间及颜色 - splitNumber: number // 刻度线数量配置, 默认值: 4 - splitLine: object // 刻度线及文本配置, 默认显示 - markLine: number // 阈值线配置 - gradientColor: array // 线性配置 - itemStyle: object // 进度条样式配置 - axisLabelStyle: object // 调整指针样式 - pointerStyle: object // 调整指针样式 - mask: object // 外层光晕蒙层配置 - orbitalColor: string // 仪表盘的轨道颜色 - silent: boolean // 是否关闭hover动效, 默认值: false - }` + code: `

默认值：false

+

说明：是否关闭 hover 态的效果

+
` } ] } diff --git a/examples/sites/demos/apis/chart-graph.js b/examples/sites/demos/apis/chart-graph.js index 76aeb13999..e36ca0ae6a 100644 --- a/examples/sites/demos/apis/chart-graph.js +++ b/examples/sites/demos/apis/chart-graph.js @@ -6,338 +6,15 @@ export default { type: 'component', props: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', + name: 'Options', + type: '', defaultValue: '', + typeAnchorName: 'Options', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', + 'zh-CN': + '关系图目前仅支持 eCharts 原生属性配置，使用方式和 eCharts 一致。详细配置请参考：https://echarts.apache.org/examples/zh/index.html#chart-type-graph', 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + '关系图目前仅支持 eCharts 原生属性配置，使用方式和 eCharts 一致。详细配置请参考：https://echarts.apache.org/examples/zh/index.html#chart-type-graph' }, mode: ['pc'], pcDemo: '' @@ -395,9 +72,8 @@ export default { name: 'Options', type: 'interface', code: ` - interface Options { // 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-graph - }` + ` } ] } diff --git a/examples/sites/demos/apis/chart-heatmap.js b/examples/sites/demos/apis/chart-heatmap.js index 800949b8f2..5d8c11c7f1 100644 --- a/examples/sites/demos/apis/chart-heatmap.js +++ b/examples/sites/demos/apis/chart-heatmap.js @@ -4,346 +4,189 @@ export default { { name: 'chart-heatmap', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', + name: 'theme', + type: 'string', + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", + name: 'color', + type: 'array | string', + typeAnchorName: 'Color', + defaultValue: '随主题', desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'data', - type: 'object', - defaultValue: '', + name: 'padding', + type: 'array', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'events', + name: 'tooltip', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', + name: 'event', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', + name: 'data', type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '图表数据', + 'en-US': 'Chart data' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', + name: 'type', + type: 'string', + defaultValue: '无', + typeAnchorName: 'Type', desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' + 'zh-CN': '配置热力图类型(必填)', + 'en-US': 'Configure heatmap type (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'theme-name', + name: 'borderColor', type: 'string', - defaultValue: '', + defaultValue: '#1F55B5', + typeAnchorName: 'BorderColor', desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' + 'zh-CN': '日历热力图矩形边框色', + 'en-US': 'Calendar heatmap rectangle border color' }, mode: ['pc'], pcDemo: '' }, { - name: 'tooltip-visible', + name: 'showLabel', type: 'boolean', defaultValue: 'true', + typeAnchorName: 'ShowLabel', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '日历热力图矩形文本显示', + 'en-US': 'Calendar heatmap rectangular text display' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', + name: 'rectangleSize', type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', + defaultValue: '8', + typeAnchorName: 'RectangleSize', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '矩形热力图矩形大小', + 'en-US': 'Rectangular heatmap with rectangular size' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', + name: 'handle', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', + defaultValue: '无', + typeAnchorName: 'Handle', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '日历热力图手柄相关配置', + 'en-US': 'Calendar heatmap controller related configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', + name: 'quantity', + type: 'number', + defaultValue: '40', + typeAnchorName: 'Quantity', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '蜂窝热力图手柄相关配置', + 'en-US': 'Honeycomb heatmap handle related configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'changeProperty', + type: 'string', + defaultValue: 'opacity', + typeAnchorName: 'ChangeProperty', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '日历热力图热力的变化设置', + 'en-US': 'Calendar heat map heat change settings' }, mode: ['pc'], pcDemo: '' }, + { - name: 'after-set-option', + name: 'xAxis', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'XAxis', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '配置x轴坐标数据', + 'en-US': 'Configure x-axis coordinate data' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'yAxis', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'YAxis', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '配置y轴', + 'en-US': 'Configure y-axis' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,33 +233,347 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'BorderColor', + type: 'interface', + code: `

默认值:'#1F55B5'

+

说明：设置CalendarHeatMapChart图表的 borderColor,仅 type 为CalendarHeatMapChart有效

+
` + }, + { + name: 'ChangeProperty', + type: 'interface', + code: `

默认值：opcity

+

可选值：opcity,color

+

说明：控制CalendarHeatMapChart图表根据什么来体现热力的变化,仅 type 为CalendarHeatMapChart时有效。

+
` + }, + { + name: 'Data', + type: 'interface', + code: `

格式：

+
type 为RectangularHeatMapChart时
+// [[x,y,z,name],[x,y,z,name],...]
+// [维度X数据 维度Y数据 矩形透明度维度数据 单项数据名称]
+// 坐标轴的数据根据相应维度数据从小到大排序生成。
+data:[
+        [10, 10, 10, 'Australia'],
+        [30, 20, 21, 'Canada'],
+        [40, 60, 29, 'China'],
+        ...
+      ]
+
+
+
type 为CalendarHeatMapChart时
+// [
+//   { Name: 'Q1', Week:'Monday', Value: 88,},
+//   { Name: 'Q1', Week:'Tuesday', Value: 66,},
+//   { Name: 'Q1', Week:'Wednesday', Value: 78,}
+//    ...
+//  ]
+// [{维度X数据 维度Y数据 单项数据}]
+// Name:x 轴数据类别,属性名称自定义， Week:y 轴数据类别,属性名称自定义， Value:显示的文本,属性名称自定义。x,y 轴的数据类别显示顺序按照 data 中书写顺序决定。
+ data: [
+            { Name: 'Q1', Week:'Monday', Value: 88,},
+            { Name: 'Q1', Week:'Tuesday', Value: 66,},
+            { Name: 'Q1', Week:'Wednesday', Value: 78,},
+            ...
+            { Name: 'Q2', Week:'Monday', Value: 36,},
+            { Name: 'Q2', Week:'Tuesday', Value: 22,},
+            { Name: 'Q2', Week:'Wednesday', Value: 99,},
+            ...
+            { Name: 'Q3', Week:'Monday', Value: 77,},
+            { Name: 'Q3', Week:'Tuesday', Value: 46,},
+            { Name: 'Q3', Week:'Wednesday', Value: 30,},
+            ...
+        ]
+
+
type 为HexagonHeatMapChart时
+  data: [
+            {
+                name:'A',
+                value:24
+            },
+            ...
+        ]
+  //name为节点的名称，value为节点的值
+
+

说明：图表的数据

+
` + }, + { + name: 'Handle', + type: 'interface', + code: `

说明：设置CalendarHeatMapChart图表的手柄，不传不显示手柄，仅 type 为CalendarHeatMapChart时有效。

+

handle.inverse非必填有默认值Boolean +

默认值：false +

可选值：true, false +

说明：设置CalendarHeatMapChart图表的手柄两端文本是否反转显示 +

handle.text非必填有默认值Array +

格式:[A,B] +

默认值：data 第三个属性值的最大值和最小值 +

说明：设置CalendarHeatMapChart图表的手柄两端文本。 +

handle.calculable非必填有默认值Boolean +

默认值：false +

可选值：true, false +

说明：设置CalendarHeatMapChart图表的手柄滑块是否显示。 +

handle.orient非必填有默认值String +

默认值：vertical +

可选值：vertical,horizontal +

说明：设置CalendarHeatMapChart图表的手柄显示方向。vertical表示垂直，horizontal表示水平。 +

handle.width非必填有默认值Number +

默认值：20 +

说明：设置CalendarHeatMapChart图表的手柄宽度。 +

handle.height非必填有默认值Number +

默认值：400 +

说明：设置CalendarHeatMapChart图表的手柄高度。 +

handle.position非必填有默认值Object +

默认值：{right:'4%', bottom:'6%'} +

可选值：top, left, right, bottom +

说明：设置CalendarHeatMapChart图表的手柄位置,top 的值可以是 20 这样的具体像素值,可以是 '20%' 这样相对于容器高宽的百分比,left 的值可以是 20 这样的具体像素值,可以是 '20%' 这样相对于容器高宽的百分比, right 的值可以是 20 这样的具体像素值,可以是 '20%' 这样相对于容器高宽的百分比,bottom 的值可以是 20 这样的具体像素值,可以是 '20%' 这样相对于容器高宽的百分比。 +

` + }, + { + name: 'Quantity', + type: 'interface', + code: `

默认值：40

+

说明：设置HexagonHeatMapChart图表的蜂窝的排列数量,仅 type 为HexagonHeatMapChart时有效。

+
` + }, + { + name: 'RectangleSize', + type: 'interface', + code: `

默认值:8

+

说明：控制矩形的大小，仅 type 为RectangularHeatMapChart时有效。

+
` + }, + { + name: 'ShowLabel', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: light - color: array | string // 颜色 - padding: array // 图表内边距值, 默认值: [50,20,50,20] - tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] } - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - type: string // 配置热力图类型 - borderColor: string // 日历热力图举行边框色, 默认值: #1F55B5 - showLabel: boolean // 日历热力图矩形文本显示, 默认值: true - rectangleSize: number // 矩形热力图矩形矩形大小, 默认值: 8 - handle: object // 日历热力图手柄相关配置 - quantity: number // 蜂窝热力图单行排列数量设置, 默认值: 40 - changeProperty: string // 日历热力图热力的变化设置, 默认值: opacity - xAxis: object // 配置x轴坐标数据, 默认显示 - yAxis: object // 配置y轴, 默认显示 - xAxisName: string // 配置x轴文本(建议使用xAxis.name) - yAxisName: string // 配置y轴文本(建议使用yAxis.name) - xAxisLine: object // 设置x轴样式(建议使用xAxis.line), 默认显示 - xAxisLabelRotate: number // x轴label旋转角度(建议使用xAxis.labelRotate) - xAixsInterval:number | function // 配置x轴label间距(建议使用xAxis.interval),默认值: 0 - }` + code: `

默认值:true

+

可选值：true, false

+

说明：设置CalendarHeatMapChart图表的图元的文本显示,仅 type 为CalendarHeatMapChart有效

+
` + }, + { + name: 'Type', + type: 'interface', + code: `

默认值:true

+

可选值：true, false

+

说明：设置CalendarHeatMapChart图表的图元的文本显示,仅 type 为CalendarHeatMapChart有效

+
` + }, + { + name: 'YAxis', + type: 'interface', + code: `

格式:

+
yAxis:{
+        // 设置单位
+         unit:'%',
+        // 设置刻度文本间隔
+        interval:29,
+        // 坐标轴的位置
+        position:'right',
+        // 坐标轴的名称
+        name: 'Number',
+        // 坐标轴的名称位置调整
+        nameTextStyle:{
+            align: 'right',
+            // 用于调整y轴标题的位置
+            padding: [0, -38, 0, 0]
+        },
+    },
+
+

yAxis.unit非必填无默认值String +

说明：设置y轴label的单位。 +

yAxis.interval非必填无默认值Number | Function +

格式： +

// 当interval为2时，y轴的label会每隔2个显示
+interval: 2;
+
+

+

// 当interval为function时，y轴的label会根据函数的返回结果展示。
+// 返回true表示显示
+// 返回false表示不显示
+// index表示当前x轴数据的索引,value表示当前x轴数据的值
+interval: (index,value) => {
+    if (index % 24 === 0) {
+        return true;
+    }
+    if (index === 61) {
+        return true;
+    }
+    return  false;
+},
+
+

说明：自定义 y 轴label显示，仅 type 为CalendarHeatMapChart时有效。 +

yAxis.position非必填无默认值String +

默认值：'left' +

可选值：'left','right' +

说明：设置y轴的位置。 +

yAxis.name非必填无默认值String +

说明：设置y轴label的名称,此时不用配置yAxisName属性。 +

yAxis.nameTextStyle非必填无默认值Obiect +

说明：设置y轴名称样式，具体属性参考https://echarts.apache.org/zh/option.html#yAxis.nameTextStyle。 +

` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt;\${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` + }, + { + name: 'XAxis', + type: 'interface', + code: `

格式：

+
Object类型
+xAxis:{
+    name:'Utils',
+    line:{
+        show:true,
+        lineStyle:{
+            color:'red',
+            type:'dashed',
+            width:2
+        }
+    },
+    interval:2,
+    fullGrid:true,
+    labelRotate:45,
+}
+
+

说明：自定义 x 轴配置(将xAxisName、xAxisLine、xAxisInterval、xAxisFullGrid、xAxisLabelRotate属性统一整合到 Object 类型的 xAxis 内部)

+

xAxis.name非必填无默认值String +

说明：配置x轴文本名称（xAxis.name即xAxisName） +

xAxis.line非必填有默认值Object +

默认值： +css +xAxisLine: { + show: true, + lineStyle: { + color: theme === 'dark' ? rgba(238, 238, 238, .1) : rgba(25, 25, 25, .1), + type: 'solid', + width: 2 + } + } + +

说明：设置 x 轴样式(xAxis.line即xAxisLine) +

xAxis.interval非必填有默认值Number | Function +

默认值：0 +

格式： +

// 当xAxisInterval为2时，x轴的label会每隔2个显示
+xAxisInterval: 2
+
+
// 当xAxisInterval为function时，x轴的label会根据函数的返回结果展示。
+// 返回true表示显示
+// 返回false表示不显示
+// index表示当前x轴数据的索引,value表示当前x轴数据的值
+xAxisInterval: (index,value) => {
+    if (index % 24 === 0) {
+        return true;
+    }
+    if (index === 61) {
+        return true;
+    }
+    return  false;
+},
+
+

说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（xAxis.interval即xAxisInterval） +

xAxis.fullGrid非必填有默认值Boolean +

默认值：false +

说明：设置图表是否顶格到 x 轴左右两边(xAxis.fullGrid即xAxisFullGrid) +

xAxis.labelRotate非必填无默认值Number +

默认值：false +

说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(xAxis.labelRotate</ode>即xAxisLabelRotate) +

` } ] } diff --git a/examples/sites/demos/apis/chart-histogram.js b/examples/sites/demos/apis/chart-histogram.js index e488a210bf..5345eef36c 100644 --- a/examples/sites/demos/apis/chart-histogram.js +++ b/examples/sites/demos/apis/chart-histogram.js @@ -4,340 +4,219 @@ export default { { name: 'chart-histogram', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', + name: 'theme', type: 'string', - defaultValue: "'400px'", + defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', + name: 'legend', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Legend', desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' + 'zh-CN': '图例配置, 默认显示', + 'en-US': 'Legend configuration, default display' }, mode: ['pc'], pcDemo: '' }, { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + name: 'xAxis', + type: 'string | object', + defaultValue: '图表数据data数据中data[0]对象的第一个key值', + typeAnchorName: 'XAxis', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '配置x轴', + 'en-US': 'Configure x-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', + name: 'yAxis', + type: 'string | object', + defaultValue: '默认显示', + typeAnchorName: 'YAxis', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '配置y轴', + 'en-US': 'Configure y-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', + name: 'padding', type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + name: 'color', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Color', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', + name: 'tooltip', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'options', + name: 'dataZoom', type: 'object', - defaultValue: '', + defaultValue: '默认不显示', + typeAnchorName: 'DataZoom', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '区域缩放轴配置', + 'en-US': 'Regional scaling axis configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', + name: 'dataRules', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'DataRules', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '数据规则', + 'en-US': 'Data rules' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', + name: 'event', type: 'object', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Data', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'type', + type: 'string', + defaultValue: '-', + typeAnchorName: 'Type', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '配置柱状图类型', + 'en-US': 'Configure bar chart type' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', - type: 'object', - defaultValue: '', + name: 'topTipHtml', + type: 'function', + defaultValue: '默认不显示', + typeAnchorName: 'TopTipHtml', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '顶部位置悬浮提示框', + 'en-US': 'Top position floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'itemStyle', type: 'object', - defaultValue: '', + defaultValue: "{barWidth: 8,barGap: '60%'}", + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '柱体样式', + 'en-US': 'Column style' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', - type: 'object', - defaultValue: '', + name: 'direction', + type: 'string', + defaultValue: '-', + typeAnchorName: 'Direction', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '柱体方向', + 'en-US': 'Column direction' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'label', + type: 'object | array', + defaultValue: '默认不显示', + typeAnchorName: 'Label', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '柱体文本', + 'en-US': 'Column Text' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'lineDataName', + type: 'string', + typeAnchorName: 'LineDataName', + defaultValue: '-', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '柱状图更改为折线图的数据名', + 'en-US': 'Change the data name from bar chart to line chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'markline', type: 'object', - defaultValue: '', + typeAnchorName: 'Markline', + defaultValue: '-', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '阈值线配置', + 'en-US': 'Threshold line configuration' }, mode: ['pc'], pcDemo: '' @@ -392,33 +271,669 @@ export default { ], types: [ { - name: 'Options', + name: 'Data', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: light - legend: object // 图例配置, 默认显示 - xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值 - yAxis: array | object // 配置y轴, 默认值: [50,20,50,20] - padding: array // 图表内边距值, 默认值: [50,20,50,20] - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] } - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - dataZoom: object // 区域缩放轴配置, 默认不显示 - linearGradient: object // 线性渐变 - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - type: string // 配置柱状图类型, 默认值: bar - stepGradient: array // 柱体分段渐变 - axisPointer: object // 坐标指示器(数据背景区域样式),(支持 rgb 颜色、英文单词颜色、十六进制颜色), 默认值: rgba(25,25,25,0.08) - topTipHtml: function // 顶部位置悬浮提示框, 默认不显示 - itemStyle: object // 图表数据点文本样式, 默认值: {barWidth: 8, barGap: '60%'} - direction: string // 柱体方向, 默认值: vertical - label: object | array // 柱体文本, 默认不显示 - lineDataName: array // 柱状图更改为折线图的数据名 - markline: object // 阈值线配置, 默认不显示 - - }` + code: `

格式：

+
普通柱状图  堆叠柱状图  瀑布柱状图
+data: [
+        { "Month": 'Jan', "Domestic": 33, "Abroad": 37 },
+        { "Month": 'Feb', "Domestic": 27, "Abroad": 39 },
+        { "Month": 'Mar', "Domestic": 31, "Abroad": 20 },
+        ...
+]
+
+
双向柱状图
+data: [
+        { "Month": 'Jan', "Domestic": 33, "Abroad": -37 },
+        { "Month": 'Feb', "Domestic": 27, "Abroad": -39 },
+        { "Month": 'Mar', "Domestic": 31, "Abroad": -20 },
+        ...
+]
+
+
区间柱状图
+data: [
+        { "Month": 'Jan', "Domestic": [5,20], "Abroad": [5,23] },
+        { "Month": 'Feb', "Domestic": [10,30], "Abroad": [8,25] },
+        { "Month": 'Mar', "Domestic": [8,25], "Abroad": [2,20] },
+        ...
+]
+
+

说明：图表数据 ， Month 为 x 轴数据 ， Domestic 、 Abroad 为 柱状图数据名称 ， Month 及柱状图数据名称可更换

+
` + }, + { + name: 'Direction', + type: 'interface', + code: `

默认值：vertical（垂直）

+

可选值：vertical（垂直） , horizontal（水平）

+

说明：配置柱状图的方向

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

默认值：itemStyle:{barWidth:8,barGap:'60%'}

+

说明：配置柱形的样式

+

itemStyle.barWidth非必填有默认值Number +

默认值：8 +

说明：配置柱形的宽度 +

itemStyle.barGap非必填有默认值String +

默认值：60% +

说明：配置柱形与柱形之间的间距 +

itemStyle.color非必填无默认值Function +

格式： +d + color: params =& gt; { + if(params.dataIndex % 2 == 0) { + return "#777777"; + } + return "#1F55B5"; +} + +

说明：根据数据数组下标配置特定的柱型颜色 +

itemStyle.barMinHeight非必填无默认值Number | string +

格式2% | 2 +

说明：设置柱子的最小高度，可以填具体的值或者百分比，如果填数值，将按echarts原生功能以像素来显示，如果填百分比，则是按数据最大值的百分比计算最小数据，如果小于最小数据就按最小数据显示，建议使用百分比 +

` + }, + { + name: 'Label', + type: 'interface', + code: `

默认值：

+
对象形式
+label:{
+    show:false,
+    position:'inside',
+    offset:[0,0]
+}
+
+
数组形式
+label:[
+    {
+        show:false,
+        position:'inside',
+        offset:[0,0]
+    },
+]
+
+

说明：柱状图的柱形文本配置

+label='Object' , 所有的柱形统一配置

+label='Array' , 可在其内部定义多个样式 ， 按顺序依次对不同名称的柱形进行配置

+

label.show非必填有默认值Boolean +

默认值：false +

说明：柱状图的柱形文本是否显示 +

label.position非必填有默认值String +

默认值：inside（内部） +

可选值：inside（内部） ， top（外部靠顶） ， bottom（外部靠底） ， left（外部靠左） ， right（外部靠右） ， insideLeft（内部靠左） ， insideRight（内部靠右） ， insideTop（内部靠上） ， insideBottom（内部靠底） ， insideTopLeft（内部左上） ， insideBottomLeft（内部左下） ， insideTopRight（内部右上） ， insideBottomRight（内部右下） +

说明：柱状图的柱形文本位置 +

label.offset非必填有默认值Array +

默认值：[0,0] +

说明：柱状图的柱形文本横向及纵向偏移量 +

label.formatter非必填无默认值Function +

格式： +

formatter:params=>{
+            if(params.name==='总进尺'){
+                if(params.seriesName==='Domestic'){
+                    params.value=2120
+                    params.data=2120
+                }else if(params.seriesName==='Abroad'){
+                    params.data=2000
+                    params.value=2120
+                }
+                return params.data+'m'
+            }
+           return params.data+'t'
+        }
+
+

说明：自定义柱状图的柱形文本信息 +

` + }, + { + name: 'LineDataName', + type: 'interface', + code: `

说明：需要转换为折线图的数据名称

+折柱混合图是建立在 barChart 的基础上实现的（不可颠倒），除了折线图的预测线 predict 属性，其它属性都能支持

+
` + }, + { + name: 'Markline', + type: 'interface', + code: `

格式：

+
markLine:{
+    top:38,
+    bottom:20,
+    color:'red'
+}
+
+

说明：柱状图中阈值线的相关配置

+

markLine.top非必填无默认值Number +

说明：配置将哪根 y 轴刻度线做为上阈值线 ， markLine.top 必须大于 MarkLine.bottom +

markLine.bottom非必填无默认值Number +

说明：配置将哪根 y 轴刻度线做为下阈值线 ， markLine.top 必须大于 MarkLine.bottom +

markLine.color非必填有默认值String +

默认值：#f43146 +

说明：配置阈值线颜色 +

` + }, + { + name: 'TopTipHtml', + type: 'interface', + code: `

默认值：

+
topTipHtml 回调函数控制自定义悬浮框：
+( params: Array,
+  ticket: string,
+  callback: (ticket: string, html: string)
+) => string | HTMLElement | HTMLElement[]
+
+

格式：

+
topTipHtml: (params, ticket, callback) => {
+  let htmlString = '';
+  htmlString+=params.value
+  return htmlString;
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+与 tooltip 区别：它只会定位在图像顶部，不随鼠标移动而改变位置;划入 axisPointer 区域不会使其展示，只有划到对应数据才会显型
+详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Type', + type: 'interface', + code: `

默认值：bar（普通柱形）

+

可选值：bar（普通柱形） ， range（区间柱形） ， stack（堆叠柱形） ， both-sides（双向柱形） ， water-fall（瀑布柱形）

+

说明：配置柱状图类型

+type='bar'柱状图为普通柱状图 ， 通过柱形的高度来表现数据的大小

+type='range'柱状图为区间柱状图 ， 用于描述数据从最小值到最大值的区域
type='stack'柱状图为堆叠柱状图 , 用于展示数据叠加效果的区域
type='both-sides'柱状图为双向柱状图 , 两者数据值一正一负 ， 数据拼凑形成柱形
type='water-fall'柱状图为瀑布柱状图 ， 此时图中会自动添加一个 Total(总和)数据的柱形

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'XAxis', + type: 'interface', + code: `

默认值：图表数据data数组中data[0]对象的第一个 key 值

+

格式：

+
String类型
+xAxis:'Month'
+
+

说明：设置图表数据中哪个 key 值作为折线图的横坐标数据

+

格式：

+
Object类型
+xAxis:{
+    data:'Month'，
+    name:'Utils',
+    line:{
+        show:true,
+        lineStyle:{
+            color:'red',
+            type:'dashed',
+            width:2
+        }
+    },
+    interval:2,
+    fullGrid:true,
+    labelRotate:45,
+    ellipsis:{
+        overflow:'truncate',
+        labelWidth:20
+    },
+    nameLocation:'end',
+    nameTextStyle:{
+        fontSize:12,
+        color:#4e4e4e
+    }
+}
+
+

说明：自定义 x 轴配置(将原先的 String 类型的 xAxis、xAxisName、xAxisLine、xAxisInterval、xAxisFullGrid、xAxisLabelRotate、xAxisEllipsis 属性统一整合到 Object 类型的 xAxis 内部)

+

xAxis.data非必填有默认值String +

说明：设置图表数据中哪个 key 值作为折线图的横坐标数据(xAxis.data即String类型的xAxis值) +

xAxis.name非必填无默认值String +

说明：配置x轴文本名称（xAxis.name即xAxisName） +

xAxis.line非必填有默认值Object +

默认值： +

xAxisLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    },
+    text:{
+        color:theme==='dark'?#bbbbbb:#4e4e4e
+    }
+}
+
+

说明：设置 x 轴样式(xAxis.line即xAxisLine) +

xAxis.interval非必填有默认值Number | Function +

默认值：0 +

格式： +

// 当xAxisInterval为2时，x轴的label会每隔2个显示
+xAxisInterval: 2
+
+
// 当xAxisInterval为function时，x轴的label会根据函数的返回结果展示。
+// 返回true表示显示
+// 返回false表示不显示
+// index表示当前x轴数据的索引,value表示当前x轴数据的值
+xAxisInterval: (index,value) => {
+    if (index % 24 === 0) {
+        return true;
+    }
+    if (index === 61) {
+        return true;
+    }
+    return  false;
+},
+
+

说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（xAxis.interval即xAxisInterval） +

xAxis.fullGrid非必填有默认值Boolean +

默认值：false +

说明：设置图表是否顶格到 x 轴左右两边(xAxis.fullGrid即xAxisFullGrid) +

xAxis.show非必填有默认值Boolean +

默认值：true +

说明：设置x坐标轴是否显示 +

xAxis.labelRotate非必填无默认值Number +

默认值：false +

说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(xAxis.labelRotate即xAxisLabelRotate) +

xAxis.ellipsis非必填有默认值Object +

默认值：xAxis.ellipsis:{overflow:'none'} +

格式： +

xAxis.ellipsis:{
+    overflow:'truncate',
+    width:20
+}
+
+

说明：设置 x 轴刻度文本过长展示方式(xAxis.ellipsis即xAxisEllipsis) +

xAxis.nameLocation非必填有默认值String +

默认值：end +

可选值：end、center||middle、start +

说明：设置x轴文本位置 +

xAxis.nameTextStyle非必填有默认值Object +

默认值：{fontSize:12,color:'#4e4e4e'} +

说明：设置x轴文本样式 +

` + }, + { + name: 'YAxis', + type: 'interface', + code: `

格式：

+
数组格式
+yAxis: [
+    {
+        max:60,
+        min:0,
+        interval:10,
+        position:'left',
+        dataName:['Domestic'],
+        name:'value',
+        unit:'元',
+        nameTextStyle:{
+            padding:[0,0,0,-45]
+        }
+    },
+    {
+        max:90,
+        min: 0,
+        interval:15,
+        position:'right',
+        dataName:['Abroad'],
+        name: 'kal',
+        unit: '$',
+        offset:45,
+        nameTextStyle:{
+            padding:[0,-45,0,0]
+        }
+    }
+    ],
+
+
对象格式
+yAxis:
+    {
+        max: 60,
+        min: 0,
+        interval:5,
+        position:'right',
+        name: 'Percent(%)',
+        unit: '%',
+        minInterval:12,
+        maxInterval:8
+    },
+
+

说明：自定义 y 轴配置

+

yAxis.max非必填无默认值Number +

说明：自定义 y 轴最大值 +

yAxis.min非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴最小值 +

yAxis.interval非必填无默认值Number +

说明：自定义 y 轴数值刻度 +

yAxis.splitNumber非必填无默认值Number +

说明：自定义 y 轴分割线数量 ， 在定义 yAXis.interval 时 ， 此属性失效 +

yAxis.position非必填有默认值String +

默认值：left +

可选值：left 、 right +

说明：自定义 y 轴位置 +

yAxis.name非必填无默认值String +

说明：自定义 y 轴名称 +

yAxis.nameTextStyle非必填无默认值Object +

格式： +

nameTextStyle:
+    {
+        align:'right',
+        padding:[0,0,0,0],
+        color:'red',
+        fontSize:30
+    }
+
+

说明：自定义 y 轴标题文本样式 +

yAxis.unit非必填无默认值String +

说明：自定义 y 轴刻度单位 +

yAxis.dataName非必填有默认值Array +

默认值：全部的折线数据 +

说明：自定义哪条折线数据采用此 y 轴的属性，该属性仅在 yAxis 类型为 Array 时会生效。当有折线数据名未被 dataName 所包含，改折线数据样式按照 yAxis[0]配置 +

yAxis.offset非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴相对于默认位置的偏移量 +

yAxis.show非必填有默认值Boolean +

默认值：true +

说明：y 轴是否显示 +

yAxis.labelTextStyle非必填有默认值Object +

默认值：{color:theme==='dark'?#bbbbbb:#4e4e4e,fontSize:12} +

说明：配置y轴刻度文本样式 +

yAxis.minInterval非必填无默认值Number +

说明：配置y轴最小刻度间隔 +

yAxis.maxInterval非必填无默认值Number +

说明：配置y轴最大刻度间隔 +

yAxis.splitLine非必填有默认值Object +

默认值： +

splitLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    }
+}
+
+

说明：配置y轴刻度线样式 +

` + }, + { + name: 'DataZoom', + type: 'interface', + code: `

默认值：

+
dataZoom:{
+    start:0,
+    end:100,
+    show:false,
+    position:{
+        left:36,
+        bottom:20
+    },
+    height:24
+}
+
+

说明：设置折线图区域缩放轴是否展示及位置

+

dataZoom.start非必填有默认值Number +

默认值：0 +

说明：区域缩放轴的数据窗口范围的起始百分比 +

dataZoom.end非必填有默认值Number +

默认值：100 +

说明：区域缩放轴的数据窗口范围的结束百分比 +

dataZoom.show非必填有默认值Boolean +

默认值：false +

说明：是否展示区域缩放轴 +

dataZoom.position非必填有默认值Object +

默认值：position:{left:36,bottom:20} +

说明：
+自定义区域缩放轴的位置
+position:{top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

dataZoom.style非必填有默认值Object +

格式： +

 style:{
+          // 背景底色
+          backgroundColor: '#111',
+          // 选中区域数据填充色
+          selectDataColor:'#314461',
+          // 未选中区域数据填充色
+          unSelectDataColor:'#454749',
+          // 选中区域的蒙层颜色
+          middleFillerColor:'rgba(49,68,97,.5)',
+          // 设置手柄样式
+          handleStyle:{
+            color:'red',
+            borderColor:'yellow',
+            shadowColor:'blue'
+          }
+        }
+
+

说明：自定义区域缩放轴的相关颜色样式配置 +

dataZoom.height非必填有默认值Number +

默认值：24 +

说明：设置区域缩放轴的高度 +

` + }, + { + name: 'DataRules', + type: 'interface', + code: `

说明：根据data数据设置data规则

+

格式：

+
dataRules:{
+    display:['Domestic']
+}
+
+

dataRules.display非必填无默认值Array +

说明：在display数组中的data数据才会生成在图表中 +

` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-line.js b/examples/sites/demos/apis/chart-line.js index f1bd9d6470..dd1b75e6a8 100644 --- a/examples/sites/demos/apis/chart-line.js +++ b/examples/sites/demos/apis/chart-line.js @@ -4,340 +4,195 @@ export default { { name: 'chart-line', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', + name: 'theme', + type: 'string', defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', + name: 'color', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Color', desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'height', - type: 'string', - defaultValue: "'400px'", + name: 'padding', + type: 'array', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', + name: 'legend', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Legend', desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' + 'zh-CN': '图例配置, 默认显示', + 'en-US': 'Legend configuration, default display' }, mode: ['pc'], pcDemo: '' }, { - name: 'judge-width', + name: 'smooth', type: 'boolean', defaultValue: 'false', + typeAnchorName: 'smooth', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '曲线折线图', + 'en-US': 'Curve and Line Chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', + name: 'silent', type: 'boolean', - defaultValue: 'true', + defaultValue: 'false', + typeAnchorName: 'silent', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '是否关闭hover动效', + 'en-US': 'Turn off or not turn off the hover motion effect' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', + name: 'data', type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', + defaultValue: '-', + typeAnchorName: 'data', desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, - { - name: 'theme', + name: 'itemStyle', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' + 'zh-CN': '图表数据点文本样式', + 'en-US': 'Chart data point text style' }, mode: ['pc'], pcDemo: '' }, { - name: 'tooltip-visible', + name: 'step', type: 'boolean', - defaultValue: 'true', + typeAnchorName: 'step', + defaultValue: 'false', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '折线图是否更改为阶梯线', + 'en-US': 'Should the line chart be changed to a ladder line' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', + name: 'predict', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', + typeAnchorName: 'predict', + defaultValue: '-', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '折线是否更改为预测线的数据名', + 'en-US': 'Is the line changed to the data name of the predicted line' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'xAxis', + type: 'string | object', + defaultValue: '图表数据data数据中data[0]对象的第一个key值', + typeAnchorName: 'XAxis', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '配置x轴', + 'en-US': 'Configure x-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'yAxis', + type: 'string | object', + defaultValue: '默认显示', + typeAnchorName: 'YAxis', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '配置y轴', + 'en-US': 'Configure y-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', + name: 'dataZoom', type: 'object', - defaultValue: '', + defaultValue: '默认不显示', + typeAnchorName: 'DataZoom', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '区域缩放轴配置', + 'en-US': 'Regional scaling axis configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'markline', type: 'object', - defaultValue: '', + typeAnchorName: 'Markline', + defaultValue: '-', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '阈值线配置', + 'en-US': 'Threshold line configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', + name: 'markPoint', type: 'object', - defaultValue: '', + typeAnchorName: 'MarkPoint', + defaultValue: '{max:false, min:false}', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '峰值标记', + 'en-US': 'Peak marking' }, mode: ['pc'], pcDemo: '' @@ -392,30 +247,587 @@ export default { ], types: [ { - name: 'Options', + name: 'Theme', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'data', + type: 'interface', + code: `

格式：

+
data: [
+  { Month: 'Jan', Domestic: 33, Abroad: 37 },
+  { Month: 'Feb', Domestic: 27, Abroad: 39 },
+  { Month: 'Mar', Domestic: 31, Abroad: 20 },
+  ...
+];
+
+

说明：图表数据 ， Month 为 x 轴数据 ， Domestic 、 Abroad 为 折线名称 , Month 及折线名称（key 值）可更换

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

说明：设置折线图数据点的样式

+

itemStyle.symbolSize非必填有默认值Number +

默认值：20 +

说明：设置折线图数据点的大小 +

itemStyle.borderColor非必填有默认值String +

默认值：
+theme=light ， symbolSize=#ffffff
+theme=dark ， symbolSize=#191919 +

说明：设置折线图数据点的边框颜色 +

` + }, + { + name: 'Markline', + type: 'interface', + code: `

格式：

+
markLine:{
+    top:38,
+    topLabel:'上阈值线',
+    topColor:'red',
+    topPosition:'start',
+    bottom:20，
+    bottomLabel:'下阈值线',
+    bottomColor:'blue',
+    bottomPosition:'end'
+}
+
+

说明：折线图中阈值线的相关配置

+

markLine.top非必填无默认值Nmuber +

说明：配置将哪根 y 轴刻度线做为上阈值线 ， markLine.top必须大于 MarkLine.bottom +

markLine.topLabel非必填无默认值String +

说明：配置上阈值线的文本信息 +

markLine.topColor非必填有默认值String +

默认值：red +

说明：配置上阈值线的文本颜色 +

markLine.topPosition非必填有默认值String +

默认值：insideEndTop（结束位置上方） +

可选值：insideEndTop（结束位置上方） 、 insideStartTop（开始位置上方） 、 insideEndBottom（结束位置下方） 、 insideStartBottom（开始位置上方） 、 start（开始位置） 、 end（结束位置） +

说明：配置上阈值线的文本位置 +

markLine.bottom非必填无默认值Nmuber +

说明：配置将哪根 y 轴刻度线做为下阈值线 ， markLine.top 必须大于 MarkLine.bottom +

markLine.bottomLabel非必填无默认值String +

说明：配置下阈值线的文本信息 +

markLine.bottomColor非必填有默认值String +

默认值：red +

说明：配置下阈值线的文本颜色 +

markLine.bottomPosition非必填有默认值String +

默认值：insideEndTop +

可选值：insideEndTop（结束位置上方） 、 insideStartTop（开始位置上方） 、 insideEndBottom（结束位置下方） 、 insideStartBottom（开始位置上方） 、 start（开始位置） 、 end（结束位置） +

说明：配置下阈值线的文本位置 +

` + }, + { + name: 'MarkPoint', + type: 'interface', + code: `

默认值：markPint:{max:false,min:false}

+

说明：折线图峰值标记的相关配置

+

markPoint.max非必填有默认值Boolean +

默认值：false +

说明：是否显示最大峰值标记 +

markPoint.min非必填有默认值Boolean +

默认值：false +

说明：是否显示最小峰值标记 +

` + }, + { + name: 'predict', + type: 'interface', + code: `

格式：predict:'Feb'

+

说明：折线图从哪条 x 轴数据之后开启趋势预测线

+
` + }, + { + name: 'silent', + type: 'interface', + code: `

默认值：false

+

说明：是否关闭 hover 态的效果

+
` + }, + { + name: 'smooth', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: light - color: array | string // 颜色 - padding: array // 图表内边距值, 默认值: [50,20,50,20] - legend: object // 图例配置, 默认显示 - smooth: boolean // 是否关闭hover动效, 默认值: false - silent: boolean // 是否关闭hover动效, 默认值: false - data: array // 图表数据(必填) - itemStyle: object // 折线是否更改为阶梯线, 默认值: false - step: boolean // 折线图是否更改为阶梯线, 默认值: false - predict: string // 折线是否更改为预测线的数据名 - tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] } - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值 - yAxis: array | object // 配置y轴, 默认值: [50,20,50,20] - dataZoom: object // 区域缩放轴配置, 默认不显示 - linearGradient: object // 线性渐变 - event: object // 图表事件, 默认不触发 - markline: object // 阈值线配置, 默认不显示 - markPoint: object // 峰值标记, 默认值: markPoint: {max:false, min:false} - }` + code: `

默认值：false

+

说明：折线图是否开启平滑曲线

+
` + }, + { + name: 'step', + type: 'interface', + code: `

默认值：false

+

说明：面积图是否配置阶梯线 ， 配置 step:true 则 smooth:true 失效

+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'XAxis', + type: 'interface', + code: `

默认值：图表数据data数组中data[0]对象的第一个 key 值

+

格式：

+
String类型
+xAxis:'Month'
+
+

说明：设置图表数据中哪个 key 值作为折线图的横坐标数据

+

格式：

+
Object类型
+xAxis:{
+    data:'Month'，
+    name:'Utils',
+    line:{
+        show:true,
+        lineStyle:{
+            color:'red',
+            type:'dashed',
+            width:2
+        }
+    },
+    interval:2,
+    fullGrid:true,
+    labelRotate:45,
+    ellipsis:{
+        overflow:'truncate',
+        labelWidth:20
+    },
+    nameLocation:'end',
+    nameTextStyle:{
+        fontSize:12,
+        color:#4e4e4e
+    }
+}
+
+

说明：自定义 x 轴配置(将原先的 String 类型的 xAxis、xAxisName、xAxisLine、xAxisInterval、xAxisFullGrid、xAxisLabelRotate、xAxisEllipsis 属性统一整合到 Object 类型的 xAxis 内部)

+

xAxis.data非必填有默认值String +

说明：设置图表数据中哪个 key 值作为折线图的横坐标数据(xAxis.data即String类型的xAxis值) +

xAxis.name非必填无默认值String +

说明：配置x轴文本名称（xAxis.name即xAxisName） +

xAxis.line非必填有默认值Object +

默认值： +

xAxisLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    },
+    text:{
+        color:theme==='dark'?#bbbbbb:#4e4e4e
+    }
+}
+
+

说明：设置 x 轴样式(xAxis.line即xAxisLine) +

xAxis.interval非必填有默认值Number | Function +

默认值：0 +

格式： +

// 当xAxisInterval为2时，x轴的label会每隔2个显示
+xAxisInterval: 2
+
+
// 当xAxisInterval为function时，x轴的label会根据函数的返回结果展示。
+// 返回true表示显示
+// 返回false表示不显示
+// index表示当前x轴数据的索引,value表示当前x轴数据的值
+xAxisInterval: (index,value) => {
+    if (index % 24 === 0) {
+        return true;
+    }
+    if (index === 61) {
+        return true;
+    }
+    return  false;
+},
+
+

说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（xAxis.interval即xAxisInterval） +

xAxis.fullGrid非必填有默认值Boolean +

默认值：false +

说明：设置图表是否顶格到 x 轴左右两边(xAxis.fullGrid即xAxisFullGrid) +

xAxis.show非必填有默认值Boolean +

默认值：true +

说明：设置x坐标轴是否显示 +

xAxis.labelRotate非必填无默认值Number +

默认值：false +

说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(xAxis.labelRotate即xAxisLabelRotate) +

xAxis.ellipsis非必填有默认值Object +

默认值：xAxis.ellipsis:{overflow:'none'} +

格式： +

xAxis.ellipsis:{
+    overflow:'truncate',
+    width:20
+}
+
+

说明：设置 x 轴刻度文本过长展示方式(xAxis.ellipsis即xAxisEllipsis) +

xAxis.nameLocation非必填有默认值String +

默认值：end +

可选值：end、center||middle、start +

说明：设置x轴文本位置 +

xAxis.nameTextStyle非必填有默认值Object +

默认值：{fontSize:12,color:'#4e4e4e'} +

说明：设置x轴文本样式 +

` + }, + { + name: 'YAxis', + type: 'interface', + code: `

格式：

+
数组格式
+yAxis: [
+    {
+        max:60,
+        min:0,
+        interval:10,
+        position:'left',
+        dataName:['Domestic'],
+        name:'value',
+        unit:'元',
+        nameTextStyle:{
+            padding:[0,0,0,-45]
+        }
+    },
+    {
+        max:90,
+        min: 0,
+        interval:15,
+        position:'right',
+        dataName:['Abroad'],
+        name: 'kal',
+        unit: '$',
+        offset:45,
+        nameTextStyle:{
+            padding:[0,-45,0,0]
+        }
+    }
+    ],
+
+
对象格式
+yAxis:
+    {
+        max: 60,
+        min: 0,
+        interval:5,
+        position:'right',
+        name: 'Percent(%)',
+        unit: '%',
+        minInterval:12,
+        maxInterval:8
+    },
+
+

说明：自定义 y 轴配置

+

yAxis.max非必填无默认值Number +

说明：自定义 y 轴最大值 +

yAxis.min非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴最小值 +

yAxis.interval非必填无默认值Number +

说明：自定义 y 轴数值刻度 +

yAxis.splitNumber非必填无默认值Number +

说明：自定义 y 轴分割线数量 ， 在定义 yAXis.interval 时 ， 此属性失效 +

yAxis.position非必填有默认值String +

默认值：left +

可选值：left 、 right +

说明：自定义 y 轴位置 +

yAxis.name非必填无默认值String +

说明：自定义 y 轴名称 +

yAxis.nameTextStyle非必填无默认值Object +

格式： +

nameTextStyle:
+    {
+        align:'right',
+        padding:[0,0,0,0],
+        color:'red',
+        fontSize:30
+    }
+
+

说明：自定义 y 轴标题文本样式 +

yAxis.unit非必填无默认值String +

说明：自定义 y 轴刻度单位 +

yAxis.dataName非必填有默认值Array +

默认值：全部的折线数据 +

说明：自定义哪条折线数据采用此 y 轴的属性，该属性仅在 yAxis 类型为 Array 时会生效。当有折线数据名未被 dataName 所包含，改折线数据样式按照 yAxis[0]配置 +

yAxis.offset非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴相对于默认位置的偏移量 +

yAxis.show非必填有默认值Boolean +

默认值：true +

说明：y 轴是否显示 +

yAxis.labelTextStyle非必填有默认值Object +

默认值：{color:theme==='dark'?#bbbbbb:#4e4e4e,fontSize:12} +

说明：配置y轴刻度文本样式 +

yAxis.minInterval非必填无默认值Number +

说明：配置y轴最小刻度间隔 +

yAxis.maxInterval非必填无默认值Number +

说明：配置y轴最大刻度间隔 +

yAxis.splitLine非必填有默认值Object +

默认值： +

splitLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    }
+}
+
+

说明：配置y轴刻度线样式 +

` + }, + { + name: 'DataZoom', + type: 'interface', + code: `

默认值：

+
dataZoom:{
+    start:0,
+    end:100,
+    show:false,
+    position:{
+        left:36,
+        bottom:20
+    },
+    height:24
+}
+
+

说明：设置折线图区域缩放轴是否展示及位置

+

dataZoom.start非必填有默认值Number +

默认值：0 +

说明：区域缩放轴的数据窗口范围的起始百分比 +

dataZoom.end非必填有默认值Number +

默认值：100 +

说明：区域缩放轴的数据窗口范围的结束百分比 +

dataZoom.show非必填有默认值Boolean +

默认值：false +

说明：是否展示区域缩放轴 +

dataZoom.position非必填有默认值Object +

默认值：position:{left:36,bottom:20} +

说明：
+自定义区域缩放轴的位置
+position:{top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

dataZoom.style非必填有默认值Object +

格式： +

 style:{
+          // 背景底色
+          backgroundColor: '#111',
+          // 选中区域数据填充色
+          selectDataColor:'#314461',
+          // 未选中区域数据填充色
+          unSelectDataColor:'#454749',
+          // 选中区域的蒙层颜色
+          middleFillerColor:'rgba(49,68,97,.5)',
+          // 设置手柄样式
+          handleStyle:{
+            color:'red',
+            borderColor:'yellow',
+            shadowColor:'blue'
+          }
+        }
+
+

说明：自定义区域缩放轴的相关颜色样式配置 +

dataZoom.height非必填有默认值Number +

默认值：24 +

说明：设置区域缩放轴的高度 +

` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-liquidfill.js b/examples/sites/demos/apis/chart-liquidfill.js index e6c1973219..9febaf3fc6 100644 --- a/examples/sites/demos/apis/chart-liquidfill.js +++ b/examples/sites/demos/apis/chart-liquidfill.js @@ -4,346 +4,128 @@ export default { { name: 'chart-liquidfill', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', + name: 'theme', type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', + name: 'color', + type: 'array | string', + defaultValue: '随主题', + typeAnchorName: 'Color', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, - { - name: 'theme', + name: 'tooltip', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'tooltip-visible', + name: 'waveAnimation', type: 'boolean', defaultValue: 'true', + typeAnchorName: 'WaveAnimation', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '图表动画', + 'en-US': 'Chart animation' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', + name: 'backgroundStyle', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'BackgroundStyle', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '图表背景配置', + 'en-US': 'Chart background configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', + name: 'shape', + type: 'string', + defaultValue: '默认显示', + typeAnchorName: 'Shape', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '图表形状', + 'en-US': 'Chart shape' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', + name: 'outline', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Outline', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '图表外框配置', + 'en-US': 'Chart Frame Configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', + name: 'label', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Label', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '图表文本', + 'en-US': 'Chart Text' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '图表数据', + 'en-US': 'Chart Text' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'series', type: 'object', - defaultValue: '', + defaultValue: '无', + typeAnchorName: 'Series', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '图表series', + 'en-US': 'Chart Series' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,23 +172,173 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'BackgroundStyle', + type: 'interface', + code: `

格式示例：

+
backgroundStyle: {
+    borderWidth: 5,
+    borderColor: '#FDC000',
+    color: '#fff'
+}
+
+

说明：通过配置backgroundStyle属性，修改图表背景。

+borderWidth：水球图的背景边框宽度。

+borderColor：水球图的背景边框颜色。

+color：水球图的背景颜色。

+其他更多属性配置可见水球图的git网址：https://github.com/ecomfe/echarts-liquidfill。

+
` + }, + { + name: 'Data', + type: 'interface', + code: `

格式示例：

+
 data: [0.6, 0.5, 0.4]
+
+

说明：水球图数据，数组里每个数表示不同波浪面积的占比。例如上面数据代表水球图的各个波浪占整个水球的 60%, 50%, 40%。

+
` + }, + { + name: 'Label', + type: 'interface', + code: `

格式示例：

+
 label: {
+        formatter: '{a}\n{b}\n购房比: {c}',
+        fontSize: 40,
+        color: 'green',
+    },
+
+

说明：通过配置label属性，来修改图表的文本

+formatter：文本内容格式器，支持字符串模板和回调函数两种形式。详细参数可参照漏斗图的formatter：https://echarts.apache.org/zh/option.html#series-funnel.label.formatter。

+font：文本的字体大小。

+color：文本的颜色。

+其他更多属性配置可见水球图的git网址：https://github.com/ecomfe/echarts-liquidfill。

+
` + }, + { + name: 'Outline', + type: 'interface', + code: `

格式示例：

+
 outline: {
+        show: true,
+        itemStyle: {
+            borderColor: '#BD72F0',
+        }
+    }
+
+

说明：通过配置outline属性，来修改图表的外边框

+show：选择是否展现图表。

+itemStyle：修改水球图外边框样式的属性。

+borderColor：水球图的外边框颜色。

+其他更多属性配置可见水球图的git网址：https://github.com/ecomfe/echarts-liquidfill。

+
` + }, + { + name: 'Series', + type: 'interface', + code: `

格式示例：

+
series:{
+  name: '广东深圳',
+  data: [
+      0.6,
+      {
+          value: 0.5,
+          itemStyle: {
+          color: 'red'
+          }
+      },
+      0.4
+      ],
+  center: ['25%', '50%'],
+  shape: 'circle',
+  label: {
+      fontSize: 40
+  },
+  waveAnimation: false
+}
+
+

说明：自定义 series，{{VITE_BASECOPYRIGHTS}} 仅对此部分的series进行覆盖，详细参数解释见：https://github.com/ecomfe/echarts-liquidfill。

+
` + }, + { + name: 'Shape', + type: 'interface', + code: `

格式示例：

+
shape: 'container'
+
+

说明：水球图的形状属性。可选值为：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow','container'。

+除此之外也可以使用'path://'自定义SVG形状。

+
` + }, + { + name: 'WaveAnimation', + type: 'interface', + code: `

格式示例：

+
waveAnimation: true
+
+

说明：通过配置waveAnimation属性，开启或关闭水球图动画。可选值为：true、false。

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Tooltip', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: light - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认值: { padding: [14,16] } - waveAnimation: boolean // 图表动画, 默认值: true - backgroundstyle: object // 图表背景配置, 默认显示 - shape: string // 图表形状, 默认显示 - outline: object // 图表外框配置, 默认显示 - label: object // 图标文本, 默认显示 - data: array // 图表数据(必填) - series: object // 图表series - }` + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` <div>
+          <i style="display:inline-block;width:10px;height:10px;background-color:\${item.color};"></i>
+          <span style="margin-left:5px;color:#ffffff">
+              <span style="display:inline-block;width:100px;">\${item.seriesName} User</span>
+              <span style="font-weight:bold"> \${item.value} %</span>
+              <span style="color:gray"> out </span>
+              <span style="color:red"> \${100 - item.value} %</span>
+          </span>
+        </div>\`;
+    });
+    return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` } ] } diff --git a/examples/sites/demos/apis/chart-map.js b/examples/sites/demos/apis/chart-map.js index a521b19607..4082c11f8f 100644 --- a/examples/sites/demos/apis/chart-map.js +++ b/examples/sites/demos/apis/chart-map.js @@ -6,338 +6,15 @@ export default { type: 'component', props: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', + name: 'Options', + type: '', defaultValue: '', + typeAnchorName: 'Options', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', + 'zh-CN': + '关系图目前仅支持 eCharts 原生属性配置，使用方式和 eCharts 一致。详细配置请参考：https://echarts.apache.org/examples/zh/index.html#chart-type-graph', 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + '关系图目前仅支持 eCharts 原生属性配置，使用方式和 eCharts 一致。详细配置请参考：https://echarts.apache.org/examples/zh/index.html#chart-type-graph' }, mode: ['pc'], pcDemo: '' @@ -395,9 +72,8 @@ export default { name: 'Options', type: 'interface', code: ` - interface Options { - // 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-map - }` + // 使用方法目前仅支持 eCharts 原生属性配置, 使用方法和 echarts 一致。 详细配置请参考https://echarts.apache.org/examples/zh/index.html#chart-type-graph + ` } ] } diff --git a/examples/sites/demos/apis/chart-pie.js b/examples/sites/demos/apis/chart-pie.js index bcaa8b8db6..140c48f73e 100644 --- a/examples/sites/demos/apis/chart-pie.js +++ b/examples/sites/demos/apis/chart-pie.js @@ -4,346 +4,212 @@ export default { { name: 'chart-pie', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', + name: 'theme', + type: 'string', defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", + name: 'color', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Color', desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'data', + name: 'title', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Title', desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' + 'zh-CN': '中心文本配置', + 'en-US': 'Central Text Configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'events', + name: 'legend', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Legend', desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' + 'zh-CN': '图例配置', + 'en-US': 'Legend configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', + name: 'tooltip', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', + name: 'event', type: 'object', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + name: 'data', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Data', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', + name: 'type', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", + defaultValue: '-', + typeAnchorName: 'Type', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '圆盘图类型', + 'en-US': 'Configure bar chart type' }, mode: ['pc'], pcDemo: '' }, { - name: 'options', + name: 'position', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Position', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '图表位置及大小', + 'en-US': 'Chart position and size' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'minAngle', + type: 'number', + defaultValue: '-', + typeAnchorName: 'MinAngle', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '最小扇区角度', + 'en-US': 'Minimum sector angle' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'silent', + type: 'boolean', + defaultValue: 'false', + typeAnchorName: 'Silent', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '是否关闭hover动效', + 'en-US': 'Turn off or turn on the hover motion effect' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', + name: 'label', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Label', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '外侧文本配置', + 'en-US': 'Outer Text Configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'itemStyle', type: 'object', - defaultValue: '', + defaultValue: '见说明', + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '描边配置', + 'en-US': 'Stroke configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', - type: 'object', - defaultValue: '', + name: 'stillShowZeroSum', + type: 'boolean', + defaultValue: 'true', + typeAnchorName: 'StillShowZeroSum', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '是否在数据和为0的时候仍显示扇区', + 'en-US': 'Display or not display sectors when data sum is 0' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'selectedMode', + type: 'boolean', + defaultValue: 'false', + typeAnchorName: 'SelectedMode', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '扇区选中模式配置', + 'en-US': 'Sector selection mode configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'roseType', + type: 'boolean', + defaultValue: 'false', + typeAnchorName: 'RoseType', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '是否展示成南丁格尔图', + 'en-US': 'Is it displayed as a Nightingale diagram' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'dataRules', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'DataRules', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '某个数据设置指定颜色', + 'en-US': 'data setting specifies a color' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,30 +256,548 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'Data', + type: 'interface', + code: `

格式：

+
圆环图 \ 饼图
+ data:[
+        {value: 100,name: 'VPC'},
+        {value: 90, name: 'IM' },
+        {value: 49, name: 'EIP'},
+        ...
+    ]
+
+
多重圆环图
+data:[
+        {
+            name:'VPC',
+            value:100,
+            children:[
+                {name:'VPC_1',value:20},
+                {name:'VPC_2',value:80},
+            ]
+        },
+        {
+            name:'IM',
+            value:80,
+            children:[
+                {name:'IM_1',value:30},
+                {name:'IM_2',value:50}
+            ]
+        },
+        {
+            name:'EIP',
+            value:50,
+            children:[
+                {name:'EIP_1',value:10},
+                {name:'EIP_2',value:40}
+            ]
+        }
+        ...
+]
+
+

说明：图表数据 , value表示为数据值 ， name表示为数据名称 ， children为添加的外环数据

+
` + }, + { + name: 'DataRules', + type: 'interface', + code: `

格式：

+
dataRules:{
+    color:{
+        'VPC':'#ff0000'
+    }
+}
+
+

说明：可以根据data数据中的某个name为其设置指定的颜色。

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

默认值：

+
itemStyle:{
+    borderColor:'#ffffff',
+    borderWidth:3,
+    borderRadius:0
+}
+
+

说明：圆盘图的描边配置

+

itemStyle.borderColor非必填有默认值<span +

` + }, + { + name: 'Label', + type: 'interface', + code: `

默认值：

+
label:{
+    show:true,
+    type:'percent',
+    line:true,
+    lineColor:'#eee'
+}
+
+

说明：图表的外侧文本相关配置
show 控制是否显示文本
type 圆盘外侧显示的文本格式
line 为展示图表与外侧文本之间的连线
lineColor 为图表与外侧文本之间的连线的颜色

+

label.show非必填有默认值Boolean +

默认值：true +

说明：是否展示图表外侧文本 +

label.type非必填有默认值String +

默认值：name +

可选值：name ， value ， percent +

说明：圆盘外侧显示的文本格式
name 为展示数据名称
value 为展示数据的值
percent 为展示百分比信息，保留两位小数。 +

label.line非必填有默认值Boolean +

默认值：true +

说明：是否展示图表与外侧文本之间的连线 +

label.lineColor非必填有默认值String +

说明：图表与外侧文本之间连线的颜色 +

label.labelHtml非必填有默认值Function +

说明：用来自定义label的内容，参考formatter格式 +

` + }, + { + name: 'MinAngle', + type: 'interface', + code: `

说明：最小的扇区角度0 ~ 360，用于防止某个值过小导致扇区太小影响交互。规范默认了2PX对应的最小角度，用户也可自定义最小角度。如果数据有0值，需要自行配置minAngle: 0，保证扇区无占比。

+
` + }, + { + name: 'Position', + type: 'interface', + code: `

替代旧属性：chartPosition

+

默认值：

+
{
+    center:['50%','45%'],
+    radius:['44%','50%']
+}
+
+

说明：调整圆盘图的位置及大小

+

position.center非必填有默认值Array +

默认值：['50%','45%'] +

说明：center 为中心（圆心）坐标，position.center[0]为横坐标，position.center[1]为纵坐标。 +

支持设置成百分比和数值，设置成百分比时position.center[0]是相对于容器宽度，position.center[1]是相对于容器高度。 +

position.radius非必填有默认值Array +

默认值：['44%','50%'] +

说明：调整圆盘图的n内外半径大小，position.radius[0]为圆盘内径，position.radius[1]为圆盘外径。 +

支持设置成百分比和数值，设置成百分比时position.radius[0]是相对于容器宽度，position.radius[1]是相对于容器高度。 +

` + }, + { + name: 'RoseType', + type: 'interface', + code: `

默认值：false

+

可选值： radius（单选）、 area（多选）

+

说明：是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
+radius扇区圆心角展现数据的百分比，半径展现数据的大小。
+area 所有扇区圆心角相同，仅通过半径展现数据大小。

+
` + }, + { + name: 'SelectedMode', + type: 'interface', + code: `

默认值：false

+

可选值： single（单选） 、 multiple（多选） 、 series（选择整个系列）

+

说明：扇区选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串。

+
` + }, + { + name: 'Silent', + type: 'interface', + code: `

默认值：false

+

说明：是否关闭 hover 态的效果

+
` + }, + { + name: 'StillShowZeroSum', + type: 'interface', + code: `

默认值：true

+

说明：是否在数据和为 0（一般情况下所有数据为 0） 的时候仍显示扇区，默认为true，正常显示扇区。
+设为false，将只显示背景色，且需要搭配minAngle: 0一起使用。

+
` + }, + { + name: 'Type', + type: 'interface', + code: `

默认值：circle（圆环图）

+

可选值 circle（圆环图） ， pie（饼图） ， multi-circle（多重圆环图）

+

说明：图表样式,type='circle'表示为圆环图 ， type='pie'表示为饼图 , type='multi-circle'表示为多重圆环图

+
` + }, + { + name: 'Direction', + type: 'interface', + code: `默认值：vertical（垂直） + +可选值：vertical（垂直） , horizontal（水平） + +说明：配置柱状图的方向 +` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `默认值：itemStyle:{barWidth:8,barGap:'60%'} + +说明：配置柱形的样式 + +

itemStyle.barWidth非必填有默认值Number + +

默认值：8 + +

说明：配置柱形的宽度 + +

itemStyle.barGap非必填有默认值String + +

默认值：60% + +

说明：配置柱形与柱形之间的间距 + +

itemStyle.color非必填无默认值Function + +

格式： + color: params => { + if (params.dataIndex % 2 == 0) { + return "#777777"; + } + return "#1F55B5"; + } + +

说明：根据数据数组下标配置特定的柱型颜色 + +

itemStyle.barMinHeight非必填无默认值Number | string + +

格式2 | '2%' + +

说明：根据数值设置柱子的最小高度，可以填具体的值或者百分比，当数据较大的时候，建议使用百分比 +` + }, + { + name: 'Label', + type: 'interface', + code: `

默认值：

+
label:{
+    show:true,
+    type:'percent',
+    line:true,
+    lineColor:'#eee'
+}
+
+

说明：图表的外侧文本相关配置
show 控制是否显示文本
type 圆盘外侧显示的文本格式
line 为展示图表与外侧文本之间的连线
lineColor 为图表与外侧文本之间的连线的颜色

+

label.show非必填有默认值Boolean +

默认值：true +

说明：是否展示图表外侧文本 +

label.type非必填有默认值String +

默认值：name +

可选值：name ， value ， percent +

说明：圆盘外侧显示的文本格式
name 为展示数据名称
value 为展示数据的值
percent 为展示百分比信息，保留两位小数。 +

label.line非必填有默认值Boolean +

默认值：true +

说明：是否展示图表与外侧文本之间的连线 +

label.lineColor非必填有默认值String +

说明：图表与外侧文本之间连线的颜色 +

label.labelHtml非必填有默认值Function +

说明：用来自定义label的内容，参考formatter格式 +

` + }, + { + name: 'LineDataName', + type: 'interface', + code: `说明：需要转换为折线图的数据名称
+折柱混合图是建立在 barChart 的基础上实现的（不可颠倒），除了折线图的预测线 predict 属性，其它属性都能支持 +` + }, + { + name: 'Markline', + type: 'interface', + code: `格式： + +markLine:{ + top:38, + bottom:20, + color:'red' +} + +说明：柱状图中阈值线的相关配置 + +

markLine.top非必填无默认值Number + +

说明：配置将哪根 y 轴刻度线做为上阈值线 ， markLine.top 必须大于 MarkLine.bottom + +

markLine.bottom非必填无默认值Number + +

说明：配置将哪根 y 轴刻度线做为下阈值线 ， markLine.top 必须大于 MarkLine.bottom + +

markLine.color非必填有默认值String + +

默认值：#f43146 + +

说明：配置阈值线颜色 + +` + }, + { + name: 'TopTipHtml', + type: 'interface', + code: `默认值： + +topTipHtml 回调函数控制自定义悬浮框： +( params: Array, + ticket: string, + callback: (ticket: string, html: string) +) => string | HTMLElement | HTMLElement[] + +格式： + +topTipHtml: (params, ticket, callback) => { + let htmlString = ''; + htmlString+=params.value + return htmlString; +}; + +说明：通过回调函数的参数，自行制作一个 HTML 片段 +与 tooltip 区别：它只会定位在图像顶部，不随鼠标移动而改变位置;划入 axisPointer 区域不会使其展示，只有划到对应数据才会显型 +详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter + +` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Padding', type: 'interface', code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - color: array | string // 颜色 - title: object // 中心文本配置 - legend: object // 图例配置, 默认显示 - tipHtml: function // 悬浮提示框内容配置, 默认显示 - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - type: string // 圆盘图类型, 默认值: circle - position: object // 图标位置及大小, 默认值: { center: ['50%','45%'], radius: ['44%', '50%'] } - minAngle: number // 最小扇区角度 - silent: boolean // 是否关闭hover动效, 默认值: false - label: object // 外侧文本配置, 默认显示 - itemStyle: object // 图表数据点文本样式, 默认值: { borderColor: '#ffffff', borderWidth: 3, borderRadius: 0 } - stillShowZeroSum: boolean // 是否在数据和为0的时候仍显示扇区, 默认值: true - selectedMode: boolean // 扇区选中模式配置, 默认值: false - roseType: boolean // 是否展示成南丁格尔图, 默认值: false - }` + 说明：设置图表四个方向的 padding 值 +padding : [top, right, bottom, left] +top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom' +left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right' +right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 + ` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` + }, + { + name: 'Title', + type: 'interface', + code: `< tr class="tiny-grid-body__expanded-row" >

说明：对齐 echarts 的 title 属性，替代旧属性text

+

格式：

+ 
title:{
+    text: " ",
+    subtext: " ",
+    top: 'center',
+    left: 'center',
+    itemGap: 8,
+    textStyle: {
+      color: '#191919',
+    fontSize: 28,
+    lineHeight: 28,
+    fontWeight: 'normal',
+    },
+    subtextStyle: {
+      color: '#bbbbbb',
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: 'normal',
+    },
+}
+
+
` } ] } diff --git a/examples/sites/demos/apis/chart-process.js b/examples/sites/demos/apis/chart-process.js index d516a72bec..49b6ea137b 100644 --- a/examples/sites/demos/apis/chart-process.js +++ b/examples/sites/demos/apis/chart-process.js @@ -4,46 +4,418 @@ export default { { name: 'chart-process', type: 'component', - props: [ + options: [ { - name: 'options', + name: 'theme', + type: 'string', + defaultValue: 'false', + typeAnchorName: 'Theme', + desc: { + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'color', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Color', + desc: { + 'zh-CN': '颜色', + 'en-US': 'Color' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'padding', + type: 'array', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', + desc: { + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'tooltip', + type: 'object', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', + desc: { + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'event', + type: 'object', + defaultValue: '默认不触发', + typeAnchorName: 'Event', + desc: { + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'data', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Data', + desc: { + 'zh-CN': '图表数据', + 'en-US': 'Chart data' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'name', + type: 'array', + defaultValue: '无', + typeAnchorName: 'Name', + desc: { + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'unit', + type: 'string', + defaultValue: '见详情', + typeAnchorName: 'Unit', + desc: { + 'zh-CN': '进度图右侧文本单位', + 'en-US': 'Text units on the right side of the progress chart' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'barWidth', + type: 'number', + defaultValue: '见详情', + typeAnchorName: 'BarWidth', + desc: { + 'zh-CN': '进度图柱形宽度', + 'en-US': 'Progress chart column width' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'minWidth', + type: 'string', + defaultValue: '无', + typeAnchorName: 'MinWidth', + desc: { + 'zh-CN': '进度图单项数据的最小宽度', + 'en-US': 'Minimum width of individual data in the progress chart' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'calibrationValue', + type: 'number', + defaultValue: '见详情', + typeAnchorName: 'CalibrationValue', + desc: { + 'zh-CN': '进度图标定值', + 'en-US': 'Progress icon fixed value' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'label', type: 'object', - defaultValue: '--', + defaultValue: '无', + typeAnchorName: 'Label', desc: { - 'zh-CN': '图表参数', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '堆叠进度图图表图元文本样式', + 'en-US': 'Stacking progress chart, graphic element, text style' }, mode: ['pc'], - pcDemo: 'chart/question#question-base' + pcDemo: '' + }, + { + name: 'state', + type: 'object', + defaultValue: '无', + typeAnchorName: 'State', + desc: { + 'zh-CN': '根据状态设置颜色', + 'en-US': 'Set color based on status' + }, + mode: ['pc'], + pcDemo: '' + }, + + { + name: 'title', + type: 'object', + defaultValue: '无', + typeAnchorName: 'Title', + desc: { + 'zh-CN': '进度图图表标题样式', + 'en-US': 'Title Style of Progress Chart and Chart' + }, + mode: ['pc'], + pcDemo: '' + }, + { + name: 'text', + type: 'object', + defaultValue: '无', + typeAnchorName: 'Text', + desc: { + 'zh-CN': '进度图图表右侧文本样式', + 'en-US': 'Text Style on the Right Side of the Progress Chart' + }, + mode: ['pc'], + pcDemo: '' } - ], - events: [], - methods: [], - slots: [] + ] } ], + types: [ { - name: 'options', - type: 'interface', - code: ` - interface options { - theme: string // 主题 - color: array | string // 颜色 - padding: array // 图表内边距值 - tipHtml: function // 悬浮提示框内容配置 - event: object // 图表事件 - data: array // 图表数据 - name: string // 图表名称(必填) - unit: string // 进度图右侧文本单位 - barWidth: number // 进度图柱形宽度 - minWidth: string // 进度图单项数据的最小宽度 - calibrationValue: number // 进度图标定值 - label: object // 堆叠进度图图表图元文本样式 - state: object // 根据状态设置颜色 - title: object // 进度图图表标题样式 - text: object // 进度图图表右侧文本样式 - }` + name: 'BarWidth', + type: 'interface', + code: `

默认值：横向进度图 ProcessBarChart:8
+，堆叠横向进度图 StackProcessBarChart:20，
+说明：用来控制进度图柱形宽度

+
` + }, + { + name: 'CalibrationValue', + type: 'interface', + code: `

默认值：进度图：100，堆叠进度图：当前 data 中各项 children 的 value 总和的最大值,

+

说明：用于进度图展示 data 中每项数据在标定值的占据比例

+
` + }, + { + name: 'Data', + type: 'interface', + code: `

格式：

+
进度图
+data:[
+        { name:'UniEPMgr',    value:80 },
+        { name:'SMLoglic',    value:65 },
+        { name:'SSO',         value:45 },
+        ...
+]
+
+

说明：图表数据 ， name 为页面横向进度条名称 ， value 为页面横向进度条长度

+
堆叠进度图
+data:[
+         {
+        name: 'China',
+        children: [
+        { type: 'Game', value: 30 },
+        { type: 'Move', value: 20 },
+        { type: 'Animation', value: 45 },
+        { type: 'Fiction', value: 60 },
+        ],
+    },
+    {
+        name: 'Mexico',
+        children: [
+        { type: 'Game', value: 12 },
+        { type: 'Move', value: 14 },
+        { type: 'Animation', value: 33 },
+        { type: 'Fiction', value: 44 },
+        ],
+    },
+    ....
+]
+
+

说明：图表数据 ， name 为当前的系列名称 ， children 为该系列的具体数据，type 为具体数据的分类名称，value 为具体数据的值

+
` + }, + { + name: 'Label', + type: 'interface', + code: `

格式：

+
 label:{
+  color:'#191919',
+  fontSize:16,
+  width:50
+ }
+
+
+

说明：用于堆叠进度图设置图表图元文本样式,具体用法参考https://echarts.apache.org/zh/option.html#series-bar.label

+
` + }, + { + name: 'MinWidth', + type: 'interface', + code: `

说明：用于进度图图表解决各项数据差值过大，导致部分数据显示不明显的问题，是百分比数值，表示占据当前数据的比例，例如’2%'。

+
` + }, + { + name: 'Name', + type: 'interface', + code: `

说明：图表名称，不允许自定义

+横向进度图–name: 'ProcessBarChart',

+堆叠横向进度图–name: 'StackProcessBarChart',

+
` + }, + { + name: 'State', + type: 'interface', + code: `

格式：

+
state:{
+       error:75,
+       warning:60,
+       subwarning:50,
+       success:20
+    },
+
+
+

说明：用于根据状态显示不同柱形颜色，状态有 error,warning,subwarning,success 四种，颜色分别为
+‘#F23030’,
+‘#FF8800’,
+‘#F7D916’,
+‘#5CB300’

+
` + }, + { + name: 'Text', + type: 'interface', + code: `

格式：

+
 text:{
+  color:'#191919',
+  fontSize:16,
+  width:50
+ }
+
+
+

说明：用于进度图设置图表右侧文本样式,具体用法参考https://echarts.apache.org/zh/option.html#series-bar.label

+
` + }, + { + name: 'Title', + type: 'interface', + code: `

格式：

+
 title:{
+  color:'#191919',
+  fontSize:16,
+  width:50
+ }
+
+
+

说明：用于进度图设置图表标题样式,具体用法参考https://echarts.apache.org/zh/option.html#series-bar.label

+
` + }, + { + name: 'Unit', + type: 'interface', + code: `

默认值：横向进度图：%，堆叠横向进度图：无

+

说明：用来控制进度图右侧的文本显示单位

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${item.seriesName} User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${item.value} %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${100 - item.value} %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-radar.js b/examples/sites/demos/apis/chart-radar.js index ef56220794..39934622ca 100644 --- a/examples/sites/demos/apis/chart-radar.js +++ b/examples/sites/demos/apis/chart-radar.js @@ -4,346 +4,164 @@ export default { { name: 'chart-radar', type: 'component', - props: [ - { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, + options: [ { name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + defaultValue: '-', + typeAnchorName: 'Data', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, - { - mode: [] - }, { name: 'theme', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", + defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'options', - type: 'object', - defaultValue: '', + name: 'color', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Color', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', + name: 'title', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Title', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '中心文本配置', + 'en-US': 'Central Text Configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', + name: 'legend', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Legend', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '图例配置', + 'en-US': 'Legend configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'markLine', + type: 'number | array', + defaultValue: '默认显示', + typeAnchorName: 'MarkLine', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '阈值线配置', + 'en-US': 'Threshold line configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'radarMax', + type: 'number | array', + defaultValue: '默认显示', + typeAnchorName: 'RadarMax', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '最外圈代表的数值', + 'en-US': 'The value represented by the outermost circle' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', + name: 'event', type: 'object', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'position', type: 'object', - defaultValue: '', + defaultValue: "{center:['50%', '50%'],radius: '50%'}", + typeAnchorName: 'Position', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '图表位置及大小', + 'en-US': 'Chart position and size' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', - type: 'object', - defaultValue: '', + name: 'radarMark', + type: 'boolean', + defaultValue: '-', + typeAnchorName: 'RadarMark', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '底部坐标系刻度值显示', + 'en-US': 'Bottom coordinate system scale value display' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', + name: 'radar', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Radar', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '雷达图的坐标系配置', + 'en-US': 'Coordinate system configuration of radar chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', + name: 'area', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Area', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '雷达图图形区域配置', + 'en-US': 'Radar chart graphic area configuration' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,28 +208,347 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'Area', type: 'interface', - code: ` - interface Options { - data: array // 图表数据(必填) - theme: string // 主题, 默认值: cloud-light - color: array | string // 颜色 - title: object // 中心文本配置 - unit: string // 单组数据雷达图的数据单位, 默认值: % - legend: object // 图例配置, 默认显示 - tipHtml: function // 悬浮提示框内容配置, 默认显示 - markline: number | object // 阈值线配置 - radarMax: number | array // 最外圈代表的数值, 默认值: 坐标系的最外圈为数据中的最大值 - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - event: object // 图表事件, 默认不触发 - position: object // 图表位置, 默认不触发 - radarMark: boolean // 底部坐标系刻度值显示, 默认值: true - radar: object // 雷达图的坐标系配置 - - }` + code: `

说明：area 用来控制用雷达图图形区域。

+

area.show非必填有默认值Boolean +

默认值：true +

说明：控制图形区域的填充是否显示。

` + }, + { + name: 'Data', + type: 'interface', + code: `

格式：

+
data:{
+        'Domestic':{
+            'Equipment': 43,
+            'VM': 90,
+            'CSP': 80,
+            'RD': 53,
+            'Markets': 78
+        },
+        'Abroad':{
+            'Equipment': 75,
+            'VM': 55,
+            'CSP': 93,
+            'RD': 90,
+            'Markets': 86
+        }
+    }
+
+

说明：图表的数据,可以有多组数据，但每组数据的维度名称必须一致。

+
` + }, + { + name: 'MarkLine', + type: 'interface', + code: `

格式：

+
number类型，相对于所有数据项作比较，超过数据为红色
+markLine：20
+Object类型,threshold为阈值的配置选项，需要针对所有data中的数据项配置，不能缺少
+markLine:{
+        threshold:{
+            'Equipment': 25,
+            'VM': 40,
+            'CSP': 35,
+            'RD': 20,
+            'Markets': 50
+        }
+},
+雷达图的数据
+data:{
+        'Domestic':{
+            'Equipment': 43,
+            'VM': 90,
+            'CSP': 80,
+            'RD': 53,
+            'Markets': 78
+        }
+}
+
+

说明:图表的阈值线

+
` + }, + { + name: 'Position', + type: 'interface', + code: `

说明：position 用来控制用雷达图的位置和半径。

+

position.center非必填有默认值Array +

默认值：['50%','50%'] +

说明：center 为中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。 +

position.radius非必填有默认值String | Number |Array +

默认值：'50%' +

说明：为number时，直接指定外半径值。为string时，50%表示外半径为可视区尺寸（容器高宽中较小一项）的50%长度。为数组时，数组的第一项是内半径，第二项是外半径，每一项遵从上述 number string 的描述（数组需要同时满足内外半径两项，请勿只有一项的情况）。 +

` + }, + { + name: 'Radar', + type: 'interface', + code: `

格式：

+
说明：控制单组数据雷达图的顶部显示数据的单位
+radar: {
+// 开启标签响应鼠标事件
+triggerEvent:true,
+axisName: {
+formatter: (indicatorName,indicator) => {
+return \`\${ indicatorName }系列\`
+},
+color:'#191919'
+}
+},
+
+

详细请看https://echarts.apache.org/zh/option.html#radar

+
` + }, + { + name: 'RadarMark', + type: 'interface', + code: `

默认值：true

+

可选值:true,false

+

说明：雷达图底部坐标系是否显示刻度值。

+
` + }, + { + name: 'RadarMax', + type: 'interface', + code: `

默认值：雷达图坐标系的最外圈为数据中的最大值

+
number类型，统一设置雷达图最外圈代表的数值
+Array类型,name为数据子项的key，max为设置的最大值,此时如果配置markLine阈值线的红圈不会显示，如果markLine单独配置数据子项的阈值，请确保小于radarMax
+radarMax: [
+        {
+            name:'Equipment',
+            max:20
+        }
+    ],
+
+

说明:用来设置雷达图最外圈代表的数值

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Title', + type: 'interface', + code: `

说明：对齐 echarts 的 title 属性，替代旧属性text

+

格式：

+
title:{
+    text: " ",
+    subtext: " ",
+    top: 'center',
+    left: 'center',
+    itemGap: 8,
+    textStyle: {
+        color: '#191919',
+        fontSize: 28,
+        lineHeight: 28,
+        fontWeight: 'normal',
+    },
+    subtextStyle: {
+        color: '#bbbbbb',
+        fontSize: 16,
+        lineHeight: 24,
+        fontWeight: 'normal',
+    },
+}
+
+
` + }, + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-ring.js b/examples/sites/demos/apis/chart-ring.js index 52b6ae6e12..a8e2758b61 100644 --- a/examples/sites/demos/apis/chart-ring.js +++ b/examples/sites/demos/apis/chart-ring.js @@ -4,346 +4,211 @@ export default { { name: 'chart-ring', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', + name: 'theme', + type: 'string', defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", + name: 'color', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Color', desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'data', + name: 'title', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Title', desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' + 'zh-CN': '中心文本配置', + 'en-US': 'Central Text Configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'events', + name: 'legend', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Legend', desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' + 'zh-CN': '图例配置', + 'en-US': 'Legend configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', + name: 'tooltip', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', + name: 'event', type: 'object', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + name: 'data', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Data', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', + name: 'type', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", + defaultValue: '-', + typeAnchorName: 'Type', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '圆盘图类型', + 'en-US': 'Configure bar chart type' }, mode: ['pc'], pcDemo: '' }, { - name: 'options', + name: 'position', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Position', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '图表位置及大小', + 'en-US': 'Chart position and size' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'minAngle', + type: 'number', + defaultValue: '-', + typeAnchorName: 'MinAngle', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '最小扇区角度', + 'en-US': 'Minimum sector angle' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'silent', + type: 'boolean', + defaultValue: 'false', + typeAnchorName: 'Silent', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '是否关闭hover动效', + 'en-US': 'Turn off or turn on the hover motion effect' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', + name: 'label', type: 'object', - defaultValue: '', + defaultValue: '默认显示', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '外侧文本配置', + 'en-US': 'Outer Text Configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'itemStyle', type: 'object', - defaultValue: '', + defaultValue: '见说明', + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '描边配置', + 'en-US': 'Stroke configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', - type: 'object', - defaultValue: '', + name: 'stillShowZeroSum', + type: 'boolean', + defaultValue: 'true', + typeAnchorName: 'StillShowZeroSum', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '是否在数据和为0的时候仍显示扇区', + 'en-US': 'Display or not display sectors when data sum is 0' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'selectedMode', + type: 'boolean', + defaultValue: 'false', + typeAnchorName: 'SelectedMode', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '扇区选中模式配置', + 'en-US': 'Sector selection mode configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'roseType', + type: 'boolean', + defaultValue: 'false', + typeAnchorName: 'RoseType', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '是否展示成南丁格尔图', + 'en-US': 'Is it displayed as a Nightingale diagram' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'dataRules', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'DataRules', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '某个数据设置指定颜色', + 'en-US': 'data setting specifies a color' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,30 +255,548 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'Data', + type: 'interface', + code: `

格式：

+
圆环图 \ 饼图
+ data:[
+        {value: 100,name: 'VPC'},
+        {value: 90, name: 'IM' },
+        {value: 49, name: 'EIP'},
+        ...
+    ]
+
+
多重圆环图
+data:[
+        {
+            name:'VPC',
+            value:100,
+            children:[
+                {name:'VPC_1',value:20},
+                {name:'VPC_2',value:80},
+            ]
+        },
+        {
+            name:'IM',
+            value:80,
+            children:[
+                {name:'IM_1',value:30},
+                {name:'IM_2',value:50}
+            ]
+        },
+        {
+            name:'EIP',
+            value:50,
+            children:[
+                {name:'EIP_1',value:10},
+                {name:'EIP_2',value:40}
+            ]
+        }
+        ...
+]
+
+

说明：图表数据 , value表示为数据值 ， name表示为数据名称 ， children为添加的外环数据

+
` + }, + { + name: 'DataRules', + type: 'interface', + code: `

格式：

+
dataRules:{
+    color:{
+        'VPC':'#ff0000'
+    }
+}
+
+

说明：可以根据data数据中的某个name为其设置指定的颜色。

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

默认值：

+
itemStyle:{
+    borderColor:'#ffffff',
+    borderWidth:3,
+    borderRadius:0
+}
+
+

说明：圆盘图的描边配置

+

itemStyle.borderColor非必填有默认值<span +

` + }, + { + name: 'Label', + type: 'interface', + code: `

默认值：

+
label:{
+    show:true,
+    type:'percent',
+    line:true,
+    lineColor:'#eee'
+}
+
+

说明：图表的外侧文本相关配置
show 控制是否显示文本
type 圆盘外侧显示的文本格式
line 为展示图表与外侧文本之间的连线
lineColor 为图表与外侧文本之间的连线的颜色

+

label.show非必填有默认值Boolean +

默认值：true +

说明：是否展示图表外侧文本 +

label.type非必填有默认值String +

默认值：name +

可选值：name ， value ， percent +

说明：圆盘外侧显示的文本格式
name 为展示数据名称
value 为展示数据的值
percent 为展示百分比信息，保留两位小数。 +

label.line非必填有默认值Boolean +

默认值：true +

说明：是否展示图表与外侧文本之间的连线 +

label.lineColor非必填有默认值String +

说明：图表与外侧文本之间连线的颜色 +

label.labelHtml非必填有默认值Function +

说明：用来自定义label的内容，参考formatter格式 +

` + }, + { + name: 'MinAngle', + type: 'interface', + code: `

说明：最小的扇区角度0 ~ 360，用于防止某个值过小导致扇区太小影响交互。规范默认了2PX对应的最小角度，用户也可自定义最小角度。如果数据有0值，需要自行配置minAngle: 0，保证扇区无占比。

+
` + }, + { + name: 'Position', + type: 'interface', + code: `

替代旧属性：chartPosition

+

默认值：

+
{
+    center:['50%','45%'],
+    radius:['44%','50%']
+}
+
+

说明：调整圆盘图的位置及大小

+

position.center非必填有默认值Array +

默认值：['50%','45%'] +

说明：center 为中心（圆心）坐标，position.center[0]为横坐标，position.center[1]为纵坐标。 +

支持设置成百分比和数值，设置成百分比时position.center[0]是相对于容器宽度，position.center[1]是相对于容器高度。 +

position.radius非必填有默认值Array +

默认值：['44%','50%'] +

说明：调整圆盘图的n内外半径大小，position.radius[0]为圆盘内径，position.radius[1]为圆盘外径。 +

支持设置成百分比和数值，设置成百分比时position.radius[0]是相对于容器宽度，position.radius[1]是相对于容器高度。 +

` + }, + { + name: 'RoseType', + type: 'interface', + code: `

默认值：false

+

可选值： radius（单选）、 area（多选）

+

说明：是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
+radius扇区圆心角展现数据的百分比，半径展现数据的大小。
+area 所有扇区圆心角相同，仅通过半径展现数据大小。

+
` + }, + { + name: 'SelectedMode', + type: 'interface', + code: `

默认值：false

+

可选值： single（单选） 、 multiple（多选） 、 series（选择整个系列）

+

说明：扇区选中模式的配置，表示是否支持多个选中，默认关闭，支持布尔值和字符串。

+
` + }, + { + name: 'Silent', + type: 'interface', + code: `

默认值：false

+

说明：是否关闭 hover 态的效果

+
` + }, + { + name: 'StillShowZeroSum', + type: 'interface', + code: `

默认值：true

+

说明：是否在数据和为 0（一般情况下所有数据为 0） 的时候仍显示扇区，默认为true，正常显示扇区。
+设为false，将只显示背景色，且需要搭配minAngle: 0一起使用。

+
` + }, + { + name: 'Type', + type: 'interface', + code: `

默认值：circle（圆环图）

+

可选值 circle（圆环图） ， pie（饼图） ， multi-circle（多重圆环图）

+

说明：图表样式,type='circle'表示为圆环图 ， type='pie'表示为饼图 , type='multi-circle'表示为多重圆环图

+
` + }, + { + name: 'Direction', + type: 'interface', + code: `默认值：vertical（垂直） + +可选值：vertical（垂直） , horizontal（水平） + +说明：配置柱状图的方向 +` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `默认值：itemStyle:{barWidth:8,barGap:'60%'} + +说明：配置柱形的样式 + +

itemStyle.barWidth非必填有默认值Number + +

默认值：8 + +

说明：配置柱形的宽度 + +

itemStyle.barGap非必填有默认值String + +

默认值：60% + +

说明：配置柱形与柱形之间的间距 + +

itemStyle.color非必填无默认值Function + +

格式： + color: params => { + if (params.dataIndex % 2 == 0) { + return "#777777"; + } + return "#1F55B5"; + } + +

说明：根据数据数组下标配置特定的柱型颜色 + +

itemStyle.barMinHeight非必填无默认值Number | string + +

格式2 | '2%' + +

说明：根据数值设置柱子的最小高度，可以填具体的值或者百分比，当数据较大的时候，建议使用百分比 +` + }, + { + name: 'Label', + type: 'interface', + code: `

默认值：

+
label:{
+    show:true,
+    type:'percent',
+    line:true,
+    lineColor:'#eee'
+}
+
+

说明：图表的外侧文本相关配置
show 控制是否显示文本
type 圆盘外侧显示的文本格式
line 为展示图表与外侧文本之间的连线
lineColor 为图表与外侧文本之间的连线的颜色

+

label.show非必填有默认值Boolean +

默认值：true +

说明：是否展示图表外侧文本 +

label.type非必填有默认值String +

默认值：name +

可选值：name ， value ， percent +

说明：圆盘外侧显示的文本格式
name 为展示数据名称
value 为展示数据的值
percent 为展示百分比信息，保留两位小数。 +

label.line非必填有默认值Boolean +

默认值：true +

说明：是否展示图表与外侧文本之间的连线 +

label.lineColor非必填有默认值String +

说明：图表与外侧文本之间连线的颜色 +

label.labelHtml非必填有默认值Function +

说明：用来自定义label的内容，参考formatter格式 +

` + }, + { + name: 'LineDataName', + type: 'interface', + code: `说明：需要转换为折线图的数据名称
+折柱混合图是建立在 barChart 的基础上实现的（不可颠倒），除了折线图的预测线 predict 属性，其它属性都能支持 +` + }, + { + name: 'Markline', + type: 'interface', + code: `格式： + +markLine:{ + top:38, + bottom:20, + color:'red' +} + +说明：柱状图中阈值线的相关配置 + +

markLine.top非必填无默认值Number + +

说明：配置将哪根 y 轴刻度线做为上阈值线 ， markLine.top 必须大于 MarkLine.bottom + +

markLine.bottom非必填无默认值Number + +

说明：配置将哪根 y 轴刻度线做为下阈值线 ， markLine.top 必须大于 MarkLine.bottom + +

markLine.color非必填有默认值String + +

默认值：#f43146 + +

说明：配置阈值线颜色 + +` + }, + { + name: 'TopTipHtml', + type: 'interface', + code: `默认值： + +topTipHtml 回调函数控制自定义悬浮框： +( params: Array, + ticket: string, + callback: (ticket: string, html: string) +) => string | HTMLElement | HTMLElement[] + +格式： + +topTipHtml: (params, ticket, callback) => { + let htmlString = ''; + htmlString+=params.value + return htmlString; +}; + +说明：通过回调函数的参数，自行制作一个 HTML 片段 +与 tooltip 区别：它只会定位在图像顶部，不随鼠标移动而改变位置;划入 axisPointer 区域不会使其展示，只有划到对应数据才会显型 +详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter + +` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Padding', type: 'interface', code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - color: array | string // 颜色 - title: object // 中心文本配置 - legend: object // 图例配置, 默认显示 - tipHtml: function // 悬浮提示框内容配置, 默认显示 - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - type: string // 圆盘图类型, 默认值: circle - position: object // 图标位置及大小, 默认值: { center: ['50%','45%'], radius: ['44%', '50%'] } - minAngle: number // 最小扇区角度 - silent: boolean // 是否关闭hover动效, 默认值: false - label: object // 外侧文本配置, 默认显示 - itemStyle: object // 图表数据点文本样式, 默认值: { borderColor: '#ffffff', borderWidth: 3, borderRadius: 0 } - stillShowZeroSum: boolean // 是否在数据和为0的时候仍显示扇区, 默认值: true - selectedMode: boolean // 扇区选中模式配置, 默认值: false - roseType: boolean // 是否展示成南丁格尔图, 默认值: false - }` + 说明：设置图表四个方向的 padding 值 +padding : [top, right, bottom, left] +top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom' +left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right' +right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 + ` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` + }, + { + name: 'Title', + type: 'interface', + code: `< tr class="tiny-grid-body__expanded-row" >

说明：对齐 echarts 的 title 属性，替代旧属性text

+

格式：

+ 
title:{
+    text: " ",
+    subtext: " ",
+    top: 'center',
+    left: 'center',
+    itemGap: 8,
+    textStyle: {
+      color: '#191919',
+    fontSize: 28,
+    lineHeight: 28,
+    fontWeight: 'normal',
+    },
+    subtextStyle: {
+      color: '#bbbbbb',
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: 'normal',
+    },
+}
+
+
` } ] } diff --git a/examples/sites/demos/apis/chart-sankey.js b/examples/sites/demos/apis/chart-sankey.js index 56cb0d498f..5d55a7e5e3 100644 --- a/examples/sites/demos/apis/chart-sankey.js +++ b/examples/sites/demos/apis/chart-sankey.js @@ -4,346 +4,236 @@ export default { { name: 'chart-sankey', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', + name: 'theme', + type: 'string', + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", + name: 'color', + type: 'array | string', + defaultValue: '随主题', + typeAnchorName: 'Color', desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - name: 'data', - type: 'object', - defaultValue: '', + name: 'padding', + type: 'array', + defaultValue: '根据文本长度自适应', + typeAnchorName: 'Padding', desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'events', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', + name: 'data', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '图表数据', + 'en-US': 'Chart data' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', + name: 'dragggble', type: 'boolean', defaultValue: 'true', + typeAnchorName: 'Draggable', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '页面节点是否可拖动', + 'en-US': 'Is the page node draggable' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', + name: 'widthSpace', type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', + defaultValue: '[10, 30]', + typeAnchorName: 'WidthSpace', desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' + 'zh-CN': '节点矩形样式配置', + 'en-US': 'Node rectangle style configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', + name: 'nodeAlign', type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + defaultValue: 'justify', + typeAnchorName: 'NodeAlign', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '桑基图中节点的对齐方式', + 'en-US': 'Alignment of nodes in Sankey diagram' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', + name: 'label', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Label', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '节点矩形中文本标签的样式', + 'en-US': 'Style of Text Labels in Node Rectangle' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', + name: 'itemStyle', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '节点矩形的样式', + 'en-US': 'Style of Node Rectangle' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', + name: 'lineStyle', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'LineStyle', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '节点矩形连接带的样式', + 'en-US': 'Style of Node Rectangular Connection Strip' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', - type: 'object', - defaultValue: '', + name: 'sortType', + type: 'string', + defaultValue: 'unset', + typeAnchorName: 'SortType', desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' + 'zh-CN': '每列数据的排序方式', + 'en-US': 'Sorting method for each column of data' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'emptyStatus', + type: 'string', + defaultValue: 'node', + typeAnchorName: 'EmptyStatus', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '空节点的展示状态', + 'en-US': 'Display status of empty nodes' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'series', + type: 'array', + defaultValue: '见详情', + typeAnchorName: 'Echarts', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': 'echarts原生属性', + 'en-US': 'Echarts native properties' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', + name: 'grid', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Echarts', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': 'echarts原生属性', + 'en-US': 'Echarts native properties' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', - type: 'object', - defaultValue: '', + name: 'xAxis', + type: 'array', + defaultValue: '见详情', + typeAnchorName: 'Echarts', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': 'echarts原生属性', + 'en-US': 'Echarts native properties' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', + name: 'yAxis', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Echarts', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': 'echarts原生属性', + 'en-US': 'Echarts native properties' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Echarts', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': 'echarts原生属性', + 'en-US': 'Echarts native properties' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', + name: 'title', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Echarts', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': 'echarts原生属性', + 'en-US': 'Echarts native properties' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,31 +280,184 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'Data', + type: 'interface', + code: `

格式：

+
data:{
+    nodes:[
+        {name:'a',value:70},
+        {name:'b',value:50},
+        {name:'c',value:20},
+        ...
+    ],
+    links:[
+        {source:'a',target:'b',value:50},
+        {source:'a',target:'c',value:20},
+        ...
+    ]
+}
+
+

说明：图表数据 ， nodes 为页面节点数据 ， links 为页面节点之间的连接关系数据

+

data.nodes必填无默认值Array +

格式： +

nodes:[
+        {name:'a',value:70},
+        {name:'b',value:50},
+        {name:'c',value:20},
+        ...
+    ],
+
+

说明：页面节点数据 ； name 为节点名称 ， value 为节点的数据值 ， 未定义 value 则默认为 0 +

data.links必填无默认值Array +

格式： +

 links:[
+        {source:'a',target:'b',value:50},
+        {source:'a',target:'c',value:20},
+        ...
+    ]
+
+

说明：页面节点之间的连接关系数据 ； source 为节点起点 ， target 为节点终点 ， value 为节点间传递的数据值 +

` + }, + { + name: 'Draggable', + type: 'interface', + code: `

默认值:true

+

说明：页面节点是否可被拖动

+
` + }, + { + name: 'Echarts', + type: 'interface', + code: `

此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/zh/option.html#series-sankey

+
` + }, + { + name: 'EmptyStatus', + type: 'interface', + code: `

默认值：node

+

可选值：node(只展示其占位节点)，
+churnBar(展示占位节点及其连接流失条)，

+

说明：空节点的展示状态

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/zh/option.html#series-sankey

+

注意：在data.nodes中对每个节点设置itemStyle属性的权重>全局的itemStyle属性的权重>color属性的权重

+
` + }, + { + name: 'Label', + type: 'interface', + code: `

此属性配置和 eCharts 基本一致，详细配置请参考：https://echarts.apache.org/zh/option.html#series-sankey

+

此外，SankeyChart 内置了一部分默认如何和自定义属性，如下：

+
label: { // 节点的label默认是由其name和value组成
+  distance:5,
+  textArrange: 'horizontal' || 'vertical', // name和value的排列方向(只在全局label属性设置生效)
+  overHide: false, // 当节点label的高度超过节点高度，是否隐藏其label(只在全局label属性设置生效)
+  formatter: (params) => { // 节点的label默认值，用户可自定义（自定义则textArrange、rich需要用户自己实现）
+    if(textArrange==='horizontal'){
+      return \`{name|\${params.name}} {value|\${params.data.empty ? 0 : params.data.value}}\`; // 横向排列的label默认展示
+    }else if(textArrange==='vertical'){
+      return \`{name|\${params.name}}\n{value|\${params.data.empty ? 0 : params.data.value}}\`; // 纵向排列的label默认展示
+    }
+  },
+  rich: {
+    name: { // 配置name字段的样式
+      fontSize: 12,
+      color:'#777777'
+    },
+    value: { // 配置value字段的样式
+      fontSize: 12,
+      color:'#191919',
+      align:'center'
+    }
+  }
+};
+
+

注意：在 data.nodes 中对每个节点设置 label 属性的权重>全局的 label 属性的权重

+
` + }, + { + name: 'LineStyle', + type: 'interface', + code: `

此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/zh/option.html#series-sankey

+

注意：在data.links中对每个节点设置lineStyle属性的权重>全局的lineStyle属性的权重>color属性的权重

+
` + }, + { + name: 'NodeAlign', + type: 'interface', + code: `

默认值：justify

+

可选值：right ， left ，justify

+

说明：桑基图中节点的对齐方式

+
` + }, + { + name: 'SortType', + type: 'interface', + code: `

默认值：unset

+

可选值：unset(不设置，则按照数据在 nodes 的出现顺序排列)，
+ascend(根据 value 值升序排列)，
+decline(根据 value 值降序排列)

+

说明：每列数据的排序方式

+
` + }, + { + name: 'WidthSpace', + type: 'interface', + code: `

默认值：[10,30]

+

说明：自定义节点矩形宽度及每列间距 ； 第一个值与节点矩形宽度正相关 ， 第二个值与节点距下方节点的间距正相关

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/zh/option.html#series-sankey

+
` + }, + { + name: 'Padding', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - color: array | string // 颜色 - padding: array // 图表内边距值, 默认值: [50,20,50,20] - tipHtml: function // 悬浮提示框内容配置, 默认显示 - data: array // 图表数据(必填) - dragggble: boolean // 页面节点是否可拖动, 默认值: true - widthSpace: array // 节点矩形样式配置, 默认值: [10,30] - nodeAlign: string // 桑基图中节点的对齐方式, 默认值: justify - label: object // 节点矩形中文本标签的样式 - itemStyle: object // 节点矩形连接带的样式 - sortType: string // 空节点的展示状态, 默认值: node - emptyStatus: string // 空节点的展示状态, 默认值: node - series: array // echarts原生属性 - grid: object // echarts原生属性 - xAxis: array // echarts原生属性 - yAxis: object // echarts原生属性 - tooltip: object // echarts原生属性 - title: object // echarts原生属性 - }` + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` } ] } diff --git a/examples/sites/demos/apis/chart-scatter.js b/examples/sites/demos/apis/chart-scatter.js index abd8a3472a..9178d7764a 100644 --- a/examples/sites/demos/apis/chart-scatter.js +++ b/examples/sites/demos/apis/chart-scatter.js @@ -4,346 +4,284 @@ export default { { name: 'chart-scatter', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', + name: 'theme', + type: 'string', + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", + name: 'color', + type: 'array | string', + defaultValue: '随主题', + typeAnchorName: 'Color', desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' + 'zh-CN': '图表颜色', + 'en-US': 'Chart color' }, mode: ['pc'], pcDemo: '' }, { - name: 'data', - type: 'object', - defaultValue: '', + name: 'padding', + type: 'array', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'events', + name: 'tooltip', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', + name: 'legend', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Legend', desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' + 'zh-CN': '图例配置', + 'en-US': 'Legend configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + name: 'event', + type: 'object', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '图表事件', + 'en-US': 'Chart event' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', + name: 'data', + type: 'object', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '图表数据', + 'en-US': 'Chart data' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', + name: 'bubbleSize', type: 'array', - defaultValue: '', + defaultValue: '[10,70]', + typeAnchorName: 'BubbleSize', desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' + 'zh-CN': '气泡大小范围', + 'en-US': 'Bubble size range' }, mode: ['pc'], pcDemo: '' }, { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + name: 'trendLineConfig', + type: 'object', + defaultValue: '无', + typeAnchorName: 'TrendLineConfig', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '配置趋势线', + 'en-US': 'Configure trend lines' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', + name: 'xAxis', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'XAxis', desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' + 'zh-CN': '配置x轴坐标数据', + 'en-US': 'Configure x-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'theme-name', + name: 'xAxisType', type: 'string', - defaultValue: '', + defaultValue: '自适应', + typeAnchorName: 'XAxisType', desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' + 'zh-CN': 'x轴类型', + 'en-US': 'xAxis type' }, mode: ['pc'], pcDemo: '' }, { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + name: 'yAxis', + type: 'array | object', + defaultValue: '默认显示', + typeAnchorName: 'YAxis', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '配置y轴', + 'en-US': 'Configure y-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'width', + name: 'yAxisName', type: 'string', - defaultValue: "'auto'", + defaultValue: '无', + typeAnchorName: 'YAxisName', desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' + 'zh-CN': '配置y轴文本', + 'en-US': 'Configure y-axis text' }, mode: ['pc'], pcDemo: '' }, { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', + name: 'symbol', + type: 'string', + defaultValue: 'circle', + typeAnchorName: 'Symbol', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '节点图形类型', + 'en-US': 'Node Shape Type' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', - type: 'object', - defaultValue: '', + name: 'symbolOpacity', + type: 'number', + defaultValue: '0.2', + typeAnchorName: 'SymbolOpacity', desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' + 'zh-CN': '图元设置透明度', + 'en-US': 'Set transparency for graphic elements' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'symbolRotate', + type: 'number', + defaultValue: '0', + typeAnchorName: 'SymbolRotate', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '节点图形旋转角度', + 'en-US': 'Node Shape Rotation Angle' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'symbolOffset', + type: 'array', + defaultValue: '[0, 0]', + typeAnchorName: 'SymbolOffset', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '节点图形偏移值', + 'en-US': 'Node shape offset value' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', - type: 'object', - defaultValue: '', + name: 'cursor', + type: 'string', + defaultValue: 'pointer', + typeAnchorName: 'Cursor', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '鼠标悬浮在节点图形的样式', + 'en-US': 'The style of hovering the mouse over the node shape' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'markLine', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'MarkLine', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '阈值线', + 'en-US': 'Threshold line' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', + name: 'label', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Label', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '节点图形的文本样式', + 'en-US': 'Text style of node graphics' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', + name: 'itemStyle', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '节点图形的样式', + 'en-US': 'Style of node graphics' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', + name: 'blur', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Blur', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '节点图形失去焦点的样式', + 'en-US': 'The style of node graphics losing focus' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'emphasis', type: 'object', - defaultValue: '', + defaultValue: '见详情', + typeAnchorName: 'Emphasis', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '高亮的图形和标签样式', + 'en-US': 'Highlighted graphics and label styles' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,36 +328,516 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` + }, + { + name: 'Data', + type: 'interface', + code: `

格式：

+
/*{
+*    [维度X 维度Y 气泡半径维度 数据名称 数据分组 ...其他数据]
+*    [维度X 维度Y 气泡半径维度 数据名称 数据分组 ...其他数据]
+*    ...
+* }
+*/
+data:{
+        '1990': [
+            [28604, 77, 17096869, 'Australia', 1990],
+            [31163, 77.4, 27662440, 'Canada', 1990],
+            [60001, 68, 1154605773, 'China', 1990],
+            ...
+        ],
+        '2000': [
+            [19349, 69.6, 147568552, 'Russia', 2000],
+            [10670, 67.3, 53994605, 'Turkey', 2000],
+            [26424, 75.7, 57110117, 'United Kingdom', 2000],
+            ...
+        ],
+        '2015': [
+            [44056, 81.8, 23968973, 'Australia', 2015],
+            [43294, 81.7, 35939927, 'Canada', 2015],
+            [13334, 76.9, 1376048943, 'China', 2015],
+            ...
+        ],
+        ...
+    },
+
+
+
+

说明： 数据(data 属性)顺序必须严格按照指定的维度来摆放，data 里面可以配置多个数组来实现多组数据

+
` + }, + { + name: 'BubbleSize', + type: 'interface', + code: `

默认值：[10, 70]

+

说明：气泡大小范围,气泡半径维度决定了气泡的大小,bubbleSize 决定了气泡大下的上下限

+
` + }, + { + name: 'TrendLineConfig', + type: 'interface', + code: `

说明： 显示图表的趋势线。注意！在使用趋势线功能时，需要额外 npm install echarts-stat -d ,trendLineConfig 为趋势线配置，开发人员可根据当前数据的形态，选择合理的趋势线函数,详细的配置文档可见 https://echarts.apache.org/handbook/zh/concepts/data-transform/#使用外部的数据转换器

+
` + }, + { + name: 'XAxis', + type: 'interface', + code: `

格式：

+
Object类型
+xAxis:{
+    name:'Utils',
+    line:{
+        show:true,
+        lineStyle:{
+            color:'red',
+            type:'dashed',
+            width:2
+        }
+    },
+    interval:2,
+    fullGrid:true,
+    labelRotate:45,
+}
+
+

说明：自定义 x 轴配置(将xAxisName、xAxisLine、xAxisInterval、xAxisFullGrid、xAxisLabelRotate属性统一整合到 Object 类型的 xAxis 内部)

+

xAxis.name非必填无默认值String +

说明：配置x轴文本名称（xAxis.name即xAxisName） +

xAxis.line非必填有默认值Object +

默认值： +css +xAxisLine: { + show: true, + lineStyle: { + color: theme === 'dark' ? rgba(238, 238, 238, .1) : rgba(25, 25, 25, .1), + type: 'solid', + width: 2 + } + } + +

说明：设置 x 轴样式(xAxis.line即xAxisLine) +

xAxis.interval非必填有默认值Number | Function +

默认值：0 +

格式： +

// 当xAxisInterval为2时，x轴的label会每隔2个显示
+xAxisInterval: 2
+
+
// 当xAxisInterval为function时，x轴的label会根据函数的返回结果展示。
+// 返回true表示显示
+// 返回false表示不显示
+// index表示当前x轴数据的索引,value表示当前x轴数据的值
+xAxisInterval: (index,value) => {
+    if (index % 24 === 0) {
+        return true;
+    }
+    if (index === 61) {
+        return true;
+    }
+    return  false;
+},
+
+

说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（xAxis.interval即xAxisInterval） +

xAxis.fullGrid非必填有默认值Boolean +

默认值：false +

说明：设置图表是否顶格到 x 轴左右两边(xAxis.fullGrid即xAxisFullGrid) +

xAxis.labelRotate非必填无默认值Number +

默认值：false +

说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(xAxis.labelRotate</ode>即xAxisLabelRotate) +

` + }, + { + name: 'XAxisType', + type: 'interface', + code: `

说明：配置 x 轴的类型

+

此属性组件内部已经进行封装，不用单独配置。

+如果配置的 data 属性中维度 X 为字符串类型，则组件默认设置为category类目轴，否则为value数值轴

+

可选：value 数值轴、category 类目轴

+
` + }, + { + name: 'YAxis', + type: 'interface', + code: `

格式：

+
数组格式
+yAxis: [
+    {
+        max:60,
+        min:0,
+        interval:10,
+        position:'left',
+        dataName:['Domestic'],
+        name:'value',
+        unit:'元',
+        nameTextStyle:{
+            padding:[0,0,0,-45]
+        }
+    },
+    {
+        max:90,
+        min: 0,
+        interval:15,
+        position:'right',
+        dataName:['Abroad'],
+        name: 'kal',
+        unit: '$',
+        offset:45,
+        nameTextStyle:{
+            padding:[0,-45,0,0]
+        }
+    }
+    ],
+
+
对象格式
+yAxis:
+    {
+        max: 60,
+        min: 0,
+        interval:5,
+        position:'right',
+        name: 'Percent(%)',
+        unit: '%',
+        minInterval:12,
+        maxInterval:8
+    },
+
+

说明：自定义 y 轴配置

+

yAxis.max非必填无默认值Number +

说明：自定义 y 轴最大值 +

yAxis.min非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴最小值 +

yAxis.interval非必填无默认值Number +

说明：自定义 y 轴数值刻度 +

yAxis.splitNumber非必填无默认值Number +

说明：自定义 y 轴分割线数量 ， 在定义 yAXis.interval 时 ， 此属性失效 +

yAxis.position非必填有默认值String +

默认值：left +

可选值：left 、 right +

说明：自定义 y 轴位置 +

yAxis.name非必填无默认值String +

说明：自定义 y 轴名称 +

yAxis.nameTextStyle非必填无默认值Object +

格式： +

nameTextStyle:
+    {
+        align:'right',
+        padding:[0,0,0,0],
+        color:'red',
+        fontSize:30
+    }
+
+

说明：自定义 y 轴标题文本样式 +

yAxis.unit非必填无默认值String +

说明：自定义 y 轴刻度单位 +

yAxis.dataName非必填有默认值Array +

默认值：全部的折线数据 +

说明：自定义哪条折线数据采用此 y 轴的属性，该属性仅在 yAxis 类型为 Array 时会生效。当有折线数据名未被 dataName 所包含，改折线数据样式按照 yAxis[0]配置 +

yAxis.offset非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴相对于默认位置的偏移量 +

yAxis.show非必填有默认值Boolean +

默认值：true +

说明：y 轴是否显示 +

yAxis.labelTextStyle非必填有默认值Object +

默认值：{color:theme==='dark'?#bbbbbb:#4e4e4e,fontSize:12} +

说明：配置y轴刻度文本样式 +

yAxis.minInterval非必填无默认值Number +

说明：配置y轴最小刻度间隔 +

yAxis.maxInterval非必填无默认值Number +

说明：配置y轴最大刻度间隔 +

yAxis.splitLine非必填有默认值Object +

默认值： +

splitLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    }
+}
+
+

说明：配置y轴刻度线样式 +

` + }, + { + name: 'YAxisName', + type: 'interface', + code: `

说明： y 轴的名称

+
` + }, + { + name: 'Symbol', + type: 'interface', + code: `

说明：配置节点图形类型

+

默认值：circle

+

可选值：circle, rect, roundRect, triangle, diamond, pin, arrow, none

+
` + }, + { + name: 'SymbolOpacity', + type: 'interface', + code: `

说明：配置图元透明度

+

默认值：0.2

+
` + }, + { + name: 'SymbolRotate', + type: 'interface', + code: `

说明：配置节点图形旋转角度

+

默认值：0

+
` + }, + { + name: 'SymbolOffset', + type: 'interface', + code: `

说明：配置节点图形偏移值

+

默认值：[0,0]

+
` + }, + { + name: 'Cursor', + type: 'interface', + code: `

说明：鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。

+

默认值：pointer

+
` + }, + { + name: 'MarkLine', + type: 'interface', + code: `

格式：{x: 50000, y: 70}

+

说明： 显示图表的阈值线。注意！在气泡图下，在使用阈值线的同时，需要手动配置数据分组，数据颜色

+
` + }, + { + name: 'Label', + type: 'interface', + code: `

此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/en/option.html#series-scatter

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/en/option.html#series-scatter

+
` + }, + { + name: 'Blur', + type: 'interface', + code: `

此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/en/option.html#series-scatter

+
` + }, + { + name: 'Emphasis', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - color: array | string // 颜色 - padding: array // 图表内边距值, 默认值: [50,20,50,20] - tipHtml: function // 悬浮提示框内容配置, 默认显示 - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - bubbleSize: array // 气泡大小范围, 默认值: [10,70] - trendLineConfig: object // 配置趋势线 - xAxis: object // 配置x轴坐标数据, 默认显示 - xAxisLine: object // 设置x轴样式(建议使用xAxis.line), 默认显示 - xAxisLabelRotate: number // x轴label旋转角度(建议使用xAxis.labelRotate) - xAixsInterval: number | function // 配置x轴label间距(建议使用xAxis.interval), 默认值: 0 - xAxisFullGrid: boolean // x轴坐标是否顶格(建议使用xAxis.fullGrid), 默认值: false - xAxisName: string // 配置x轴文本(建议使用xAxis.name) - yAxisName: string // 配置y轴文本 - xAxisType: string // x轴类型 - symbol: string // 节点图形类型, 默认值: circle - symbolRotate: number // 节点图形旋转角度, 默认值: 0 - symbolOffset: array // 节点图形偏移 - cursor: string // 鼠标悬浮在节点图形的样式, 默认值: pointer - label: object // 节点图形的文本样式, 此属性配置和echarts一致 - itemStyle: object // 节点图形的样式, 此属性配置和echarts一致 - emphasis: object // 高亮的图形和标签样式, 此属性配置和echarts一致 - }` + code: `

此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/en/option.html#series-scatter

+
` } ] } diff --git a/examples/sites/demos/apis/chart-sunburst.js b/examples/sites/demos/apis/chart-sunburst.js index 7a9a746330..6e12933094 100644 --- a/examples/sites/demos/apis/chart-sunburst.js +++ b/examples/sites/demos/apis/chart-sunburst.js @@ -4,346 +4,80 @@ export default { { name: 'chart-sunburst', type: 'component', - props: [ - { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', - type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', - type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', - desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' - }, - mode: ['pc'], - pcDemo: '' - }, - { - mode: [] - }, + options: [ { name: 'theme', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', type: 'string', - defaultValue: "'auto'", + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' + 'zh-CN': '主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", + name: 'color', + type: 'array | string', + defaultValue: '无', + typeAnchorName: 'Color', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '图表颜色', + 'en-US': 'Chart color' }, mode: ['pc'], pcDemo: '' }, { - name: 'options', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', + name: 'event', type: 'object', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '图表事件', + 'en-US': 'Chart Event' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '图表数据', + 'en-US': 'Chart data' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'series', type: 'object', - defaultValue: '', + defaultValue: '无', + typeAnchorName: 'Series', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '图表series', + 'en-US': 'Chart series' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -392,18 +126,151 @@ export default { ], types: [ { - name: 'Options', + name: 'Data', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认显示 - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - series: object // 图表series - }` + code: `

格式：

+
 data:[
+        {
+            value: 10,
+            name: 'a1',
+            children:[
+                {
+                    name: 'a2',
+                    value: 2
+                },
+                {
+                    name: 'a3',
+                    value: 4
+                },
+            ],
+        },
+        {
+            value: 20,
+            name: 'b1',
+            children:[
+                {
+                    name: 'b2',
+                    value: 5
+                },
+                {
+                    name: 'b3',
+                    value: 4
+                },
+            ]
+        },
+        ...
+    ]
+
+

说明：图表数据 , value表示为数据值 ， name表示为数据名称

+
` + }, + { + name: 'Series', + type: 'interface', + code: `

默认值：

+
series:{
+    center: ['50%', '50%'],
+    radius: ['12%', '70%'],
+    type: 'sunburst',
+    sort: undefined,
+    emphasis: {
+        focus: 'ancestor'
+    },
+    itemStyle: {
+        borderRadius: 4,
+        borderWidth: 2,
+        borderColor: '#fff',
+    },
+    label: {
+        rotate: 0,
+        color: '#191919',
+    },
+    data: [],
+    levels:[],
+}
+
+

说明：自定义 series，使用方式及属性和 eCharts 一致，请参考 eCharts 配置

+

详细参数解释见： https://echarts.apache.org/zh/option.html#series-sunburst.type

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-tree.js b/examples/sites/demos/apis/chart-tree.js index ed5b5ee54a..dfc6c6dd9e 100644 --- a/examples/sites/demos/apis/chart-tree.js +++ b/examples/sites/demos/apis/chart-tree.js @@ -4,346 +4,117 @@ export default { { name: 'chart-tree', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', + name: 'theme', type: 'string', - defaultValue: "'400px'", - desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'init-options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'not-set-unchange', + name: 'padding', type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', + name: 'tooltip', type: 'object', - defaultValue: '', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'theme-name', - type: 'string', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' + 'zh-CN': '图表数据', + 'en-US': 'Chart data' }, mode: ['pc'], pcDemo: '' }, { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + name: 'type', + type: 'string', + defaultValue: '无', + typeAnchorName: 'Type', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '树图类型', + 'en-US': 'Tree diagram type' }, mode: ['pc'], pcDemo: '' }, + { - name: 'width', + name: 'direction', type: 'string', - defaultValue: "'auto'", + defaultValue: 'left', + typeAnchorName: 'Direction', desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' + 'zh-CN': '线性树图起点方向', + 'en-US': 'Starting direction of linear tree graph' }, mode: ['pc'], pcDemo: '' }, { - name: 'width-change-delay', + name: 'symbolSize', type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', + defaultValue: '10', + typeAnchorName: 'SymbolSize', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '树图图元大小', + 'en-US': 'Tree diagram element size' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'lineType', + type: 'string', + defaultValue: 'curve', + typeAnchorName: 'LineType', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '线性树图连线形状', + 'en-US': 'Linear tree graph connection shape' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', + name: 'initialTreeDepth', + type: 'number', + defaultValue: '1', + typeAnchorName: 'InitialTreeDepth', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '树图初始展开层级', + 'en-US': 'Initial unfolding hierarchy of tree diagram' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -390,22 +161,139 @@ export default { ] } ], + types: [ { - name: 'Options', + name: 'Data', + type: 'interface', + code: `

格式：

+
data: [
+    {
+      name: '节点',
+      data: [
+        {
+          name: 'flare',
+          children: [
+            {
+              name: 'data',
+              children: [
+                {
+                  name: 'converters',
+                  children: [
+                    { name: 'Converters', value: 721 },
+                    { name: 'DelimitedTextConverter', value: 4294 },
+                    ...
+                  ],
+                },
+                {
+                  name: 'DataUtil',
+                  value: 3322,
+                },
+                ...
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+
+

说明：树图的数据, 最外层name为本系列的数据的名称，data为需要渲染的树的数据，树的数据中name:节点的名称,value:节点的数值,children: 子节点。name,value,children 的名称是固定的，不允许做更改。name 为必传,value 和 children 可不传。

+
` + }, + { + name: 'Direction', + type: 'interface', + code: `

默认值：'left'

+

可选值：'left','right','top','bottom'

+

说明：树图的起点方向,仅 type 为LineTreeChart时有效

+
` + }, + { + name: 'InitialTreeDepth', + type: 'interface', + code: `

默认值：1

+

说明：树图的初始展开层级,最小值为 1

+
` + }, + { + name: 'LineType', + type: 'interface', + code: `

默认值：'curve'

+

可选值：'curve','polyline'

+

说明：树图的连线的形状,仅 type 为LineTreeChart时有效,'polyline'表示折线，'curve'表示曲线。

+
` + }, + { + name: 'SymbolSize', + type: 'interface', + code: `

默认值：10

+

说明：树图的图元的大小

+
` + }, + { + name: 'Type', + type: 'interface', + code: `

可选值：LineTreeChart，RingTreeChart

+

说明：图表类型，共有线形树图和环形树图两套

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + { + name: 'Tooltip', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - padding: array // 图表内边距值, 默认值: [50,20,50,20] - tipHtml: function // 悬浮提示框内容配置, 默认显示 - data: array // 图表数据(必填) - type: string // 树图类型 - direction: string // 线性树图起点方向, 默认值: left - symbolSize: number // 树图树元大小, 默认值: 10 - lineType: string // 线性树图连线形状, 默认值: curve - initialTreeDepth: number // 树图初始展开层级, 默认值: 1 - }` + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+       <div>
+          <i style="display:inline-block;width:10px;height:10px;background-color:\${item.color};"></i>
+          <span style="margin-left:5px;color:#ffffff">
+              <span style="display:inline-block;width:100px;">\${item.seriesName} User</span>
+              <span style="font-weight:bold"> \${item.value} %</span>
+              <span style="color:gray"> out </span>
+              <span style="color:red"> \${100 - item.value} %</span>
+          </span>
+        </div>;
+    });
+    return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` } ] } diff --git a/examples/sites/demos/apis/chart-waterfall.js b/examples/sites/demos/apis/chart-waterfall.js index 01ed7eb4a5..5f6b3d558c 100644 --- a/examples/sites/demos/apis/chart-waterfall.js +++ b/examples/sites/demos/apis/chart-waterfall.js @@ -4,340 +4,219 @@ export default { { name: 'chart-waterfall', type: 'component', - props: [ + options: [ { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', + name: 'theme', type: 'string', - defaultValue: "'400px'", + defaultValue: 'false', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '图表主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', + name: 'legend', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'Legend', desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' + 'zh-CN': '图例配置, 默认显示', + 'en-US': 'Legend configuration, default display' }, mode: ['pc'], pcDemo: '' }, { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', + name: 'xAxis', + type: 'string | object', + defaultValue: '图表数据data数据中data[0]对象的第一个key值', + typeAnchorName: 'XAxis', desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' + 'zh-CN': '配置x轴', + 'en-US': 'Configure x-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', + name: 'yAxis', + type: 'string | object', + defaultValue: '默认显示', + typeAnchorName: 'YAxis', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '配置y轴', + 'en-US': 'Configure y-axis' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', + name: 'padding', type: 'array', - defaultValue: '', - desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resize-delay', - type: 'number', - defaultValue: "'200'", - desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', + defaultValue: '[50,20,50,20]', + typeAnchorName: 'Padding', desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' + 'zh-CN': '图表内边距值', + 'en-US': 'Margin values within the chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + name: 'color', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Color', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '颜色', + 'en-US': 'Color' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', + name: 'tooltip', type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'theme-name', - type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', - desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width', - type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'options', + name: 'dataZoom', type: 'object', - defaultValue: '', + defaultValue: '默认不显示', + typeAnchorName: 'DataZoom', desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' + 'zh-CN': '区域缩放轴配置', + 'en-US': 'Regional scaling axis configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'settings', + name: 'dataRules', type: 'object', - defaultValue: '', + defaultValue: '-', + typeAnchorName: 'DataRules', desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' + 'zh-CN': '数据规则', + 'en-US': 'Data rules' }, mode: ['pc'], pcDemo: '' }, { - name: 'color-mode', + name: 'event', type: 'object', - defaultValue: '', + defaultValue: '默认不触发', + typeAnchorName: 'Event', desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' + 'zh-CN': '图表事件', + 'en-US': 'Chart Events' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', + name: 'data', + type: 'array', + defaultValue: '-', + typeAnchorName: 'Data', desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' + 'zh-CN': '图表数据(必填)', + 'en-US': 'Chart data (required)' }, mode: ['pc'], pcDemo: '' }, { - name: 'mark-point', - type: 'object', - defaultValue: '', + name: 'type', + type: 'string', + defaultValue: '-', + typeAnchorName: 'Type', desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' + 'zh-CN': '配置柱状图类型', + 'en-US': 'Configure bar chart type' }, mode: ['pc'], pcDemo: '' }, { - name: 'loading', - type: 'object', - defaultValue: '', + name: 'topTipHtml', + type: 'function', + defaultValue: '默认不显示', + typeAnchorName: 'TopTipHtml', desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' + 'zh-CN': '顶部位置悬浮提示框', + 'en-US': 'Top position floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'data-empty', + name: 'itemStyle', type: 'object', - defaultValue: '', + defaultValue: "{barWidth: 8,barGap: '60%'}", + typeAnchorName: 'ItemStyle', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '柱体样式', + 'en-US': 'Column style' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', - type: 'object', - defaultValue: '', + name: 'direction', + type: 'string', + defaultValue: '-', + typeAnchorName: 'Direction', desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' + 'zh-CN': '柱体方向', + 'en-US': 'Column direction' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'label', + type: 'object | array', + defaultValue: '默认不显示', + typeAnchorName: 'Label', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '柱体文本', + 'en-US': 'Column Text' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'lineDataName', + type: 'string', + typeAnchorName: 'LineDataName', + defaultValue: '-', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '柱状图更改为折线图的数据名', + 'en-US': 'Change the data name from bar chart to line chart' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', + name: 'markline', type: 'object', - defaultValue: '', + typeAnchorName: 'Markline', + defaultValue: '-', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '阈值线配置', + 'en-US': 'Threshold line configuration' }, mode: ['pc'], pcDemo: '' @@ -392,33 +271,669 @@ export default { ], types: [ { - name: 'Options', + name: 'Data', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - legend: object // 图例配置, 默认显示 - xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值 - yAxis: array | object // 配置y轴, 默认值: [50,20,50,20] - padding: array // 图表内边距值, 默认值: [50,20,50,20] - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认显示 - tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] } - dataZoom: object // 区域缩放轴配置, 默认不显示 - linearGradient: object // 线性渐变 - event: object // 图表事件, 默认不触发 - data: array // 图表数据(必填) - type: string // 配置柱状图类型, 默认值: bar - stepGradient: array // 柱体分段渐变 - axisPointer: object // 坐标指示器(数据背景区域样式),(支持 rgb 颜色、英文单词颜色、十六进制颜色), 默认值: rgba(25,25,25,0.08) - topTipHtml: function // 顶部位置悬浮提示框, 默认不显示 - itemStyle: object // 图表数据点文本样式, 默认值: {barWidth: 8, barGap: '60%'} - direction: string // 柱体方向, 默认值: vertical - label: object | array // 柱体文本, 默认不显示 - lineDataName: array // 柱状图更改为折线图的数据名 - markline: object // 阈值线配置, 默认不显示 - - }` + code: `

格式：

+
普通柱状图  堆叠柱状图  瀑布柱状图
+data: [
+        { "Month": 'Jan', "Domestic": 33, "Abroad": 37 },
+        { "Month": 'Feb', "Domestic": 27, "Abroad": 39 },
+        { "Month": 'Mar', "Domestic": 31, "Abroad": 20 },
+        ...
+]
+
+
双向柱状图
+data: [
+        { "Month": 'Jan', "Domestic": 33, "Abroad": -37 },
+        { "Month": 'Feb', "Domestic": 27, "Abroad": -39 },
+        { "Month": 'Mar', "Domestic": 31, "Abroad": -20 },
+        ...
+]
+
+
区间柱状图
+data: [
+        { "Month": 'Jan', "Domestic": [5,20], "Abroad": [5,23] },
+        { "Month": 'Feb', "Domestic": [10,30], "Abroad": [8,25] },
+        { "Month": 'Mar', "Domestic": [8,25], "Abroad": [2,20] },
+        ...
+]
+
+

说明：图表数据 ， Month 为 x 轴数据 ， Domestic 、 Abroad 为 柱状图数据名称 ， Month 及柱状图数据名称可更换

+
` + }, + { + name: 'Direction', + type: 'interface', + code: `

默认值：vertical（垂直）

+

可选值：vertical（垂直） , horizontal（水平）

+

说明：配置柱状图的方向

+
` + }, + { + name: 'ItemStyle', + type: 'interface', + code: `

默认值：itemStyle:{barWidth:8,barGap:'60%'}

+

说明：配置柱形的样式

+

itemStyle.barWidth非必填有默认值Number +

默认值：8 +

说明：配置柱形的宽度 +

itemStyle.barGap非必填有默认值String +

默认值：60% +

说明：配置柱形与柱形之间的间距 +

itemStyle.color非必填无默认值Function +

格式： +d + color: params =& gt; { + if(params.dataIndex % 2 == 0) { + return "#777777"; + } + return "#1F55B5"; +} + +

说明：根据数据数组下标配置特定的柱型颜色 +

itemStyle.barMinHeight非必填无默认值Number | string +

格式2% | 2 +

说明：设置柱子的最小高度，可以填具体的值或者百分比，如果填数值，将按echarts原生功能以像素来显示，如果填百分比，则是按数据最大值的百分比计算最小数据，如果小于最小数据就按最小数据显示，建议使用百分比 +

` + }, + { + name: 'Label', + type: 'interface', + code: `

默认值：

+
对象形式
+label:{
+    show:false,
+    position:'inside',
+    offset:[0,0]
+}
+
+
数组形式
+label:[
+    {
+        show:false,
+        position:'inside',
+        offset:[0,0]
+    },
+]
+
+

说明：柱状图的柱形文本配置

+label='Object' , 所有的柱形统一配置

+label='Array' , 可在其内部定义多个样式 ， 按顺序依次对不同名称的柱形进行配置

+

label.show非必填有默认值Boolean +

默认值：false +

说明：柱状图的柱形文本是否显示 +

label.position非必填有默认值String +

默认值：inside（内部） +

可选值：inside（内部） ， top（外部靠顶） ， bottom（外部靠底） ， left（外部靠左） ， right（外部靠右） ， insideLeft（内部靠左） ， insideRight（内部靠右） ， insideTop（内部靠上） ， insideBottom（内部靠底） ， insideTopLeft（内部左上） ， insideBottomLeft（内部左下） ， insideTopRight（内部右上） ， insideBottomRight（内部右下） +

说明：柱状图的柱形文本位置 +

label.offset非必填有默认值Array +

默认值：[0,0] +

说明：柱状图的柱形文本横向及纵向偏移量 +

label.formatter非必填无默认值Function +

格式： +

formatter:params=>{
+            if(params.name==='总进尺'){
+                if(params.seriesName==='Domestic'){
+                    params.value=2120
+                    params.data=2120
+                }else if(params.seriesName==='Abroad'){
+                    params.data=2000
+                    params.value=2120
+                }
+                return params.data+'m'
+            }
+           return params.data+'t'
+        }
+
+

说明：自定义柱状图的柱形文本信息 +

` + }, + { + name: 'LineDataName', + type: 'interface', + code: `

说明：需要转换为折线图的数据名称

+折柱混合图是建立在 barChart 的基础上实现的（不可颠倒），除了折线图的预测线 predict 属性，其它属性都能支持

+
` + }, + { + name: 'Markline', + type: 'interface', + code: `

格式：

+
markLine:{
+    top:38,
+    bottom:20,
+    color:'red'
+}
+
+

说明：柱状图中阈值线的相关配置

+

markLine.top非必填无默认值Number +

说明：配置将哪根 y 轴刻度线做为上阈值线 ， markLine.top 必须大于 MarkLine.bottom +

markLine.bottom非必填无默认值Number +

说明：配置将哪根 y 轴刻度线做为下阈值线 ， markLine.top 必须大于 MarkLine.bottom +

markLine.color非必填有默认值String +

默认值：#f43146 +

说明：配置阈值线颜色 +

` + }, + { + name: 'TopTipHtml', + type: 'interface', + code: `

默认值：

+
topTipHtml 回调函数控制自定义悬浮框：
+( params: Array,
+  ticket: string,
+  callback: (ticket: string, html: string)
+) => string | HTMLElement | HTMLElement[]
+
+

格式：

+
topTipHtml: (params, ticket, callback) => {
+  let htmlString = '';
+  htmlString+=params.value
+  return htmlString;
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+与 tooltip 区别：它只会定位在图像顶部，不随鼠标移动而改变位置;划入 axisPointer 区域不会使其展示，只有划到对应数据才会显型
+详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'Type', + type: 'interface', + code: `

默认值：bar（普通柱形）

+

可选值：bar（普通柱形） ， range（区间柱形） ， stack（堆叠柱形） ， both-sides（双向柱形） ， water-fall（瀑布柱形）

+

说明：配置柱状图类型

+type='bar'柱状图为普通柱状图 ， 通过柱形的高度来表现数据的大小

+type='range'柱状图为区间柱状图 ， 用于描述数据从最小值到最大值的区域
type='stack'柱状图为堆叠柱状图 , 用于展示数据叠加效果的区域
type='both-sides'柱状图为双向柱状图 , 两者数据值一正一负 ， 数据拼凑形成柱形
type='water-fall'柱状图为瀑布柱状图 ， 此时图中会自动添加一个 Total(总和)数据的柱形

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Padding', + type: 'interface', + code: `

说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比

+
` + }, + { + name: 'Legend', + type: 'interface', + code: `

默认值：

+
legend: {
+    show: false,
+    position:{
+        left:'center',
+        bottom:15
+    },
+    itemGap:28,
+    orient:'horizontal',
+    reverseEvent: false,
+    selectedMode:true,
+    icon:'circle',
+    itemHeight:14,
+    itemWeight:14,
+    textStyle:{
+        fontSize:12,
+        padding:[4,0,0,0]，
+        color:'#4e4e4e',
+        overflow:'none',
+    }
+}
+
+

说明：自定义图例

+

legend.show非必填有默认值Boolean +

默认值：false +

说明：图例是否显示 +

legend.itemGap非必填有默认值Number +

默认值：28 +

说明：设置图例的间隔 +

legend.type非必填无默认值String +

说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果 +

legend.width非必填无默认值Number +

说明：图例组件的整体宽度 +

legend.height非必填无默认值Number +

说明：图例组件的整体高度 +

legend.position非必填有默认值Object +

默认值： +

position:{
+    left:'center',
+    bottom:15
+}
+
+

说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

legend.orient非必填有默认值String +

默认值：horizontal(水平) +

可选值：horizontal（水平） 、 vertical（垂直） +

说明：图例的方向 +

legend.reverseEvent非必填有默认值Boolean +

默认值：false +

说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。 +

legend.selectedMode非必填有默认值Boolean +

默认值：true +

说明：是否可以通过点击图例改变系列的显示状态 +

legend.icon非必填有默认值String +

默认值：circle（圆形） +

可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形） +

说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效 +

legend.data非必填无默认值Array +

样式： +

data:[
+    {
+        icon:'image://public/image/LineChart/Domestic.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Domestic',
+    },
+    {
+        icon:'image://public/image/LineChart/Abroad.png',
+        iconChange:'image://public/image/LineChart/change.png',
+        name:'Abroad',
+    }
+    ],
+
+

说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称 +

legend.itemHeight非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的高度 +

legend.itemWidth非必填有默认值Nmuber +

默认值：14 +

说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25 +

legend.formatter非必填无默认值String/Function +

说明：用来自定义图例的文本显示。 +

legend.textStyle非必填有默认值Object +

默认值： +

textStyle:{
+    fontSize:12,
+    padding:[4,0,0,0]，
+    color:'#4e4e4e',
+    overflow:'none',
+    width:50,
+    rich:{  // 图例文本富文本配置
+      title:{  // 文本对应的名称
+        align:'right', // 设置文本右对齐
+        width:100  // 设置文本显示宽度
+      }
+    }
+}
+
+

说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。 +

legend.tooltip非必填无默认值Object +

示例： +

tooltip:{
+    show: true
+}
+
+

说明：图例是否显示悬浮提示框 +

` + }, + { + name: 'Tooltip', + type: 'interface', + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` + }, + { + name: 'XAxis', + type: 'interface', + code: `

默认值：图表数据data数组中data[0]对象的第一个 key 值

+

格式：

+
String类型
+xAxis:'Month'
+
+

说明：设置图表数据中哪个 key 值作为折线图的横坐标数据

+

格式：

+
Object类型
+xAxis:{
+    data:'Month'，
+    name:'Utils',
+    line:{
+        show:true,
+        lineStyle:{
+            color:'red',
+            type:'dashed',
+            width:2
+        }
+    },
+    interval:2,
+    fullGrid:true,
+    labelRotate:45,
+    ellipsis:{
+        overflow:'truncate',
+        labelWidth:20
+    },
+    nameLocation:'end',
+    nameTextStyle:{
+        fontSize:12,
+        color:#4e4e4e
+    }
+}
+
+

说明：自定义 x 轴配置(将原先的 String 类型的 xAxis、xAxisName、xAxisLine、xAxisInterval、xAxisFullGrid、xAxisLabelRotate、xAxisEllipsis 属性统一整合到 Object 类型的 xAxis 内部)

+

xAxis.data非必填有默认值String +

说明：设置图表数据中哪个 key 值作为折线图的横坐标数据(xAxis.data即String类型的xAxis值) +

xAxis.name非必填无默认值String +

说明：配置x轴文本名称（xAxis.name即xAxisName） +

xAxis.line非必填有默认值Object +

默认值： +

xAxisLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    },
+    text:{
+        color:theme==='dark'?#bbbbbb:#4e4e4e
+    }
+}
+
+

说明：设置 x 轴样式(xAxis.line即xAxisLine) +

xAxis.interval非必填有默认值Number | Function +

默认值：0 +

格式： +

// 当xAxisInterval为2时，x轴的label会每隔2个显示
+xAxisInterval: 2
+
+
// 当xAxisInterval为function时，x轴的label会根据函数的返回结果展示。
+// 返回true表示显示
+// 返回false表示不显示
+// index表示当前x轴数据的索引,value表示当前x轴数据的值
+xAxisInterval: (index,value) => {
+    if (index % 24 === 0) {
+        return true;
+    }
+    if (index === 61) {
+        return true;
+    }
+    return  false;
+},
+
+

说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（xAxis.interval即xAxisInterval） +

xAxis.fullGrid非必填有默认值Boolean +

默认值：false +

说明：设置图表是否顶格到 x 轴左右两边(xAxis.fullGrid即xAxisFullGrid) +

xAxis.show非必填有默认值Boolean +

默认值：true +

说明：设置x坐标轴是否显示 +

xAxis.labelRotate非必填无默认值Number +

默认值：false +

说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(xAxis.labelRotate即xAxisLabelRotate) +

xAxis.ellipsis非必填有默认值Object +

默认值：xAxis.ellipsis:{overflow:'none'} +

格式： +

xAxis.ellipsis:{
+    overflow:'truncate',
+    width:20
+}
+
+

说明：设置 x 轴刻度文本过长展示方式(xAxis.ellipsis即xAxisEllipsis) +

xAxis.nameLocation非必填有默认值String +

默认值：end +

可选值：end、center||middle、start +

说明：设置x轴文本位置 +

xAxis.nameTextStyle非必填有默认值Object +

默认值：{fontSize:12,color:'#4e4e4e'} +

说明：设置x轴文本样式 +

` + }, + { + name: 'YAxis', + type: 'interface', + code: `

格式：

+
数组格式
+yAxis: [
+    {
+        max:60,
+        min:0,
+        interval:10,
+        position:'left',
+        dataName:['Domestic'],
+        name:'value',
+        unit:'元',
+        nameTextStyle:{
+            padding:[0,0,0,-45]
+        }
+    },
+    {
+        max:90,
+        min: 0,
+        interval:15,
+        position:'right',
+        dataName:['Abroad'],
+        name: 'kal',
+        unit: '$',
+        offset:45,
+        nameTextStyle:{
+            padding:[0,-45,0,0]
+        }
+    }
+    ],
+
+
对象格式
+yAxis:
+    {
+        max: 60,
+        min: 0,
+        interval:5,
+        position:'right',
+        name: 'Percent(%)',
+        unit: '%',
+        minInterval:12,
+        maxInterval:8
+    },
+
+

说明：自定义 y 轴配置

+

yAxis.max非必填无默认值Number +

说明：自定义 y 轴最大值 +

yAxis.min非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴最小值 +

yAxis.interval非必填无默认值Number +

说明：自定义 y 轴数值刻度 +

yAxis.splitNumber非必填无默认值Number +

说明：自定义 y 轴分割线数量 ， 在定义 yAXis.interval 时 ， 此属性失效 +

yAxis.position非必填有默认值String +

默认值：left +

可选值：left 、 right +

说明：自定义 y 轴位置 +

yAxis.name非必填无默认值String +

说明：自定义 y 轴名称 +

yAxis.nameTextStyle非必填无默认值Object +

格式： +

nameTextStyle:
+    {
+        align:'right',
+        padding:[0,0,0,0],
+        color:'red',
+        fontSize:30
+    }
+
+

说明：自定义 y 轴标题文本样式 +

yAxis.unit非必填无默认值String +

说明：自定义 y 轴刻度单位 +

yAxis.dataName非必填有默认值Array +

默认值：全部的折线数据 +

说明：自定义哪条折线数据采用此 y 轴的属性，该属性仅在 yAxis 类型为 Array 时会生效。当有折线数据名未被 dataName 所包含，改折线数据样式按照 yAxis[0]配置 +

yAxis.offset非必填有默认值Number +

默认值：0 +

说明：自定义 y 轴相对于默认位置的偏移量 +

yAxis.show非必填有默认值Boolean +

默认值：true +

说明：y 轴是否显示 +

yAxis.labelTextStyle非必填有默认值Object +

默认值：{color:theme==='dark'?#bbbbbb:#4e4e4e,fontSize:12} +

说明：配置y轴刻度文本样式 +

yAxis.minInterval非必填无默认值Number +

说明：配置y轴最小刻度间隔 +

yAxis.maxInterval非必填无默认值Number +

说明：配置y轴最大刻度间隔 +

yAxis.splitLine非必填有默认值Object +

默认值： +

splitLine:{
+    show:true,
+    lineStyle:{
+        color:theme==='dark'?rgba(238,238,238,.1):rgba(25,25,25,.1),
+        type:'solid',
+        width:2
+    }
+}
+
+

说明：配置y轴刻度线样式 +

` + }, + { + name: 'DataZoom', + type: 'interface', + code: `

默认值：

+
dataZoom:{
+    start:0,
+    end:100,
+    show:false,
+    position:{
+        left:36,
+        bottom:20
+    },
+    height:24
+}
+
+

说明：设置折线图区域缩放轴是否展示及位置

+

dataZoom.start非必填有默认值Number +

默认值：0 +

说明：区域缩放轴的数据窗口范围的起始百分比 +

dataZoom.end非必填有默认值Number +

默认值：100 +

说明：区域缩放轴的数据窗口范围的结束百分比 +

dataZoom.show非必填有默认值Boolean +

默认值：false +

说明：是否展示区域缩放轴 +

dataZoom.position非必填有默认值Object +

默认值：position:{left:36,bottom:20} +

说明：
+自定义区域缩放轴的位置
+position:{top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比 +

dataZoom.style非必填有默认值Object +

格式： +

 style:{
+          // 背景底色
+          backgroundColor: '#111',
+          // 选中区域数据填充色
+          selectDataColor:'#314461',
+          // 未选中区域数据填充色
+          unSelectDataColor:'#454749',
+          // 选中区域的蒙层颜色
+          middleFillerColor:'rgba(49,68,97,.5)',
+          // 设置手柄样式
+          handleStyle:{
+            color:'red',
+            borderColor:'yellow',
+            shadowColor:'blue'
+          }
+        }
+
+

说明：自定义区域缩放轴的相关颜色样式配置 +

dataZoom.height非必填有默认值Number +

默认值：24 +

说明：设置区域缩放轴的高度 +

` + }, + { + name: 'DataRules', + type: 'interface', + code: `

说明：根据data数据设置data规则

+

格式：

+
dataRules:{
+    display:['Domestic']
+}
+
+

dataRules.display非必填无默认值Array +

说明：在display数组中的data数据才会生成在图表中 +

` + }, + { + name: 'Event', + type: 'interface', + code: `

格式：

+
 event:{
+    series：{
+      click:(parms)=>{
+        ...
+      },
+      mousemove:(params)=>{
+        ...
+      },
+      ...
+    },
+    ....
+    }
+
+

说明：自定义设置图表的处理事件,具体用法参考https://echarts.apache.org/zh/api.html#echartsInstance.on

+
` } ] } diff --git a/examples/sites/demos/apis/chart-wordcloud.js b/examples/sites/demos/apis/chart-wordcloud.js index 025e383687..d381c2d195 100644 --- a/examples/sites/demos/apis/chart-wordcloud.js +++ b/examples/sites/demos/apis/chart-wordcloud.js @@ -1,187 +1,117 @@ export default { mode: ['pc'], + apis: [ { name: 'chart-wordcloud', type: 'component', - props: [ - { - name: 'cancel-resize-check', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否禁用 resize 时的容器检测', - 'en-US': 'Whether to disable container detection during resize' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'change-delay', - type: 'number', - defaultValue: "'0'", - desc: { - 'zh-CN': '属性修改触发图表重绘回调的延迟', - 'en-US': 'Delay for triggering chart redrawing callback after attribute modification' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准', - 'en-US': - 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.' - }, - mode: ['pc'], - pcDemo: '' - }, + options: [ { - name: 'events', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '事件绑定', - 'en-US': 'Event binding' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'extend', - typeAnchorName: 'chart#IChartProps', - type: 'objcet', - defaultValue: '', - desc: { - 'zh-CN': 'echarts 的配置项', - 'en-US': 'Configuration items of echarts' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'height', + name: 'theme', type: 'string', - defaultValue: "'400px'", + defaultValue: 'light', + typeAnchorName: 'Theme', desc: { - 'zh-CN': '设置图表容器的高度。', - 'en-US': 'Set the height of the chart container.' + 'zh-CN': '主题', + 'en-US': 'Chart theme' }, mode: ['pc'], pcDemo: '' }, { - name: 'init-options', - type: 'object', - defaultValue: '', + name: 'color', + type: 'array | string', + defaultValue: '随主题', + typeAnchorName: 'Color', desc: { - 'zh-CN': 'init 附加参数', - 'en-US': 'Init Additional Parameters' + 'zh-CN': '图表颜色', + 'en-US': 'Chart color' }, mode: ['pc'], pcDemo: '' }, { - name: 'judge-width', - type: 'boolean', - defaultValue: 'false', - desc: { - 'zh-CN': '是否处理生成图表时的宽度问题', - 'en-US': 'Do you want to process the width issue when generating charts?' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'legend-visible', - type: 'boolean', - defaultValue: 'true', + name: 'tooltip', + type: 'object', + defaultValue: '默认显示', + typeAnchorName: 'Tooltip', desc: { - 'zh-CN': '是否显示图例', - 'en-US': 'Display legend' + 'zh-CN': '悬浮提示框内容配置', + 'en-US': 'Content configuration of floating prompt box' }, mode: ['pc'], pcDemo: '' }, { - name: 'not-set-unchange', + name: 'data', type: 'array', - defaultValue: '', + defaultValue: '无', + typeAnchorName: 'Data', desc: { - 'zh-CN': '未发生变化时不参加 setOption 的属性', - 'en-US': 'The setOption attribute does not change.' + 'zh-CN': '图表数据', + 'en-US': 'Chart data' }, mode: ['pc'], pcDemo: '' }, + { - name: 'resize-delay', + name: 'gridSize', type: 'number', - defaultValue: "'200'", + defaultValue: '16', + typeAnchorName: 'GridSize', desc: { - 'zh-CN': '窗口 resize 事件回调的延迟', - 'en-US': 'Delay of the window resize event callback' + 'zh-CN': '词云图文本间距', + 'en-US': 'Word cloud map text spacing' }, mode: ['pc'], pcDemo: '' }, { - name: 'resizeable', - type: 'boolean', - defaultValue: 'true', + name: 'sizeRange', + type: 'array', + defaultValue: '[14, 60]', + typeAnchorName: 'SizeRange', desc: { - 'zh-CN': '是否处理窗口 resize 事件', - 'en-US': 'Whether to process the window resize event' + 'zh-CN': '字体范围', + 'en-US': 'Font Range' }, mode: ['pc'], pcDemo: '' }, + { - name: 'set-option-opts', - type: 'boolean | object', - defaultValue: 'true', + name: 'rotationRange', + type: 'array', + defaultValue: '[0,0]', + typeAnchorName: 'RotationRange', desc: { - 'zh-CN': 'echarts setOption 的第二个参数', - 'en-US': 'Echarts setOption second parameter' + 'zh-CN': '文字旋转范围', + 'en-US': 'Text rotation range' }, mode: ['pc'], pcDemo: '' }, { - mode: [] - }, - { - name: 'theme', - type: 'object', - defaultValue: '', + name: 'rotationStep', + type: 'number', + defaultValue: '0', + typeAnchorName: 'RotationStep', desc: { - 'zh-CN': '自定义主题名称。;自定义主题对象。', - 'en-US': 'User-defined theme name. ;User-defined theme object.' + 'zh-CN': '文字旋转步值', + 'en-US': 'Text rotation step value' }, mode: ['pc'], pcDemo: '' }, { - name: 'theme-name', + name: 'shape', type: 'string', - defaultValue: '', - desc: { - 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效', - 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'tooltip-visible', - type: 'boolean', - defaultValue: 'true', + defaultValue: 'circle', + typeAnchorName: 'Shape', desc: { - 'zh-CN': '是否显示提示框', - 'en-US': 'Display dialog box' + 'zh-CN': '词云图形状', + 'en-US': 'Word cloud shape' }, mode: ['pc'], pcDemo: '' @@ -189,161 +119,52 @@ export default { { name: 'width', type: 'string', - defaultValue: "'auto'", - desc: { - 'zh-CN': '设置图表容器的宽度。', - 'en-US': 'Set the width of the chart container.' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'width-change-delay', - type: 'number', - defaultValue: "'300'", - desc: { - 'zh-CN': '容器宽度变化的延迟', - 'en-US': 'Container width change delay' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'options', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表配置项(无法与settings混用)', - 'en-US': 'Chart Configuration item (cannot be used together with settings)' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'settings', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '配置项', - 'en-US': 'Chart Configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'color-mode', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '自定义颜色模式', - 'en-US': 'Custom color mode' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-line', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标线', - 'en-US': 'Chart markings' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-area', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标志区域', - 'en-US': 'Chart symbol area' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'mark-point', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表标点', - 'en-US': 'Chart punctuation' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'loading', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '图表加载状态', - 'en-US': 'Chart loading status' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'data-empty', - type: 'object', - defaultValue: '', + defaultValue: '75%', + typeAnchorName: 'Width', desc: { - 'zh-CN': '暂无数据状态', - 'en-US': 'No data status available at the moment' + 'zh-CN': '词云图宽度', + 'en-US': 'Word cloud width' }, mode: ['pc'], pcDemo: '' }, { - name: 'before-config', - type: 'object', - defaultValue: '', - desc: { - 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发', - 'en-US': - 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items' - }, - mode: ['pc'], - pcDemo: '' - }, - { - name: 'after-config', - type: 'object', - defaultValue: '', + name: 'height', + type: 'string', + defaultValue: '80%', + typeAnchorName: 'Height', desc: { - 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发', - 'en-US': - 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items' + 'zh-CN': '词云图高度', + 'en-US': 'Word cloud height' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option', - type: 'object', - defaultValue: '', + name: 'maskImage', + type: 'string', + defaultValue: '无', + typeAnchorName: 'MaskImage', desc: { - 'zh-CN': '生成图之后获取 echarts 实例', - 'en-US': 'After generating the graph, obtain the echarts instance' + 'zh-CN': '词云图形状图片配置', + 'en-US': 'Word cloud shape image configuration' }, mode: ['pc'], pcDemo: '' }, { - name: 'after-set-option-once', - type: 'object', - defaultValue: '', + name: 'textColor', + type: 'function', + defaultValue: '无', + typeAnchorName: 'TextColor', desc: { - 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)', - 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)' + 'zh-CN': '词云图文本颜色', + 'en-US': 'Word cloud map text color' }, mode: ['pc'], pcDemo: '' } ], - events: [ { name: 'ready', @@ -392,24 +213,153 @@ export default { ], types: [ { - name: 'Options', + name: 'Data', + type: 'interface', + code: `

格式：

+
 data:[
+        {
+          name: 'visualMap',
+          value: 122199,
+        },
+        {
+          name: 'continuous',
+          value: 10288,
+        },
+        {
+          name: 'contoller',
+          value: 620,
+        },
+        ...
+ ]
+
+

说明：图表数据 ， name 为页面节点名称 ， value 与页面节点大小正相关

+
` + }, + { + name: 'GridSize', + type: 'interface', + code: `

默认值：16

+

说明：网格大小 ， 自定义各文本之间距离

+
` + }, + { + name: 'Height', + type: 'interface', + code: `

默认值：80%

+

说明：配置词云图形状高度

+
` + }, + { + name: 'MaskImage', + type: 'interface', + code: `

说明：配置词云图的形状图片

+
` + }, + { + name: 'RotationRange', + type: 'interface', + code: `

默认值：[0,0]

+

说明：文字旋转角度范围

+
` + }, + { + name: 'RotationStep', + type: 'interface', + code: `

默认值：0

+

说明：文字旋转步值 ， 未配置 rotationRange 时 ， rotationStep 值恒为 0 ； 配置 rotationRange 时 ， rotationStep 值不得为 0

+
` + }, + { + name: 'Shape', + type: 'interface', + code: `

默认值：circle（圆形）

+

可选值：circle（圆形） , cardioid（心形） , diamond（菱形） , triangle-forward（前三角形） , triangle（三角形） , pentagon（五角形） , star（星形）

+

说明：配置词云图形状

+
` + }, + { + name: 'SizeRange', + type: 'interface', + code: `

默认值：[14,60]

+

说明：字体大小范围

+
` + }, + { + name: 'TextColor', + type: 'interface', + code: `

格式：

+
textColor: (data) => {
+      return '#191919';
+    },
+
+

说明：自定义词云图每个文本的颜色 ； 若同时定义了属性color ， 则以textColor为准

+
` + }, + { + name: 'Width', + type: 'interface', + code: `

默认值：75%

+

说明：配置词云图形状宽度

+
` + }, + { + name: 'Theme', + type: 'interface', + code: `

默认值：light

+

可选值：

+

light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题

+
` + }, + { + name: 'Color', + type: 'interface', + code: `

默认值：

+

如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。

+
` + }, + { + name: 'Tooltip', type: 'interface', - code: ` - interface Options { - theme: string // 主题, 默认值: cloud-light - color: array | string // 颜色 - tipHtml: function // 悬浮提示框内容配置, 默认显示 - data: array // 图表数据(必填) - gridSize: number // 词云图文本间距, 默认值: 16 - sizeRange: array // 字体范围, 默认值: [14,60] - rotationRange: array // 文字旋转范围, 默认值: [0,0] - rotationStep: number // 文字旋转步值, 默认值: 0 - shape: string // 词云图形状, 默认值: circle - width: string // 词云图宽度, 默认值: 75% - height: string // 词云图高度, 默认值: 80% - maskImage: string // 词云图形状图片配置 - textColor: function // 词云图文本颜色 - }` + code: `

默认值：

+
tooltip 提示框组件：tooltip.show = true 默认显示
+
+

格式：

+
tooltip: {
+  show: true,
+  formatter: (params, ticket, callback) => {
+    let htmlString = '';
+    params.map((item, index) => {
+      if (index === 0) htmlString += item.name + '<br/>';
+      htmlString += 
+      \` & lt; div& gt;
+          & lt; i style = "display:inline-block;width:10px;height:10px;background-color:\${item.color};" & gt;& lt; /i>
+    & lt; span style = "margin-left:5px;color:#ffffff" & gt;
+              & lt; span style = "display:inline-block;width:100px;" & gt; \${ item.seriesName } User & lt; /span>
+    & lt; span style = "font-weight:bold" & gt; \${ item.value } %& lt; /span>
+    & lt; span style = "color:gray" & gt; out & lt; /span>
+    & lt; span style = "color:red" & gt; \${ 100 - item.value } %& lt; /span>
+    & lt; /span>
+    & lt; /div>\`;
+    });
+return htmlString;
+  }
+};
+
+

说明：通过回调函数的参数，自行制作一个 HTML 片段
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#tooltip.formatter

+
` } ] } diff --git a/examples/sites/src/assets/markdown.less b/examples/sites/src/assets/markdown.less new file mode 100644 index 0000000000..eaa6d2ef5c --- /dev/null +++ b/examples/sites/src/assets/markdown.less @@ -0,0 +1,128 @@ +.github-markdown-body { + font-size: 14px; + color: var(--ti-base-color-common-5); + + p { + line-height: 2rem; + color: var(--ti-base-color-common-5); + } + + a { + color: #007dff; + text-decoration: none; + + &:hover, + &:active { + text-decoration: underline; + } + } + + hr { + height: 0; + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #ddd; + + &::before { + display: table; + content: ''; + } + + &:after { + display: table; + clear: both; + content: ''; + } + } + + h1 { + color: var(--ti-base-color-common-7); + } + + h2, + h3, + h4, + h5, + h6 { + color: var(--ti-base-color-common-7); + margin-top: 15px; + margin-bottom: 15px; + line-height: 1.1; + } + + blockquote { + margin-bottom: 1rem; + + p { + font-size: 14px; + } + } + + ul { + list-style: decimal; + padding-left: 25px; + + li { + list-style: disc; + color: var(--ti-base-color-common-6); + margin: 5px 0; + } + } + + ol { + list-style: decimal; + padding-left: 25px; + + li { + color: var(--ti-base-color-common-2); + margin: 5px 0; + list-style: decimal; + } + } + + table { + color: var(--ti-base-color-common-2); + } + + code { + font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace; + margin: 0; + padding: 2px 6px; + color: #c0341d; + background: #fbe5e1; + border-radius: 4px + } + + pre { + code { + font-size: 14px; + max-width: initial; + overflow: initial; + line-height: 2; + word-wrap: normal; + display: block; + overflow-x: auto; + padding: 0.5rem 1rem; + margin-bottom: 1rem; + border: 1px solid var(--ti-base-color-common-1); + background: var(--ti-base-color-white); + color: #dd4a68; + + &>.hljs-number { + color: blue; + } + + &>.hljs-string { + color: green; + } + } + } + + .v-md-hljs-css code { + margin: 0 3rem; + } +} + +// 子级标题样式 \ No newline at end of file diff --git a/examples/sites/src/assets/md-preview.less b/examples/sites/src/assets/md-preview.less new file mode 100644 index 0000000000..b14ff51369 --- /dev/null +++ b/examples/sites/src/assets/md-preview.less @@ -0,0 +1,208 @@ +// .main-editor{ +.default-theme { + color: var(--ti-base-color-common-6); + + img { + border: none; + padding: 0; + } + + p { + line-height: 2rem; + padding: 0; + } + + pre *, + code * { + font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace; + } + + table { + width: 100%; + + tr { + th { + color: var(--ti-base-color-common-2); + font-weight: normal; + + &:not(:last-child) { + border-right-color: transparent; + } + } + + td { + color: var(--ti-common-color-info-normal); + + &:nth-child(2) { + color: #bf2a5c; + } + + &:first-child { + font-weight: 600; + } + + &:not(:last-child) { + border-right-color: transparent; + } + } + + th, + td { + border: 1px solid var(--ti-common-color-line-dividing); + } + + } + + thead tr { + background: var(--ti-base-color-bg-1); + } + + tbody { + + tr, + tr:nth-child(2n) { + background: var(--ti-common-color-bg-white-normal); + + &:hover { + background-color: var(--ti-base-color-bg-1); + } + } + } + } +} + +.md-editor-preview { + font-size: 14px; + + &-wrapper { + padding: 0; + } + + p+pre { + margin-top: 0.5rem; + } +} + +// &.md-editor-previewOnly{ +// background: var(--ti-base-color-bg-1); +// color: var(--ti-base-color-common-5); +// } + +// &.api-table{ +// background: none; +p.ev_expand_title { + // background-color: var(--ti-base-color-brand-1); + padding-top: 12px; + padding-bottom: 8px; + border-top: 1px solid #dfe1e6; + margin-top: 44px; + padding-left: 48px !important; + color: #c0341d; + font-weight: 700; + font-size: 16px; + + &>span.ev_expand_type, + &>span.ev_expand_defaults, + &>span.ev_expand_required { + color: #000; + padding: 1px 16px; + margin-top: 5px; + margin-left: 24px; + min-width: 72px; + text-align: center; + border-radius: 3px; + font-size: 12px; + float: right; + height: 21px; + line-height: 21px; + background-color: var(--ti-base-color-bg-1); + font-weight: 400; + } + + &>.ev_expand_required { + margin-right: 48px; + } +} + +// 子级p标签说明、默认值等样式 +p.ev_expand_introduce { + margin-left: 48px; + padding-top: 8px; + padding-bottom: 8px; +} + +// } + +.default-theme h1, +.default-theme h2, +.default-theme h3, +.default-theme h4, +.default-theme h5, +.default-theme h6 { + margin: 0; + color: var(--ti-base-color-common-7); +} + +.default-theme h2, +.default-theme h3, +.default-theme h4, +.default-theme h5, +.default-theme h6 { + color: var(--ti-base-color-common-7); + margin-top: 15px; + margin-bottom: 15px; + line-height: 1.1; +} + +.default-theme code { + padding: 2px 6px; + color: #c0341d; + background: #fbe5e1; + border-radius: 4px; + line-height: 1.25; +} + +.default-theme pre { + box-shadow: none; + + &::before { + height: 0; + } + + .copy-button { + display: none; + } + + code { + &[language]:before { + content: ''; + } + + font-size: 14px; + max-width: initial; + overflow: initial; + line-height: 2; + word-wrap: normal; + display: block; + overflow-x: auto; + padding: 0.5rem 1rem; + margin-bottom: 1rem; + border: 1px solid var(--ti-base-color-common-1); + background: var(--ti-base-color-white); + color: #dd4a68; + + &.language-d { + border: none; + } + + &.language-css { + border: none; + padding: 4px 16px; + background-color: #fff; + margin: 0 48px; + color: #f50505; + } + } +} + +// } \ No newline at end of file diff --git a/examples/sites/src/main.js b/examples/sites/src/main.js index c90ac88bb5..25abda9e96 100644 --- a/examples/sites/src/main.js +++ b/examples/sites/src/main.js @@ -17,6 +17,8 @@ import './style.css' // 覆盖默认的github markdown样式 import './assets/custom-markdown.css' import './assets/custom-block.less' +import './assets/markdown.less' +import './assets/md-preview.less' import { i18n } from './i18n/index' import { router } from './router' diff --git a/examples/sites/src/views/components/async-highlight.vue b/examples/sites/src/views/components/async-highlight.vue index 40e9cbeb96..f36d57476e 100644 --- a/examples/sites/src/views/components/async-highlight.vue +++ b/examples/sites/src/views/components/async-highlight.vue @@ -37,7 +37,9 @@ export default defineComponent({ () => { setTimeout(() => { // highlight和其他同步任务叠加容易形成长任务，改成异步消除长任务。 - if (props.types && props.types === 'ts') { + if (props.types && props.types === 'html') { + highlightCode.value = props.code + } else if (props.types && props.types === 'ts') { highlightCode.value = getFormatCodes(props.types) } else { highlightCode.value = hljs.highlightAuto(props.code).value diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue index 2533585c96..e5661f1b79 100644 --- a/examples/sites/src/views/components/components.vue +++ b/examples/sites/src/views/components/components.vue @@ -158,7 +158,12 @@ >