bytev-charts-beta1.0
Version:
测试版-1.0,版本号为小版本; 基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
266 lines (186 loc) • 12.2 kB
Markdown
一个基于echarts和JavaScript及ES6封装，可以直接调用的图表组件库，内置多套主题设计，支持一键换肤，简单快捷，且支持用户自定义配置；
https://www.npmjs.com/package/bytev-charts-beta
[]: <> (稳定版本 : bytev-charts@版本号（如：bytev-charts@1.0.0）)
[]: <> (目前发布的版本只有 bytev-charts)
地址: https://www.npmjs.com/package/bytev-charts
地址: bytev-charts-beta1.0
原生 - 实时版本: beta
原生 - 历史版本: version
npm install bytev-charts
[]: <> ( 或)
[]: <> ( npm install bytev-charts-beta)
[]: <> ( 或)
[]: <> ( npm install bytev-charts-v)
若启动提示还需install其余插件, 则运行npm install @babel/runtime-corejs2即可;
npm install @babel/runtime-corejs2
调用方式和原生js一致，在main.js中注册引入 import ByteV from 'bytev-charts'
自定义设置为vue的属性 如:
Vue.prototype.$bytev = ByteV;
```js
<script src="js/index.js" type="module">
import ByteV from './ByteV.js'
//后续代码及调用
ByteV.
</script>
```
```js
/*
* 初始化主题 (每个主题的ID 可参见example示例)
* 执行后则后续所有init的图表都自动使用此套主题
* 不调用此方法则使用默认主题-加勒比蓝
*/
ByteV.initTheme('主题ID')
/*
* 切换主题
* 图表实例.setTheme('主题ID'),则只修改该图表的主题
* ByteV.setTheme('主题ID'),则修改全部图表主题,并且后续图表也使用修改后的主题
*/
//切换指定图表主题
实例.setTheme('主题ID')
//切换全部图表主题
ByteV.setTheme('主题ID')
/*
* 创建图表
* 创建图表实例(每个图表ID 可参见example示例)
* 参数: element - dom对象(应该是唯一且不重复的)
* 图表ID - 可不传,不传默认返回空echarts对象
* data - 图表数据,可不传,传则自动渲染数据,
* 不传可后续用返回的实例调用.setData(data)来更新数据
*
* 返回值: 返回该图表的实例对象,
* 实例对象有通用属性option, 和通用方法 setData()、setOption()
*/
ByteV.init( element, '图表ID', data)
/*
* 修改更新图表option设置项的方法
* 用户可通过 实例.option 获取其设置项,并自定义修改其中的值,
* 修改后调用 实例.setOption() 即可刷新页面图表,也可与不调用,而是等setData()时一并更新,
* 调用 实例.setData() 也会自动刷更新option和刷新该图表
*/
图表实例.setOption()
/*
* 动画效果
* 使用'ByteV'调用则是操作全部图表的动画
* 使用'图表实例'调用只操作对应该图表的动画
*/
//播放：
ByteV.playAnimation()
实例.playAnimation()
//停止：
ByteV.stopAnimation()
实例.stopAnimation()
//关闭：
ByteV.offAnimation()
实例.offAnimation()
/*
* 自动轮播
* 使用'ByteV'调用则是操作全部图表的自动轮播
* 使用'图表实例'调用只操作对应该图表的自动轮播
*/
//开启：
ByteV.openLoopTooltip()
实例.openLoopTooltip()
//关闭：
ByteV.offLoopTooltip()
实例.offLoopTooltip()
```
1.0.2版:
新增“横向圆角堆叠柱状图”，“横向菱形堆叠柱状图”
1.0.3版:
1. echarts的柱状图折线图-增加了 支持调用setData()方法时一起设置样式的功能,
每个对象里面可以写echarts的官方属性,则对应组件会以用户写的样式为准来覆盖组件默认内置样式;
2. 新增组件-堆叠柱线图
1.0.4版：
1. 柱状图 饼状图 的x y 轴调整为数组结构, 方便用户自己在setData时手动自定义使用哪个轴线;
2. 细阴影环形图的数据data中,为每个对象增加了parent属性, parent属性为string类型,
有该属性则插件自动求和该parent的值并显示到环形中间;
1.0.5 - 1.0.6版：
1. 拆分出横向柱状图和柱线图组件类，规范横向柱状图和柱线图命名，新增几种横向柱状图图表;\
2. 结构代码优化整理:
将所有的series抽成独立的js管理;
3. 基本饼状图/基本环形图优化调整:
3.1 调整默认center位置
3.2 基本环形图增加支持每个数据的parent属性, parent属性为string类型,
有该属性则插件自动求和该parent的值并显示到环形中间;
3.3 option下新增自定义属性center和radius,如果用户定义了这两个属性,则拼接的series直接以这两个属性动态计算
4. 环形图(环星阴影图和环形十字准星图及玉珏图)优化调整:
4.1 抽成环形图左右结构分类统一管理,并抽出拼接换算图例、parent的功能到父类js统一管理
4.2 新增根据容器宽高比自动设置环图center位置,和自动设置图例展现方式(普通图例or可滚动翻页的图例/)
4.3 图例新增unitType属性,支持根据用户设置来动态切换图例的三种单位文字显示方式:
option.legend.unitType: 默认'none';
'' 或 'none' 或 null - 只显示名称,
'value' - 显示名称+数值,
'per' 或 '%' - 显示名称+百分比)；
4.4 图例的icon属性新增自定义属性: '竖线' - 'verticalBar'
- option.legend.icon: (默认rect)
支持属性: 除echarts的('circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'),
还新增了自定义属性'竖线' - 'verticalBar'
4.5 优化环形图parent有无时label的动态样式和优化选中效果;
4.6 option下新增自定义属性center和radius,如果用户定义了这两个属性,则拼接的series直接以这两个属性动态计算
5. 命名调整(之前版本不受影响):
5.1 横向菱形堆叠柱状图(v1.0.05版前BarHorizontalStackDiamond) 变更为=> 'HorizontalBarStackDiamond'
5.2 横向圆角堆叠柱状图(v1.0.05版前BarHorizontalStackFillet) 变更为=> 'HorizontalBarStackFillet'
5.3 柱装饰折线图(v1.0.5版前LineBar) 变更为=> 'LineDecorateBar'
1.0.7-1.0.8版：
1. 修复用户自定义图表.option.color时,部分图表(如阴影环形图)的阴影颜色没有跟随变化的问题
2. initTheme()和setTheme() 支持用户传入自定义颜色值数组, 届时对应图表的配色和装饰配色全根据自定义传入的色值数组取值;
自定义的图表.option.color 比 theme颜色优先级高,但option.color只生效于图表部分,装饰配饰的颜色还是取theme中的;
图表.option.color 和 theme 同时都自定义的时候, 图表部分的颜色优先取option.color,配饰装饰仍然继续取theme的色值;
3. 饼状图、环形图优化
3.1 修复在设置数据时,数据第一个为0时产生的计算错误问题;
3.2 修复在设置数据有parent时,数据自动++求和时精度不够的问题;
3.2 细阴影环形图内层带透明度的环形,修改和外层支持同样的悬浮事件label等;
3.3 修复基本饼状图、基本环形图动态修改option直接子级属性center和radius不同步生效到series中的bug;
3.3 修复基本饼状图、基本环形图即有parent父级、又有radius时内外环动态布局;
4. three组件功能:
初始化: ByteV.init(elment, '3D');(npm项目支持, 原生min.js暂不支持)
1.0.8-1.0.9版：
1. 翻牌器组件, 增加option设置项: valueSameUpdate - 数值相同时是更新翻牌效果(默认false,数值相同不触发翻牌动作)
2. 优化示例页面: 3D示例中的江苏地图示例, 增加风机模型
3. 优化initTheme和seTheme时传入自定义色值数组的方法,修复色值constructor的报错(ThemeFactory-getTheme-default)
4. 修复饼状图和环形图在数据只有一个的时候占比计算初NaN的问题
5. (1.0.9)bug修复： initTheme（）中没有皮肤ID时default的自传色值数组判断逻辑补充
6. 新增了“径向占比图（RadialPieGraph）”，用来和之前的“径向条形图（RadialBarGraph）”区分；一个按占比来表现，一个按长度来表现；
7. 柱状图、折线图、横向柱状图、折线图 新增组件
8. 环形图关闭了默认根据容器宽高比来动态摆放右侧图例为两列的功能，因不同用户容器的宽高比不一定均适应两列；
9. 环形图新增方法：showLegendBackground（boolean）；
ture-图例有对应主题色的背景；false-没有对应主题色的背景（没有背景时所占区域较小，适用于容器较小或是图例过多时）；
调用方法：使用实例.showLegendBackground(boolean)； 参数默认为true（即有背景）
1.0.9版：
1. 为了减轻重量，将原bytev-charts拆分为bytev-charts和bytev-3d
2. 新增了一些charts组件(进度条/仪表盘)
3. 柱状图和折线图统一默认双Y轴, 右侧Y轴默认不显示, 当setData传入的数据,最后一个系列中有yAxisIndex属性,并且该属性值为1时,右侧Y轴显示(此为echarts原有属性),并且使用该系列的单位(beta0.8.16)
4. 将直角坐标系类charts图表的tooltip, 增加了默认显示单位的功能, setData()传入的数据系列有对应unitY的, 则在tooltip中在对应值后面显示 该单位（beta0.8.17）;
5. 对charts图表的tooltip进行了优化,雷达图、饼状图也支持，非自带此功能的保留原有样式（beta0.8.18）；
6. bytev-charts-beta1.0@0.8.19 - beta1.0 中小版本 0.8.19 : 先临时将两个进度条注释掉了, 因为在低版本的vue中会报错, 后续解决后恢复
7. bytev-charts-beta1.0@0.8.20 - 修复resize()方法不会让ComponentContainer容器跟随重新计算的问题(20230308)
8. bytev-charts-beta1.0@0.8.21 - 环形图的图例unitType增加"value&per(value&%)"分类: 图例后面显示 数值 百分比;"per&value(%&value)"分类: 图例后面显示 百分比 数值 ;
9. 优化PieComponent.class组件中循环判断饼状图数据是否包含parent时取不到时报错的bug
10.bytev-charts-beta1.0@0.8.25 - 优化直角坐标系类的tooltip, 显示"系列名称 数量单位"; 直角坐标系类和饼图类setData验证转换value的格式为number类型; 优化玉珏图/径向条形图;