uniapp 使用图表

目录

uCharts简介

 uniapp使用

git clone

 把基础库文件放入项目

柱状图组件

 导入 注册使用

---

uCharts简介

uCharts是一款基于canvas API开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360）、快应用等更多支持 canvas API 的平台

uCharts官网 - 秋云uCharts跨平台图表库uCharts跨平台图表库，全端全平台支持的图表库，开箱即用。支持PC、H5、微信小程序、支付宝小程序、百度小程序、头条小程序、飞书小程序、QQ小程序、360小程序、快手小程序、钉钉小程序、淘宝小程序、京东小程序、Vue、Taro等更多支持canvas的框架，体积小巧、调用简单方便、性能及体验极佳。https://www.ucharts.cn/v2/#/

 uniapp使用

原生 uCharts 您只需获取 u-charts.js 或 u-charts.min.js 单个文件，在页面中引用这个 js 即可开始使用，您可通过以下方式获得 uCharts：

git clone

uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。https://gitee.com/uCharts/uCharts.git

 把基础库文件放入项目

 

 

柱状图组件

<!-- import uCharts from '@/utils/u-charts.js'; -->
<template>
  <view>
    <canvas canvas-id="uvCaEJCYWTckEanlkQiJOrPEevYpMnRq" id="uvCaEJCYWTckEanlkQiJOrPEevYpMnRq" class="charts" @touchend="tap"/>
  </view>
</template>

<script>
import uCharts from '@/utils/u-charts.js';
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 680,
      cHeight: 420
    };
  },
  onReady() {
    // 对应 css .charts 的 width
    this.cWidth = uni.upx2px(680);
    // 对应 css .charts 的 height
    this.cHeight = uni.upx2px(420);
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
  
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2016","2017","2018","2019","2020","2021"],
            series: [
     
              {
                name: "营业收入",
                data: [300,900,600,200,400,100]
              }
            ]
          };
        this.drawCharts('uvCaEJCYWTckEanlkQiJOrPEevYpMnRq', res);
    
    },
    drawCharts(id,data){
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "column",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
		// 主题颜色，16进制颜色格式
        color: ["#1EB064","##A6DD57",],
        padding: [15,15,0,5],
		// 图标配置	是否显示图例标识
        legend: {
			show:false
		},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "stack",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      });
    },
    tap(e){
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    }
  }
};
</script>

<style scoped>
  .charts{
    width: 680rpx;
    height: 420rpx;
  }
</style>

 导入 注册使用

	import echarts from '@/pages/index/components/echarts'
	components: {
			echarts,
		},
    <echarts></echarts>