前言
在做uniapp vue3开发的echarts图表的时候，发现在浏览器上面正常运行，但在微信开发者工具上显示报错了，报错如下
image.png原因：在微信小程序中，使用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>- 效果图
image.png二、使用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>
image.png
