Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

q #358

Open
wants to merge 86 commits into
base: master
Choose a base branch
from
Open

q #358

Changes from 1 commit
Commits
Show all changes
86 commits
Select commit Hold shift + click to select a range
6203dc3
Update README.md
16cheng Mar 30, 2019
1b2980d
Delete wxcharts-min.js
16cheng Apr 1, 2019
2e9a5c8
Delete area.gif
16cheng Apr 1, 2019
613367a
Delete area.png
16cheng Apr 1, 2019
0f961ac
Delete column.gif
16cheng Apr 1, 2019
c2fdd8e
Delete column.png
16cheng Apr 1, 2019
219dfd3
Delete curve-line.png
16cheng Apr 1, 2019
4d8084d
Delete line.gif
16cheng Apr 1, 2019
baaaaa1
Delete line.png
16cheng Apr 1, 2019
7801b97
Delete pie.gif
16cheng Apr 1, 2019
00797a3
Delete pie.png
16cheng Apr 1, 2019
088c77c
Delete radar.png
16cheng Apr 1, 2019
d39af15
Delete ring.gif
16cheng Apr 1, 2019
3a07fbe
Delete ring.png
16cheng Apr 1, 2019
4550381
Delete scrollLine.gif
16cheng Apr 1, 2019
0a5a2bd
Delete tooltip.gif
16cheng Apr 1, 2019
0f043fe
Update wxcharts.js
16cheng Apr 1, 2019
9d5f7e6
修改为uni-app版本,支持跨端显示
16cheng Apr 1, 2019
dd4f28b
uni-app示例
16cheng Apr 1, 2019
87ffb5c
示例图片
16cheng Apr 1, 2019
19f859c
示例图片
16cheng Apr 1, 2019
a429d64
修改说明文件
16cheng Apr 1, 2019
a888dd9
Update README.md
16cheng Apr 1, 2019
d2230df
修改说明
16cheng Apr 1, 2019
48aba51
Merge branch 'master' of github.com:16cheng/uni-wx-charts
16cheng Apr 1, 2019
9c86971
修改说明
16cheng Apr 1, 2019
b1ecb7f
修改说明
16cheng Apr 2, 2019
278289c
修改说明
16cheng Apr 2, 2019
b0d48a9
修改说明
16cheng Apr 2, 2019
8f8f3d5
修改说明
16cheng Apr 9, 2019
c145a6b
修改说明
16cheng Apr 9, 2019
4ee1722
修改说明
16cheng Apr 9, 2019
ed819a4
uni-app程序示例
16cheng Apr 9, 2019
1e47eff
修改说明
16cheng Apr 9, 2019
22bb683
修改说明
16cheng Apr 9, 2019
36baf3a
支持支付宝小程序
16cheng Apr 12, 2019
35d00f4
支持支付宝小程序
16cheng Apr 12, 2019
d82c893
支持支付宝/百度/头条小程序跨全端
16cheng Apr 14, 2019
182f515
跨全端支持
16cheng Apr 14, 2019
1e92333
新增横屏模式
16cheng Apr 15, 2019
34e5d1f
新增横屏模式
16cheng Apr 15, 2019
5100379
增加圆弧进度图
16cheng Apr 16, 2019
cb37e4d
增加圆弧进度图
16cheng Apr 16, 2019
3d002ff
增加示例图片
16cheng Apr 17, 2019
2e15618
增加动图展示
16cheng Apr 17, 2019
b8987a5
自定义文案事例
16cheng Apr 17, 2019
6f39f13
改造图表拖拽跨端使用
16cheng Apr 19, 2019
f766886
增加拖拽示例
16cheng Apr 19, 2019
e23c983
增加拖拽示例
16cheng Apr 19, 2019
d5d38de
新增拖拽滚动条显示进度
16cheng Apr 21, 2019
7b54c4a
修复拖拽模式下区域图折线连接错位
16cheng Apr 22, 2019
28685c0
柱状图自定义颜色
16cheng Apr 28, 2019
94b2e84
新增opts.title.offsetY参数
16cheng Apr 30, 2019
36ca0a5
新增仪表盘
16cheng May 1, 2019
8049f33
增加仪表盘
16cheng May 4, 2019
b018b03
更新说明
16cheng May 5, 2019
110881d
修改说明
16cheng May 5, 2019
ca19e2c
修改说明
16cheng May 5, 2019
3bc75c8
完善圆弧进度图
16cheng May 5, 2019
3274b80
改造示例
16cheng May 5, 2019
5bee7f3
改造示例
16cheng May 5, 2019
5cd4f12
增加虚线网格设置
16cheng May 6, 2019
cf47909
增加虚线网格
16cheng May 6, 2019
0159227
格式化Y轴示例
16cheng May 6, 2019
2d99ce0
解决组件问题
16cheng May 6, 2019
554440d
初步解决组件问题
16cheng May 7, 2019
77e2640
增加H5演示站
16cheng May 8, 2019
2637327
取消H5站点
16cheng May 8, 2019
b53e324
增加上线示例
16cheng May 8, 2019
d99d030
更新演示示例
16cheng May 8, 2019
de9f13e
修复Android9.0下文字标签只显示第一个的bug
16cheng May 9, 2019
97beaf6
修复Android9.0bug
16cheng May 9, 2019
0001e02
更改H5端模板写法,修复传入`空数组`导致客户端卡死的问题,修复传入null值线段断点不显示问题
16cheng May 10, 2019
1d8e5c8
更名为uCharts,增加初始显示右侧图表功能
16cheng May 13, 2019
1b6bff3
新增K线图,修复tooltip
16cheng May 14, 2019
96c91e0
新增混合图
16cheng May 15, 2019
ba8c4b3
新增堆叠图,温度计图表
16cheng May 19, 2019
e4a2fe8
增加柱状图类tooltip效果,增加mix图area图形绘制
16cheng May 20, 2019
1aa06c0
新增QQ交流群二维码
16cheng May 20, 2019
12e0f6c
修复堆叠图bug,修改柱状图类tooltip效果
16cheng May 20, 2019
b4fe502
修改堆叠图bug
16cheng May 20, 2019
4f11e48
停更通知,即将转移代码到码云托管
16cheng May 22, 2019
f3fc8f4
Update README.md
16cheng Jun 16, 2019
0b8086f
停止更新
16cheng Jun 16, 2019
f6b63a6
github停止更新,转至码云平台
16cheng Jun 16, 2019
9ee29ff
项目转至码云平台https://gitee.com/uCharts/uCharts
16cheng Jun 19, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
增加虚线网格设置
16cheng committed May 6, 2019
commit 5cd4f12122c8bab9e348a79ba4a72ce5194b2c71
177 changes: 113 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
@@ -5,12 +5,14 @@

