uniapp 使用秋云uCharts图表组件、echarts图表组件

一、uniapp 使用秋云uCharts图表组件

1、项目是依赖uniapp的vue-cli项目

操作：将uni_modules目录复制到src目录，即src/uni_modules。

2、页面中直接调用即可，无需在页面中注册组件qiun-data-charts。注意：父元素class='charts-box'这个样式需要有宽高。

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

3、图标数据格式，官方文档：秋云uCharts图表组件

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]
    }
  ]
}

提示：可以通过在线生成工具（秋云uCharts图表组件）配置好图表，粘贴到uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js中，形成各个图表类型的默认配置，相同的图表类型不同的配置，可通过组件上:opts传递不同属性即可覆盖默认配置。

3）微信小程序端的页面效果：

3）效果预览