图表展示

基于 uCharts 组件进行整合的页面，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）

官方体验

温馨提醒

一套代码编到7个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！IOS因demo比较简单无法上架，请自行编译

快速上手

注意事项

注意前提条件【版本要求：HBuilderX 3.1.0+】

插件市场点击右侧绿色按钮【使用HBuilderX导入插件】，或者【使用HBuilderX导入示例项目】查看完整示例工程
依赖uniapp的vue-cli项目：请将uni-modules目录复制到src目录，即src/uni_modules。（请升级uniapp依赖为最新版本）
页面中直接按下面用法直接调用即可，无需在页面中注册组件qiun-data-charts
注意父元素class='charts-box'这个样式需要有宽高

基本用法

template代码：（建议使用在线工具生成）

vue

<view class="charts-box">
    <qiun-data-charts type="column" :chartData="chartData" />
</view>

标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）

json

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的图表类型）

json

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代码：（建议使用在线工具生成）

vue

<view class="charts-box">
    <qiun-data-charts type="column" :localdata="localdata" />
</view>

标准数据格式1：（折线图、柱状图、区域图等需要categories的直角坐标系图表类型）

其中value代表数据的数值，text代表X轴的categories数据点，group代表series分组的类型名称即series[i].name。

json

localdata:[
  {value:35, text:"2016", group:"目标值"},
  {value:18, text:"2016", group:"完成量"},
  {value:36, text:"2017", group:"目标值"},
  {value:27, text:"2017", group:"完成量"},
  {value:31, text:"2018", group:"目标值"},
  {value:21, text:"2018", group:"完成量"},
  {value:33, text:"2019", group:"目标值"},
  {value:24, text:"2019", group:"完成量"},
  {value:13, text:"2020", group:"目标值"},
  {value:6, text:"2020", group:"完成量"},
  {value:34, text:"2021", group:"目标值"},
  {value:28, text:"2021", group:"完成量"}
]

标准数据格式2：（饼图、圆环图、漏斗图等不需要categories的图表类型）

其中value代表数据的数值，text代表value数值对应的描述。

json

localdata:[
  {value:50, text:"一班"},
  {value:30, text:"二班"},
  {value:20, text:"三班"},
  {value:18, text:"四班"},
  {value:8, text:"五班"},
]

注意，localdata的数据格式必需要符合datacom组件规范【详见datacom组件】。

图表展示 ​

官方体验 ​

快速上手 ​

基本用法 ​

localdata数据渲染用法 ​

相关链接 ​

图表展示

官方体验

快速上手

基本用法

localdata数据渲染用法

相关链接