社区首页 >专栏 >uniapp使用echarts在H5上显示报错问题的解决方法

uniapp使用echarts在H5上显示报错问题的解决方法

原创

炑焽

发布于 2024-08-11 07:12:37

5960

前言

在做uniapp vue3开发的echarts图表的时候，发现在浏览器上面正常运行，但在微信开发者工具上显示报错了，报错如下

原因：在微信小程序中，使用document.getElementById会报错，因为小程序的运行环境是基于WedView的，不同于浏览器环境。在微信小程序中没有直接操作Dom的能力，也就是没有document对象和getElementById方法

一、使用echarts在浏览器上运行的方法

安装echarts vue-echarts库

npm i echarts vue-echarts

在main.js引入echarts vue-echarts库

import { createApp } from 'vue'
import App from './App.vue'
import 'echarts';
import ECharts from 'vue-echarts'
const app = createApp(App)
app
.component('vue-echarts', ECharts)
  .mount('#app')

在vue项目中使用echarts

<template>
	<view class="wrapper">
		<view class="container">
			<vue-echarts :option="options" />
		</view>
	</view>
</template>
<script setup>
	import {ref,onMounted} from 'vue'
	const props=defineProps({
		data: Object
	})
	const options = ref(null)
	onMounted(() => {
		upData()
	})
	const upData = () => {
		options.value ={
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
	}
</script>
<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		box-sizing: border-box;
		padding: 0 50rpx;
		height: 280rpx;
	}
	.container{
		width: 100%;
		height: 100%;
		background-color: pink;
	}
</style>

效果图

二、使用uCharts的高性能跨平台图表库，在PC、H5、APP、小程序兼容

uCharts官网

跨平台引用

这里的跨平台引用指的是以 uni-app 或者 Taro 为基础的框架平台，借助跨平台框架将 uCharts 运行到各个终端平台。

获取uCharts

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

通过码云 uCharts 项目开源地址获取 u-charts.js，点击进入码云。
通过 npm 命令npm i @qiun/ucharts安装，成功后即可使用 import 或 require 进行引用。

npm i @qiun/ucharts

通过 uCharts 官网定制功能，定制您的专属 uCharts，体积更小、速度更快！

uni-app平台文档

canvas文档

API文档

demo示例

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

<script>
import uCharts from '@/js_sdk/u-charts.js';
var uChartsInstance = {};
export default {
  data() {
    return {
      cWidth: 750,
      cHeight: 500
    };
  },
  onReady() {
    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750);
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500);
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2016","2017","2018","2019","2020","2021"],
            series: [
              {
                name: "目标值",
                data: [35,36,31,33,13,34]
              },
              {
                name: "完成量",
                data: [18,27,21,24,6,28]
              }
            ]
          };
        this.drawCharts('column', res);
      }, 500);
    },
    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",
        padding: [15,15,0,5],
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [{min: 0}]
        },
        extra: {
          column: {
            type: "group"
          }
        }
      });
    },
    tap(e){
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    }
  }
};
</script>

<style scoped>
  .charts{
    width: 750rpx;
    height: 500rpx;
  }
</style>