uniapp 使用图表

uniapp 使用图表

目录

[TOC]

uCharts简介

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

uCharts官网 - 秋云uCharts跨平台图表库

uniapp使用

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

git clone

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

把基础库文件放入项目

柱状图组件

<!-- 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>