## 新增`仪表盘`图,图表类型`gauge`,可以高度自定义,参数请参考demo。
## 原`圆弧进度条`的图表类型变更为`arcbar`,新增起始、结束角度自定义,新增背景颜色自定义,新增`整圆进度图`,参数请参考demo。
## 完善X轴Y轴网格设置,增加X轴网格设置,增加XY轴`虚线网格`绘制,`gridType`网格线型 'solid'为实线、'dash'为虚线。

## 更新记录
- [ ] 2019.05.xx 计划加入柱状图、饼图、环形图、雷达图等`ToolTip`事件
- [ ] 2019.05.xx 计划加入`堆叠图`、`条状图`、`K线图`、`分时图`
- [ ] 2019.05.xx 计划完善X轴Y轴网格设置,增加X轴网格设置,增加XY轴`虚线网格`绘制。
- [ ] 2019.05.08 计划加入`第二种仪表盘样式`,
- [ ] 2019.05.08 计划加入`第二种仪表盘样式`,增加《亲手教您如何改造wx-charts,打造您的专属图表》教程。
- [x] 2019.05.06 完善X轴Y轴网格设置,增加X轴网格设置,增加XY轴`虚线网格`绘制,`gridType`网格线型 'solid'为实线、'dash'为虚线。整理并归类帮助文档。
- [x] 2019.05.05 完善`圆弧进度图`增加起始结束角度自定义,新增背景颜色自定义,新增`整圆进度图`,参数请参考demo。
- [x] 2019.05.04 完善`仪表盘`更新数据时`指针切换动画`,增加`仪表盘数据标签`。
- [x] 2019.05.01 新增`仪表盘`图,图表类型`gauge`,可以高度自定义,参数请参考demo。注意原`圆弧进度条`的图表类型变更为`arcbar`,给您带来不便请谅解
@@ -55,11 +57,13 @@
- 图表样式均可自定义,懂js的都可以读懂插件源码,直接修改wxcharts.js源码即可。
- 本插件原为我公司产品所用,经过大量测试,反复论证并加以改造而成,请各位放心使用。

## 亲手教您如何改造wx-charts
为何要改造wx-charts?
并不是所有图表插件直接拿来就可以满足客户需求,如果您的UI设计师设计一个图表,如下图:
## 亲手教您如何改造wx-charts,打造您的专属图表
- 为何要改造wx-charts?
- 并不是所有图表插件直接拿来就可以满足客户需求,如果您的UI设计师设计一个图表,如下图:

