ucharts多端兼容的图表可视化工具

## [uCharts官方网站](https://www.ucharts.cn) ## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn) ## [图表组件在项目中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651) ### [v1.0文档（将在9月30日作废，请尽快转v2.0）](http://doc.ucharts.cn) ## [如何安装、更新 uni_modules 插件点这里，必看，必看，必看](https://uniapp.dcloud.io/uni_modules?id=%e4%bd%bf%e7%94%a8-uni_modules-%e6%8f%92%e4%bb%b6) ## 点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。 ## 初次使用不显示问题详见[常见问题选项卡](https://demo.ucharts.cn) ## <font color=#FF0000> 新手请先完整阅读【帮助文档】及【常见问题】3遍，右侧蓝色按钮【示例项目】请看2遍！ </font> ## <font color=#FF0000> 关于NVUE兼容的说明： </font> 建议NVUE使用图表的页面改为vue页面，在App端，从性能来讲，由于通讯阻塞的问题，nvue的canvas性能不可能达到使用renderjs的vue页面的canvas。在App端，推荐使用vue的canvas。[详见uni-app官方说明](https://uniapp.dcloud.io/component/canvas?id=canvas) [](https://gitee.com/uCharts/uCharts) ## 秋云图表组件使用帮助 全新图表组件，全端全平台支持，开箱即用，可选择uCharts引擎全端渲染，也可指定PC端或APP端`单独使用ECharts`引擎渲染图表。支持极简单的调用方式，只需指定图表类型及传入符合标准的图表数据即可，使开发者只需专注业务及数据。同时也支持datacom组件读取uniClinetDB，无需关心如何拼接数据等不必要的重复工作，大大缩短开发时间。 ## 为何使用官方封装的组件？ 封装组件并不难，谁都会，但组件调试却是一件令人掉头发的事，尤其是canvas封装成组件会带来一系列问题：例如封装后不显示，图表多次初始化导致抖动问题，单页面多个图表点击事件错乱，组件放在scroll-view中无法点击，在图表上滑动时页面无法滚动等等一系列问题。为解决开发者使用可视化组件的困扰，uCharts官方特推出可视化通用组件，本组件具备以下特点： - 极简单的调用方式，默认配置下只需要传入`图表类型`及`图表数据`即可全端显示。 - 提供强大的`在线配置生成工具`，可视化中的可视化，鼠标点一点就可以生成图表，可视化从此不再难配。 - 兼容ECharts，可选择`PC端或APP端单独使用ECharts`引擎渲染图表。 - H5及App采用`renderjs`渲染图表，动画流畅、性能翻倍。 - 根据父容器尺寸`弹性显示图表`，再也不必为宽高匹配及多端适配问题发愁。 - 支持`加载状态loading及error展示`，避免数据读取显示空白的尴尬。 - chartData`配置与数据解耦`，即便使用ECharts引擎也不必担心拼接option的困扰。 - localdata`后端数据直接渲染`，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。 - 小程序端不必担心包体积过大问题，ECharts引擎将不会编译到各小程序端，u-charts.js编译后`仅为93kb`。 - 未来将支持通过HbuilderX的[schema2code自动生成全端全平台图表](https://ext.dcloud.net.cn/plugin?id=4684)，敬请期待！！！ - uCharts官方拥有3个2000人的QQ群支持，庞大的用户量证明我们一直在努力，本组件将持续更新，请各位放心使用，本组件问题请在`QQ3群`反馈，您的宝贵建议是我们努力的动力！！ ## 致开发者 感谢各位开发者`两年`来对秋云及uCharts的支持，uCharts的进步离不开各位开发者的鼓励与贡献，为更好的帮助各位开发者在uni-app生态系统更好的应用图表，uCharts始终坚持开源，并提供社群帮助开发者解决问题。 为确保您能更好的应用图表组件，建议您先`仔细阅读本页文档`以及uCharts官方文档，而不是下载下来`直接使用`。 如遇到问题请先阅读文档，如仍然不能解决，请加入QQ群咨询，如群友均不能解决或者您有特殊需求，请在群内私聊我，因工作原因，回复不一定很及时，您可直接说问题，有时间一定会回复您。 uCharts的开源图表组件的开发，付出了大量的个人时间与精力，经过两年来的考验，不会有比较明显的bug，请各位放心使用。不求您5星评价，也不求您赞赏，`只求您对开源贡献的支持态度`，所以，当您想给`1星评价`的时候，秋云真的会`含泪希望您绕路而行……`。如果您有更好的想法，可以在`码云提交Pull Requests`以帮助更多开发者完成需求，再次感谢各位对uCharts的鼓励与支持！ ## 快速体验 一套代码编到7个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！IOS因demo比较简单无法上架，请自行编译。  ## 快速上手 ### <font color=#FF0000> 注意前提条件【版本要求：HBuilderX 3.1.0+】 </font> - 1、插件市场点击右侧绿色按钮【使用HBuilderX导入插件】，或者【使用HBuilderX导入示例项目】查看完整示例工程 - 2、依赖uniapp的vue-cli项目：请将uni-modules目录复制到src目录，即src/uni_modules。（请升级uniapp依赖为最新版本） - 3、页面中直接按下面用法直接调用即可，无需在页面中注册组件qiun-data-charts - 4、注意父元素class='charts-box'这个样式需要有宽高 ## 基本用法 - template代码：（[建议使用在线工具生成](https://demo.ucharts.cn)） ``` <view class="charts-box"> <qiun-data-charts type="column" :chartData="chartData" /> </view> ``` - 标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型） ``` chartData:{ categories: ["2016", "2017", "2018", "2019", "2020", "2021"], series: [{ name: "目标值", data: [35, 36, 31, 33, 13, 34] }, { name: "完成量", data: [18, 27, 21, 24, 6, 28] }] } ``` - 标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型） ``` chartData:{ series: [{ data: [ { name: "一班", value: 50 }, { name: "二班", value: 30 }, { name: "三班", value: 20 }, { name: "四班", value: 18 }, { name: "五班", value: 8 } ] }] } ``` 注：其他特殊图表类型，请参考mockdata文件夹下的数据格式，v2.0版本的uCharts已兼容ECharts的数据格式，v2.0版本仍然支持v1.0版本的数据格式。 ## localdata数据渲染用法 - 使用localdata数据格式渲染图表的优势：数据结构简单，无需自行拼接chartData的categories及series，从后端拿回的数据简单处理即可生成图表。 - localdata数据的缺点：并不是所有的图表类型均可通过localdata渲染图表，例如混合图，组件并不能识别哪个series分组需要渲染成折线还是柱状图，涉及到复杂的图表，仍需要由chartData传入。 - template代码：（[建议使用在线工具生成](https://demo.ucharts.cn)） ``` <view class="charts-box"> <qiun-data-charts type="column" :localdata="localdata" /> </view> ``` - 标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型） 其中value代表数据的数值，text代表X轴的categories数据点，group代表series分组的类型名称即ser