mpvue使用ucharts画区域图/柱状图

最新推荐文章于 2024-10-14 15:33:40 发布

QAQ_0

最新推荐文章于 2024-10-14 15:33:40 发布

阅读量4.8k

点赞数 2

分类专栏： mpvue ucharts

本文链接：https://blog.csdn.net/qq_37662737/article/details/94478504

版权

本文介绍了如何在mpvue项目中结合ucharts库绘制区域图和柱状图，通过官方文档配置进行图表设置，并解决了在u-charts.js源码中调整以适配图形样式的问题。

摘要由CSDN通过智能技术生成

index.vue页面
参考官方文档配置
http://doc.ucharts.cn/1074673
遇到的问题:u-charts.js源码里要将最后一句改成:

// module.exports = Charts;这句改成下面的
export default Charts;

<template>
  <view>
    <view class="qiun-charts">
      <!-- 区域图 -->
      <canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
    </view>
    <div class="qiun-charts">
      <!-- 柱状图 -->
      111
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
    </div>
  </view>
</template>

<script>
import uCharts from "../../components/u-charts/u-charts.js";
var canvaArea =null;
var canvaColumn = null;
expo