uniapp实现可视化图表（轻量、内存小）

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

用原生组件：

选择自己需要的模块，以小程序为例：

把min.js下载下来

把min.js放到小程序代码中，引用即可，使用案例看官网，

在官网中选择想要的图例，选择原生，复制粘贴即可

这样可以有效的解决使用echarts,小程序代码大于500MB的问题。

另外分析两个图表官网：

容量小，但是无法解决小程序echarts超过500MB的问题：LimeUi - 多端uniapp组件库

pc端：echarts图表集

<template>
  <view class="main">
    <canvas canvas-id="SPfIGkZuDCcDyMEzzEatveyzLWigWBus" id="SPfIGkZuDCcDyMEzzEatveyzLWigWBus" class="charts" @touchend="tap"/>
  </view>
</template>

<script>
import uCharts from '@/components/u-charts.min.js';
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 720,
      cHeight: 568
    };
  },
  onReady() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(720);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(568);
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories:  ['1', '2', '3', '4', '5', '6', '7', '8', '9','10','11','12'],
          series: [
            {
              name: "冷量",
              data: [100, 132, 122, 134, 190, 185,221, 270,156,186,123,102]
            },
            {
              name: "电量",
              data: [80, 162, 91, 134, 144, 130, 210, 120,125,136,157,186]
            }
          ]
        };
        this.drawCharts('SPfIGkZuDCcDyMEzzEatveyzLWigWBus', res);
      }, 500);
    },
    drawCharts(id,data){
      const ctx = uni.createCanvasContext(id, this);
      uChartsInstance[id] = new uCharts({
        type: "area",
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,15],
        enableScroll: false,
        dataLabel: false,
        dataPointShape: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2
        },
        extra: {
          area: {
            type: "straight",
            opacity: 0.2,
            addLine: true,
            width: 2,
            gradient: false,
            activeType: "hollow"
          }
        }
      });
    },
    tap(e){
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  margin: 14rpx;
  border: 2rpx solid #ecedee;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
  .charts {
    width: 100%;
    height: 568rpx;
    display: block;
  }
}
</style>