![](https://github.com/16cheng/uni-wx-charts/blob/master/example/uni-app/static/example.gif?raw=true)
您会发现这个图表即使在echarts里也不是很好实现,那么就需要我们自己动手去实现。下面就让我们一起来完成,本文旨在抛砖引玉,希望各位朋友能够更好的应用wx-charts来完成您的项目,如果您有更好的设计,请提交您的PR到github[uni-wx-charts跨端图表](https://github.com/16cheng/uni-wx-charts),帮助更多朋友,感谢您的付出及贡献!

- 您会发现这个图表即使在echarts里也不是很好实现,那么就需要我们自己动手去实现。下面就让我们一起来完成,本文旨在抛砖引玉,希望各位朋友能够更好的应用wx-charts来完成您的项目,如果您有更好的设计,请提交您的PR到github[uni-wx-charts跨端图表](https://github.com/16cheng/uni-wx-charts),帮助更多朋友,感谢您的付出及贡献!

## [wx-charts跨端图表改造教程(暂未完成,请关注)](https://github.com/16cheng/uni-wx-charts/wiki/%E4%BA%B2%E6%89%8B%E6%95%99%E6%82%A8%E5%A6%82%E4%BD%95%E6%94%B9%E9%80%A0wx-charts)

@@ -198,36 +202,67 @@

## 参数说明


###通用基础配置项

| 属性 | 类型 | 默认 |说明|
| :------ | :-----: | :-----: | :------------ |
| :------ | :-----: | :-----: | :-------------------- |
|opts |Object| | |
|opts.canvasId | String|required|微信小程序canvas-id|
|opts.width |Number |required| canvas宽度,单位为px`H5端高分屏需要乘像素比`|
|opts.height| Number| required |canvas高度,单位为px`H5端高分屏需要乘像素比`|
|`opts.pixelRatio`| Number| required |`新增参数,像素比,默认为1,非H5端引用无需设置`|
|`opts.rotate`| Boolean| 默认false |`新增参数,横屏模式,默认为false`|
|`opts.fontSize`| Number | 默认13px |`新增参数,全局默认字体大小(可选,单位为px,默认13px)高分屏不必乘像素比,自动根据pixelRatio计算`|
|opts.type|String |required| 图表类型,可选值为pie, line, column, area, ring, radar, arcbar, gauge|
|opts.pixelRatio| Number| required |像素比,默认为1,非H5端引用无需设置|
|opts.rotate| Boolean| 默认false |横屏模式,默认为false|
|opts.fontSize| Number | 默认13px |全局默认字体大小(可选,单位为px,默认13px)高分屏不必乘像素比,自动根据pixelRatio计算|
|opts.background| String | |canvas背景颜色(如果页面背景颜色不是白色请设置为页面的背景颜色,默认#ffffff)|
|opts.enableScroll |Boolean | |是否开启图表可拖拽滚动 默认false 支持line, area,`新增支持column`图表类型(需配合绑定@touchstart, @touchmove, @touchend方法)|
|opts.title| Object| | (only for ring chart)|
|opts.enableScroll |Boolean | |是否开启图表可拖拽滚动 默认false 支持line, area, column图表类型(需配合绑定@touchstart, @touchmove, @touchend方法)|
|opts.animation| Boolean |默认为 true |是否动画展示|
|opts.legend| Boolen |默认为 true| 图例设置,是否显示图表下方各类别的标识|
|opts.dataLabel| Boolean |默认为 true |是否在图表中显示数据标签内容值|
|opts.dataPointShape| Boolean |默认为 true| 是否在图表中显示数据点图形标识|
|opts.disablePieStroke |Boolean |默认为 false| 不绘制饼图(圆环图)各区块的白色分割线|



###数据列表每项结构定义

| 属性 | 类型 | 默认 |说明|
| :------ | :-----: | :-----: | :-------------------- |
|opts.categories| Array| required |数据类别(饼图、圆环图不需要) |
|`opts.categories.value`| Number| |`新增参数,仅仪表盘有效,定义仪表盘分段值`|
|`opts.categories.color`| String| |`新增参数,仅仪表盘有效,定义仪表盘分段背景颜色`|
|opts.series |Array |required |数据列表|
|opts.series.data| Array |required |(饼图、圆环图为Number) 数据,如果传入null图表该处出现断点|
| `opts.series.data.value` | Number | |`新增参数,仅针对柱状图有效,主要作用为柱状图自定义颜色`|
| `opts.series.data.color` | String | |`新增参数,仅针对柱状图有效,主要作用为柱状图自定义颜色`|
|opts.series.color |String | |例如#7cb5ec 不传入则使用系统默认配色方案|
|opts.series.name |String | |数据名称|
|opts.series.format| Function| | 自定义显示数据内容|


###标题配置项(适用于ring、arcbar、gauge)

| 属性 | 类型 | 默认 |说明|
| :------ | :-----: | :-----: | :-------------------- |
|opts.title| Object| | 适用于`ring`、`arcbar`、`gauge`|
|opts.title.name| String | |标题内容|
|opts.title.fontSize| Number | |标题字体大小(可选,单位为px)|
|opts.title.color| String| | 标题颜色(可选)|
|opts.title.offsetX |Number| 默认0px | 标题横向位置偏移量,单位px,默认0|
|`opts.title.offsetY` |Number| 默认0px | `新增参数,标题纵向位置偏移量,单位px,默认0`|
|opts.subtitle| Object| | (only for ring chart)|
|opts.title.offsetY |Number| 默认0px | 标题纵向位置偏移量,单位px,默认0|
|opts.subtitle| Object| | 适用于`ring`、`arcbar`、`gauge`|
|opts.subtitle.name| String| | 副标题内容|
|opts.subtitle.offsetX| Number| 默认0px | 副标题横向位置偏移量,单位px,默认0|
|`opts.subtitle.offsetY`| Number| 默认0px | `新增参数,副标题横向位置偏移量,单位px,默认0`|
|opts.subtitle.offsetY| Number| 默认0px | 副标题横向位置偏移量,单位px,默认0|
|opts.subtitle.fontSize| Number| | 副标题字体大小(可选,单位为px)|
|opts.subtitle.color| String| | 副标题颜色(可选)|
|opts.animation| Boolean |默认为 true |是否动画展示|
|opts.legend| Boolen |默认为 true| 是否显示图表下方各类别的标识|
|opts.type|String |required| 图表类型,可选值为pie, line, column, area, ring, radar, 新增`arcbar`、`gauge`|
|opts.categories| Array| required |(饼图、圆环图不需要) 数据类别分类|
|opts.dataLabel| Boolean |默认为 true |是否在图表中显示数据内容值|
|opts.dataPointShape| Boolean |默认为 true| 是否在图表中显示数据点图形标识|
|opts.disablePieStroke |Boolean |默认为 false| 不绘制饼图(圆环图)各区块的白色分割线|


###坐标轴配置项

| 属性 | 类型 | 默认 |说明|
| :------ | :-----: | :-----: | :-------------------- |
|opts.xAxis |Object | |X轴配置|
|`opts.xAxis.itemCount`| Number| 默认为 5 | `新增参数,X轴可见区域刻度数量(即X轴数据密度),配合拖拽滚动使用(即仅在启用enableScroll时有效)`|
|`opts.xAxis.scrollShow`| Boolean| 默认为 false | `新增参数,是否显示滚动条,配合拖拽滚动使用(即仅在启用enableScroll时有效)`|
@@ -236,70 +271,84 @@
|opts.xAxis.gridColor| String| 默认为 #cccccc | X轴网格颜色 例如#7cb5ec|
|opts.xAxis.fontColor| String| 默认为 #666666 | X轴数据点颜色 例如#7cb5ec|
|opts.xAxis.disableGrid |Boolean| 默认为 false| 不绘制X轴网格|
|opts.xAxis.type |String | |可选值calibration(刻度) 默认为包含样式|
|`opts.xAxis.type` |String | 默认为calibration |`X轴网格样式,可选值calibration(刻度)、grid(网格) 默认为包含样式`|
|`opts.xAxis.gridType` |String | 默认为 solid| `X轴网格线型 'solid'为实线、'dash'为虚线`|
|`opts.xAxis.dashLength` |Number | 默认为 4px | `X轴网格为虚线时,单段虚线长度` |
|opts.yAxis |Object | |Y轴配置|
|opts.yAxis.format |Function| | 自定义Y轴文案显示|
|opts.yAxis.min| Number| | Y轴起始值|
|opts.yAxis.max| Number | |Y轴终止值|
|opts.yAxis.title| String | |Y轴title|
|opts.yAxis.gridColor |String | 默认为 #cccccc| Y轴网格颜色 例如#7cb5ec |
|`opts.yAxis.splitNumber` |Number | 默认5 |`Y轴网格数量`|
|`opts.yAxis.gridType` |String | 默认为 solid| `Y轴网格线型 'solid'为实线、'dash'为虚线`|
|`opts.yAxis.dashLength` |Number | 默认为 4px | `Y轴网格为虚线时,单段虚线长度` |
|opts.yAxis.gridColor |String | 默认为 solid | Y轴网格颜色 'solid'为实线、''为虚线 |
|opts.yAxis.fontColor| String | 默认为 #666666 | Y轴数据点颜色 例如#7cb5ec|
|opts.yAxis.titleFontColor |String | 默认为 #333333 | Y轴title颜色 例如#7cb5ec|
|opts.yAxis.disabled |Boolean |默认为 false| 不绘制Y轴|

###其他非通用配置项

###扩展配置项(圆弧进度条)

| 属性 | 类型 | 默认 |说明|
| :------ | :-----: | :-----: | :------------ |
|opts.extra| Object| |其他非通用配置项|
|opts.extra.ringWidth| Number | |ringChart圆环宽度,单位为px|
|`opts.extra.arcbar`| Number | 默认12px |`新增参数,圆弧进度图相关配置`|
|`opts.extra.arcbar.type`| String | 默认default |`新增参数,圆弧进度图样式,default为半圆弧,circle为整圆`|
|`opts.extra.arcbar.width`| Number | 默认12px |`新增参数,圆弧进度图弧线宽度,单位为px`|
|`opts.extra.arcbar.backgroundColor`| String | 默认#E9E9E9 |`新增参数,圆弧进度图背景颜色`|
|`opts.extra.arcbar.startAngle`| Number | 默认0.75 |`新增参数,圆弧进度图起始角度,0-2之间,0为3点钟位置,0.5为6点钟,1为9点钟,1.5为12点钟`|
|`opts.extra.arcbar.endAngle`| Number | 默认0.25 |`新增参数,圆弧进度图结束角度,0-2之间,0为3点钟位置,0.5为6点钟,1为9点钟,1.5为12点钟`|
|`opts.extra.gauge`| Object | |`新增参数,仪表盘相关配置`|
|`opts.extra.gauge.type`| String | 默认default |`新增参数,仪表盘样式,default为百度样式,其他样式开发中`|
|`opts.extra.gauge.width`| Number | 默认15px |`新增参数,仪表盘坐标轴(指示盘)线宽度,单位为px`|
|`opts.extra.gauge.labelColor`| String | 默认#666666|`新增参数,仪表盘刻度尺标签文字颜色`|
|`opts.extra.gauge.startAngle`| Number | 默认0.75 |`新增参数,仪表盘起始角度,0-2之间,0为3点钟位置,0.5为6点钟,1为9点钟,1.5为12点钟`|
|`opts.extra.gauge.endAngle`| Number | 默认0.25 |`新增参数,仪表盘结束角度,0-2之间,0为3点钟位置,0.5为6点钟,1为9点钟,1.5为12点钟`|
|`opts.extra.gauge.startNumber`| Number | 默认0 |`新增参数,仪表盘起始数值`|
|`opts.extra.gauge.endNumber`| Number | 默认100 |`新增参数,仪表盘结束数值`|
|`opts.extra.gauge.splitLine`| Object | |`新增参数,仪表盘刻度线配置`|
|`opts.extra.gauge.splitLine.fixRadius`| Number | 默认0 |`新增参数,仪表盘刻度线径向偏移量`|
|`opts.extra.gauge.splitLine.splitNumber`| Number | 默认10 |`新增参数,仪表盘刻度线分段总数量`|
|`opts.extra.gauge.splitLine.width`| Number | 默认15px |`新增参数,仪表盘分割线长度`|
|`opts.extra.gauge.splitLine.color`| String | 默认#FFFFFF |`新增参数,仪表盘分割线颜色`|
|`opts.extra.gauge.splitLine.childNumber`| Number | 默认5 |`新增参数,仪表盘子刻度线数量`|
|`opts.extra.gauge.splitLine.childWidth`| Number | 默认5px |`新增参数,仪表盘子刻度线长度`|
|`opts.extra.gauge.pointer`| Object | |`新增参数,仪表盘指针配置`|
|`opts.extra.gauge.pointer.width`| Number | 默认15px |`新增参数,仪表盘指针宽度`|
|`opts.extra.gauge.pointer.color`| String | 默认auto |`新增参数,仪表盘指针颜色,定义为auto时,随仪表盘背景颜色改变`|
|opts.extra.lineStyle| String| straight | (仅对line, area图表有效) 可选值:curve曲线,straight直线 (default)|
|opts.extra.column| Object | |柱状图相关配置|
|opts.extra.column.width |Number| | 柱状图每项的图形宽度,单位为px|
|opts.extra.legendTextColor |String | 默认为 #cccccc | legend文案颜色 例如#7cb5ec|
|opts.extra.arcbar| Number | 默认12px |圆弧进度图相关配置|
|opts.extra.arcbar.type| String | 默认default |圆弧进度图样式,default为半圆弧,circle为整圆|
|opts.extra.arcbar.width| Number | 默认12px |圆弧进度图弧线宽度,单位为px|
|opts.extra.arcbar.backgroundColor| String | 默认#E9E9E9 |圆弧进度图背景颜色|
|opts.extra.arcbar.startAngle| Number | 默认0.75 |圆弧进度图起始角度,0-2之间,0为3点钟位置,0.5为6点钟,1为9点钟,1.5为12点钟|
|opts.extra.arcbar.endAngle| Number | 默认0.25 |圆弧进度图结束角度,0-2之间,0为3点钟位置,0.5为6点钟,1为9点钟,1.5为12点钟|


###扩展配置项(仪表盘)

| 属性 | 类型 | 默认 |说明|
| :------ | :-----: | :-----: | :------------ |
|opts.extra.gauge| Object | |仪表盘相关配置|
|opts.extra.gauge.type| String | 默认default |仪表盘样式,default为百度样式,`其他样式开发中`|
|opts.extra.gauge.width| Number | 默认15px |仪表盘坐标轴(指示盘)线宽度,单位为px|
|opts.extra.gauge.labelColor| String | 默认#666666|仪表盘刻度尺标签文字颜色|
|opts.extra.gauge.startAngle| Number | 默认0.75 |仪表盘起始角度,0-2之间,0为3点钟位置,0.5为6点钟,1为9点钟,1.5为12点钟|
|opts.extra.gauge.endAngle| Number | 默认0.25 |仪表盘结束角度,0-2之间,0为3点钟位置,0.5为6点钟,1为9点钟,1.5为12点钟|
|opts.extra.gauge.startNumber| Number | 默认0 |仪表盘起始数值|
|opts.extra.gauge.endNumber| Number | 默认100 |仪表盘结束数值|
|opts.extra.gauge.splitLine| Object | |仪表盘刻度线配置|
|opts.extra.gauge.splitLine.fixRadius| Number | 默认0 |仪表盘刻度线径向偏移量|
|opts.extra.gauge.splitLine.splitNumber| Number | 默认10 |仪表盘刻度线分段总数量|
|opts.extra.gauge.splitLine.width| Number | 默认15px |仪表盘分割线长度|
|opts.extra.gauge.splitLine.color| String | 默认#FFFFFF |仪表盘分割线颜色|
|opts.extra.gauge.splitLine.childNumber| Number | 默认5 |仪表盘子刻度线数量|
|opts.extra.gauge.splitLine.childWidth| Number | 默认5px |仪表盘子刻度线长度|
|opts.extra.gauge.pointer| Object | |仪表盘指针配置|
|opts.extra.gauge.pointer.width| Number | 默认15px |仪表盘指针宽度|
|opts.extra.gauge.pointer.color| String | 默认auto |仪表盘指针颜色,定义为auto时,随仪表盘背景颜色改变,或者可以指定颜色例如'#7cb5ec'|


###扩展配置项(雷达图)

| 属性 | 类型 | 默认 |说明|
| :------ | :-----: | :-----: | :------------ |
|opts.extra.radar| Object | |雷达图相关配置|
|opts.extra.radar.max| Number|默认为 series |data的最大值,数据区间最大值,用于调整数据显示的比例|
|opts.extra.radar.labelColor |String|默认为 #666666|各项标识文案的颜色|
|opts.extra.radar.gridColor |String| 默认为 #cccccc| 雷达图网格颜色|
|opts.extra.pie| Object| | 饼图、圆环图相关配置|
|opts.extra.pie.offsetAngle| Number| 默认为0| 起始角度偏移度数,顺时针方向,起点为3点钟位置(比如要设置起点为12点钟位置,即逆时针偏移90度,传入-90即可)|
|opts.series |Array |required |数据列表|

###数据列表每项结构定义

###扩展配置项(其他)

| 属性 | 类型 | 默认 |说明|
| :------ | :-----: | :-----: | :------------ |
|dataItem| Object| | |
|dataItem.data| Array |required |(饼图、圆环图为Number) 数据,如果传入null图表该处出现断点|
| `dataItem.data.value` | Number | |`新增参数,仅针对柱状图有效,主要作用为柱状图自定义颜色`|
| `dataItem.data.color` | String | |`新增参数,仅针对柱状图有效,主要作用为柱状图自定义颜色`|
|dataItem.color |String | |例如#7cb5ec 不传入则使用系统默认配色方案|
|dataItem.name |String | |数据名称|
|dateItem.format| Function| | 自定义显示数据内容|
|`opts.extra.legendTextColor` |String | 默认为 #cccccc | `图例文案颜色 例如#7cb5ec`|
|opts.extra.lineStyle| String| straight | (仅对line, area图表有效) 可选值:curve曲线,straight直线 (default)|
|opts.extra.column| Object | |柱状图相关配置|
|opts.extra.column.width |Number| | 柱状图每项的图形宽度,单位为px|
|opts.extra.ringWidth| Number | |ringChart圆环宽度,单位为px|
|opts.extra.pie| Object| | 饼图、圆环图相关配置|
|opts.extra.pie.offsetAngle| Number| 默认为0| 起始角度偏移度数,顺时针方向,起点为3点钟位置(比如要设置起点为12点钟位置,即逆时针偏移90度,传入-90即可)|




## 方法 & 事件

52 changes: 38 additions & 14 deletions dist/wxcharts.js
Original file line number Diff line number Diff line change
@@ -1459,14 +1459,14 @@ function drawXAxis(categories, opts, config, context) {
eachSpacing = _getXAxisPoints4.eachSpacing;

var startY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
var endY = startY + config.xAxisLineHeight;
var endY = config.padding;


//绘制滚动条
if(opts.enableScroll && opts.xAxis.scrollShow){
var scrollStartX=startX+3*opts.pixelRatio;
var scrollendX=endX-3*opts.pixelRatio;
var scrollY=endY+8*opts.pixelRatio;
var scrollY=startY + config.xAxisLineHeight+8*opts.pixelRatio;
var scrollScreenWidth=scrollendX-scrollStartX;
var scrollTotalWidth=eachSpacing*(xAxisPoints.length-1);
var scrollWidth=scrollScreenWidth*scrollScreenWidth/scrollTotalWidth;
@@ -1500,13 +1500,17 @@ function drawXAxis(categories, opts, config, context) {

context.beginPath();
context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc");

context.setLineCap('butt');
context.setLineWidth(1*opts.pixelRatio);
if(opts.xAxis.gridType=='dash'){
context.setLineDash([opts.xAxis.dashLength]);
}
if (opts.xAxis.disableGrid !== true) {
if (opts.xAxis.type === 'calibration') {
xAxisPoints.forEach(function (item, index) {
if (index > 0) {
context.moveTo(item - eachSpacing / 2, startY);
context.lineTo(item - eachSpacing / 2, startY + 4);
context.lineTo(item - eachSpacing / 2, startY + 4*opts.pixelRatio);
}
});
} else {
@@ -1518,7 +1522,8 @@ function drawXAxis(categories, opts, config, context) {
}
context.closePath();
context.stroke();

context.setLineDash([]);

// 对X轴列表做抽稀处理
var validWidth = opts.width - 2 * config.padding - config.yAxisWidth - config.yAxisTitleWidth;
var maxXAxisListLength = Math.min(categories.length, Math.ceil(validWidth / config.fontSize / 1.5));
@@ -1564,30 +1569,44 @@ function drawXAxis(categories, opts, config, context) {

}

function drawYAxisGrid(opts, config, context) {
function drawYAxisGrid(categories,opts, config, context) {
var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
var eachSpacing = Math.floor(spacingValid / config.yAxisSplit);
var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth;
var startX = config.padding + yAxisTotalWidth;
var endX = opts.width - config.padding;

var _getXAxisPoints4 = getXAxisPoints(categories, opts, config),
xAxisPoints = _getXAxisPoints4.xAxisPoints,
xAxiseachSpacing = _getXAxisPoints4.eachSpacing;
var TotalWidth=xAxiseachSpacing*(xAxisPoints.length-1);
var endX = startX+TotalWidth;

var points = [];
for (var i = 0; i < config.yAxisSplit; i++) {
points.push(config.padding + eachSpacing * i);
}
points.push(config.padding + eachSpacing * config.yAxisSplit + 2);

context.save();
if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
context.translate(opts._scrollDistance_, 0);
}

if(opts.yAxis.gridType=='dash'){
context.setLineDash([opts.yAxis.dashLength]);
}
context.beginPath();
context.setStrokeStyle(opts.yAxis.gridColor || "#cccccc");
//context.setLineDash([20]);

context.setLineWidth(1*opts.pixelRatio);
points.forEach(function (item, index) {
context.moveTo(startX, item);
context.lineTo(endX, item);
});
context.closePath();
context.stroke();
//context.setLineDash([]);
context.setLineDash([]);

context.restore();
}

function drawYAxis(series, opts, config, context) {
@@ -2195,7 +2214,7 @@ function drawCharts(type, opts, config, context) {
context.translate(opts.height, 0);
context.rotate(90 * Math.PI / 180);
}
drawYAxisGrid(opts, config, context);
drawYAxisGrid(categories,opts, config, context);
var _drawLineDataPoints = drawLineDataPoints(series, opts, config, context, process),
xAxisPoints = _drawLineDataPoints.xAxisPoints,
calPoints = _drawLineDataPoints.calPoints,
@@ -2225,7 +2244,7 @@ function drawCharts(type, opts, config, context) {
context.translate(opts.height, 0);
context.rotate(90 * Math.PI / 180);
}
drawYAxisGrid(opts, config, context);
drawYAxisGrid(categories,opts, config, context);
var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process),
xAxisPoints = _drawColumnDataPoints.xAxisPoints,
eachSpacing = _drawColumnDataPoints.eachSpacing;
@@ -2251,7 +2270,7 @@ function drawCharts(type, opts, config, context) {
context.translate(opts.height, 0);
context.rotate(90 * Math.PI / 180);
}
drawYAxisGrid(opts, config, context);
drawYAxisGrid(categories,opts, config, context);
var _drawAreaDataPoints = drawAreaDataPoints(series, opts, config, context, process),
xAxisPoints = _drawAreaDataPoints.xAxisPoints,
calPoints = _drawAreaDataPoints.calPoints,
@@ -2379,7 +2398,12 @@ var Charts = function Charts(opts) {
opts.title = opts.title || {};
opts.subtitle = opts.subtitle || {};
opts.yAxis = opts.yAxis || {};
opts.yAxis.gridType=opts.yAxis.gridType? opts.yAxis.gridType : 'solid';
opts.yAxis.dashLength=opts.yAxis.dashLength? opts.yAxis.dashLength : 4*opts.pixelRatio;
opts.xAxis = opts.xAxis || {};
opts.xAxis.type=opts.xAxis.type? opts.xAxis.type : 'calibration';
opts.xAxis.gridType=opts.xAxis.gridType? opts.xAxis.gridType : 'solid';
opts.xAxis.dashLength=opts.xAxis.dashLength? opts.xAxis.dashLength : 4*opts.pixelRatio;
opts.xAxis.itemCount = opts.xAxis.itemCount ? opts.xAxis.itemCount : 5;
opts.extra = opts.extra || {};
opts.legend = opts.legend === false ? false : true;
@@ -2389,7 +2413,7 @@ var Charts = function Charts(opts) {
config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0;
config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : config$$1.pieChartLinePadding*opts.pixelRatio;
config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding*opts.pixelRatio;

config$$1.yAxisSplit = opts.yAxis.splitNumber? opts.yAxis.splitNumber : config.yAxisSplit;
//屏幕旋转
config$$1.rotate=opts.rotate;
if(opts.rotate){
52 changes: 38 additions & 14 deletions example/uni-app/components/wx-charts/wxcharts.js
Original file line number Diff line number Diff line change
@@ -1459,14 +1459,14 @@ function drawXAxis(categories, opts, config, context) {
eachSpacing = _getXAxisPoints4.eachSpacing;

var startY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
var endY = startY + config.xAxisLineHeight;
var endY = config.padding;


//绘制滚动条
if(opts.enableScroll && opts.xAxis.scrollShow){
var scrollStartX=startX+3*opts.pixelRatio;
var scrollendX=endX-3*opts.pixelRatio;
var scrollY=endY+8*opts.pixelRatio;
var scrollY=startY + config.xAxisLineHeight+8*opts.pixelRatio;
var scrollScreenWidth=scrollendX-scrollStartX;
var scrollTotalWidth=eachSpacing*(xAxisPoints.length-1);
var scrollWidth=scrollScreenWidth*scrollScreenWidth/scrollTotalWidth;
@@ -1500,13 +1500,17 @@ function drawXAxis(categories, opts, config, context) {

context.beginPath();
context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc");

context.setLineCap('butt');
context.setLineWidth(1*opts.pixelRatio);
if(opts.xAxis.gridType=='dash'){
context.setLineDash([opts.xAxis.dashLength]);
}
if (opts.xAxis.disableGrid !== true) {
if (opts.xAxis.type === 'calibration') {
xAxisPoints.forEach(function (item, index) {
if (index > 0) {
context.moveTo(item - eachSpacing / 2, startY);
context.lineTo(item - eachSpacing / 2, startY + 4);
context.lineTo(item - eachSpacing / 2, startY + 4*opts.pixelRatio);
}
});
} else {
@@ -1518,7 +1522,8 @@ function drawXAxis(categories, opts, config, context) {
}
context.closePath();
context.stroke();

context.setLineDash([]);

// 对X轴列表做抽稀处理
var validWidth = opts.width - 2 * config.padding - config.yAxisWidth - config.yAxisTitleWidth;
var maxXAxisListLength = Math.min(categories.length, Math.ceil(validWidth / config.fontSize / 1.5));
@@ -1564,30 +1569,44 @@ function drawXAxis(categories, opts, config, context) {

}

function drawYAxisGrid(opts, config, context) {
function drawYAxisGrid(categories,opts, config, context) {
var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
var eachSpacing = Math.floor(spacingValid / config.yAxisSplit);
var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth;
var startX = config.padding + yAxisTotalWidth;
var endX = opts.width - config.padding;

var _getXAxisPoints4 = getXAxisPoints(categories, opts, config),
xAxisPoints = _getXAxisPoints4.xAxisPoints,
xAxiseachSpacing = _getXAxisPoints4.eachSpacing;
var TotalWidth=xAxiseachSpacing*(xAxisPoints.length-1);
var endX = startX+TotalWidth;

var points = [];
for (var i = 0; i < config.yAxisSplit; i++) {
points.push(config.padding + eachSpacing * i);
}
points.push(config.padding + eachSpacing * config.yAxisSplit + 2);

context.save();
if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
context.translate(opts._scrollDistance_, 0);
}

if(opts.yAxis.gridType=='dash'){
context.setLineDash([opts.yAxis.dashLength]);
}
context.beginPath();
context.setStrokeStyle(opts.yAxis.gridColor || "#cccccc");
//context.setLineDash([20]);

context.setLineWidth(1*opts.pixelRatio);
points.forEach(function (item, index) {
context.moveTo(startX, item);
context.lineTo(endX, item);
});
context.closePath();
context.stroke();
//context.setLineDash([]);
context.setLineDash([]);

context.restore();
}

function drawYAxis(series, opts, config, context) {
@@ -2195,7 +2214,7 @@ function drawCharts(type, opts, config, context) {
context.translate(opts.height, 0);
context.rotate(90 * Math.PI / 180);
}
drawYAxisGrid(opts, config, context);
drawYAxisGrid(categories,opts, config, context);
var _drawLineDataPoints = drawLineDataPoints(series, opts, config, context, process),
xAxisPoints = _drawLineDataPoints.xAxisPoints,
calPoints = _drawLineDataPoints.calPoints,
@@ -2225,7 +2244,7 @@ function drawCharts(type, opts, config, context) {
context.translate(opts.height, 0);
context.rotate(90 * Math.PI / 180);
}
drawYAxisGrid(opts, config, context);
drawYAxisGrid(categories,opts, config, context);
var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process),
xAxisPoints = _drawColumnDataPoints.xAxisPoints,
eachSpacing = _drawColumnDataPoints.eachSpacing;
@@ -2251,7 +2270,7 @@ function drawCharts(type, opts, config, context) {
context.translate(opts.height, 0);
context.rotate(90 * Math.PI / 180);
}
drawYAxisGrid(opts, config, context);
drawYAxisGrid(categories,opts, config, context);
var _drawAreaDataPoints = drawAreaDataPoints(series, opts, config, context, process),
xAxisPoints = _drawAreaDataPoints.xAxisPoints,
calPoints = _drawAreaDataPoints.calPoints,
@@ -2379,7 +2398,12 @@ var Charts = function Charts(opts) {
opts.title = opts.title || {};
opts.subtitle = opts.subtitle || {};
opts.yAxis = opts.yAxis || {};
opts.yAxis.gridType=opts.yAxis.gridType? opts.yAxis.gridType : 'solid';
opts.yAxis.dashLength=opts.yAxis.dashLength? opts.yAxis.dashLength : 4*opts.pixelRatio;
opts.xAxis = opts.xAxis || {};
opts.xAxis.type=opts.xAxis.type? opts.xAxis.type : 'calibration';
opts.xAxis.gridType=opts.xAxis.gridType? opts.xAxis.gridType : 'solid';
opts.xAxis.dashLength=opts.xAxis.dashLength? opts.xAxis.dashLength : 4*opts.pixelRatio;
opts.xAxis.itemCount = opts.xAxis.itemCount ? opts.xAxis.itemCount : 5;
opts.extra = opts.extra || {};
opts.legend = opts.legend === false ? false : true;
@@ -2389,7 +2413,7 @@ var Charts = function Charts(opts) {
config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0;
config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : config$$1.pieChartLinePadding*opts.pixelRatio;
config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding*opts.pixelRatio;

config$$1.yAxisSplit = opts.yAxis.splitNumber? opts.yAxis.splitNumber : config.yAxisSplit;
//屏幕旋转
config$$1.rotate=opts.rotate;
if(opts.rotate){
6 changes: 5 additions & 1 deletion example/uni-app/pages/wxcharts/wxcharts.vue
Original file line number Diff line number Diff line change
@@ -308,14 +308,18 @@
animation: false,
enableScroll: true,//开启图表拖拽功能
xAxis: {
disableGrid:true,
disableGrid:false,
type:'grid',
gridType:'dash',
itemCount:4,//可不填写,配合enableScroll图表拖拽功能使用,x轴单屏显示数据的数量,默认为5个
scrollShow:true,//新增是否显示滚动条,默认false
//scrollBackgroundColor:'#F7F7FF',//可不填写,配合enableScroll图表拖拽功能使用,X轴滚动条背景颜色,默认为 #EFEBEF
//scrollColor:'#DEE7F7',//可不填写,配合enableScroll图表拖拽功能使用,X轴滚动条颜色,默认为 #A6A6A6
},
yAxis: {
//disabled:true
gridType:'dash',
},
width: _self.cWidth*_self.pixelRatio,
height: _self.cHeight*_self.pixelRatio,