当前位置：首页 > news >正文

最清晰的微信小程序uni-app+vue3部署echarts图表的方法

news 2024/11/1 22:28:12

微信小程序uni-app+vue3部署echarts图表的方法

最近想在基于uni-app+vue3框架下开发的微信小程序中部署图表，却发现官网中的部署方法在小程序中无法显示，后来查阅资料说微信小程序是无法读取DOM的，然后在网上查阅资料，翻阅了很多教程方法尝试了很多种方法才最终成功，然后现在把部署过程方法都讲讲。

第一步安装echart依赖包

第一步，首先我们要安装echart依赖包

pnpm add echarts

第二步安装echarts小程序插件

第二步，下载和安装一个echarts小程序插件来使用。（十分重要）

echarts插件包地址：echarts - DCloud 插件市场

或者说直接看gitee:
lime-echart: 百度图表 echarts，uniapp、taro 使用 echarts 图表，全面兼容各平台小程序、H5、APP、Nvue

然后将整个项目下载下来，里面有两个重要的文件夹，分别是components，static:
在这里插入图片描述

将components和static里面的文件分别都放到项目src下的components和static里面:
在这里插入图片描述

第三步引入使用的方法

options中的图标数据可以直接去官网找:
echarts图表示例大全

首先给出效果图:
在这里插入图片描述

这里我给出参考代码:

<template><view class="home"><!-- 动态生成表格 --><view style="width: 100%; height: 408px;"><l-echart ref="chart" @finished="init"></l-echart></view></view>
</template><script lang="ts" setup>
import { ref, onMounted } from 'vue'
import LEchart from '@/components/l-echart/l-echart.vue' //这里引入的是刚刚下载的插件的位置
import * as echarts from 'echarts' 
let chart = ref<any>(null); //这里是ref要对应上
const state = reactive<any>({option: {},
})
state.option = {   //填入官网中图表的optionlegend: {top: 'bottom'},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true }}},series: [{name: 'Nightingale Chart',type: 'pie',radius: [25, 125],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 8},data: [{ value: 40, name: 'rose 1' },{ value: 38, name: 'rose 2' },{ value: 32, name: 'rose 3' },{ value: 30, name: 'rose 4' },{ value: 28, name: 'rose 5' },{ value: 26, name: 'rose 6' },{ value: 22, name: 'rose 7' },{ value: 18, name: 'rose 8' }]}]
}// 渲染完成
const init = () => { //渲染完成之后做的操作console.log("渲染完成");
}onMounted(() => {//在挂载的时候渲染图表chart.value.init(echarts, chart => {chart.setOption(state.option);});
})
</script><style scoped>
.home {/* 样式可以根据需要调整 */
}
</style>

参考:
uniapp+vue3+ts+vite+echarts开发图表类小程序，将echarts导入项目使用的详细步骤，耗时一天终于弄好了_uniapp vue3 echarts-CSDN博客

查看全文

http://www.mrgr.cn/news/63590.html