项目地址 yimian/echarts
- proportion, summation 两种 magicType;
- 获取当前 magicType;
- 设置默认 magicType;
- 设置 y轴 可读性格式;
- 设置当前 magicType;
- showLoading, showError
proportion 即占比图表,用于展示单个数据项在所在系列数据中所占百分比
上图中 1 为 proportion 的 icon;2 为图表纵坐标的百分比显示;3 为数据项标签,包含数据项所属系列名称、数据项名称、数据项绝对值、数据项占比。
summation 即累计图表,用于展示系列数据中当前数据项累计值
上图中 1 为 summation 的 icon;2 为图表纵坐标的可读性格式(参见4);3 为数据项标签,包含数据项所属系列名称、数据项名称、数据项绝对值。
echartsInstance.getCurrentMagicType()
示例如下,此设置中默认 magicType 为 summation
var option = {
toolbox: {
feature: {
magicType: {
defaultType: 'summation', // 默认 magicType
type: ['bar', 'line', 'stack', 'tiled', 'proportion', 'summation'],
},
}
},
}
var option = {
yAxis: {
axisLabel: {
formatter: {
humanReadable: true, // 是否开启可读性格式,如不设置, 则不生效
locale: 'en-US', // 可读性本地语言设置,默认为 'en-US'
unit: '', // 单位
},
}
},
}
P.S. locale 目前支持: en-US -> ['k', 'm', 'b', 't'] zh-CN -> ['万', '亿']
echartsInstance.setCurrentMagicType(type, isStack, isPercentage)
- type 为 magicType: [summation, proportion, bar, line, stack, tiled]
- isStack:为 true 时显示堆叠(即再应用 stack), 否则正常平铺(即再应用 tiled)
- isPercentage: 为 true 时, 相当于对当前 type 再叠加 proportion 的效果, 否则正常展示绝对值;
增加 showLoading,在 theme 中或者 option 中设置 loading.refresh, 当为 true 时, loading 效果不中断; showError 效果如图:
showLoading(type, opts)
(type?: string, opts?: Object) 显示加载动画效果。可以在加载数据前手动调用改接口显示加载动画,在数据加载完成后调用 hideLoading 隐藏加载动画。 参数: type: 可选,加载动画类型, 默认为 'default' opts: 可选,加载动画配置项,跟type有关,下面是默认配置项:
default: {
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
}
showError(type, opts)
(type?: string, opts?: Object) 显示加载错误效果。可以在加载数据出错时前手动调用改接口显示加载错误的动画,在数据重新加载完成后调用 hideLoading 隐藏加载错误的动画。 参数: type: 可选,加载动画类型, 默认为 'error' opts: 可选,加载动画配置项,跟type有关,下面是默认配置项:
default: {
text: '加载数据失败, 请刷新重试',
color: '#c23531',
textColor: '#aaa',
maskColor: '#fff',
zlevel: 0
}