uni-app插入ucharts(echarts)图表,支持H5，APP，小程序

uni-app插入ucharts(echarts)图表,支持H5，APP，小程序这是uni-app里通用的图表方法，从ucharts官网上整理的链接: https://pan.baidu.com/s/1vMkVr2A_ycZ95Slj6_-xCg 提取码: 2e61 复制这段内容后打开百度网盘手机App，操作更方便哦压缩包打开后这是个主要的文件夹放在根目录上然后直接在需要的vue文件里引入（下面代

const T

1806人浏览 · 2021-04-30 09:35:47

const T · 2021-04-30 09:35:47 发布

uni-app插入ucharts(echarts)图表,支持H5，APP，小程序

这是uni-app里通用的图表方法，从ucharts官网上整理的
链接: https://pan.baidu.com/s/1vMkVr2A_ycZ95Slj6_-xCg 提取码: 2e61 复制这段内容后打开百度网盘手机App，操作更方便哦
压缩包打开后这是个主要的文件夹放在根目录上
在这里插入图片描述
然后直接在需要的vue文件里引入（下面代码是个样例，根据自己情况而定）

<qiun-data-charts type="column" :chartData="chartsDataColumn1" />

在这里插入图片描述
type属性就是你要用的图表样式，chartData就是要绑定的图表配置，具体使用去https://www.ucharts.cn/ ucharts官网的在线工具配置，配置好了直接粘贴过来

注意不要忘了给他一个画布大小
在这里插入图片描述
划重点：如果渲染不出来就把HBuilder软件关了，重新启动运行一下

做完这些，基本是没问题的，下面再详细说一下图表配置问题：

标准数据格式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: [{
    name: "groupA",
    data: [
      {
        name: "一班",
        value: 50
      }, {
        name: "二班",
        value: 30
      }, {
        name: "三班",
        value: 20
      }, {
        name: "四班",
        value: 18
      }, {
        name: "五班",
        value: 8
      }
    ]
  }]
}

注：其他特殊图表类型，请参考mockdata文件夹下的数据格式（从官网查看）
https://gitee.com/uCharts/uCharts
上压缩包链接（ucharts教程官网打不开，可从这下载）
链接: https://pan.baidu.com/s/123NMCEQ_l0BEOfnIOqVoHQ 提取码: xwv2 复制这段内容后打开百度网盘手机App，操作更方便哦

下面这个截图就是官网教程整个示例文件的内容
其他基本图表可以参考ucharts.vue文件里的内容
在这里插入图片描述
uni-app中插入图表的基本操作就这样，其他操作还是建议去官网阅读
https://gitee.com/uCharts/uCharts#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95