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

uniapp+vue3 中使用echart 以及echart文件过大需要分包的记录

news 2025/7/2 14:25:06

使用的是插件市场的lime-echart ，地址：插件市场lime-echart

直接上代码

<template><view class="container"><view class="chart-container"><view style="width: 700rpx; height: 450rpx"><LEchart ref="chartRef" style="width: 100%"></LEchart></view></view></view>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
//
import { onUnload } from '@dcloudio/uni-app'
import LEchart from '../../uni_modules/lime-echart/components/l-echart/l-echart.vue'
const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js')const chartRef = ref(null)
const myChart = ref(null)const getOptionData = dates => {const option = {// legend: {//   show: true,//   data: ['分数'],// },tooltip: {trigger: 'item',axisPointer: {type: 'shadow',},confine: true,},grid: {left: '1%',right: '10%',top: '15%',bottom: '5%',containLabel: true,},xAxis: {type: 'category',data: dates,axisLabel: {// interval: 0, // 强制显示所有标签// rotate: 45, // 可选：旋转标签避免重叠// inside: true,// color: '#fff'},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: '#83bff6',},},z: 10,},yAxis: {type: 'value',min: 0, // 设置y轴最小值为0max: 100, // 设置y轴最大值为100axisLine: {show: true,lineStyle: {color: '#83bff6',},},axisTick: {show: false,},// axisLabel: {//   color: '#999'// },splitLine: {show: true,lineStyle: {type: 'dashed',color: '#83bff6',},},},series: [{markLine: {data: [{ yAxis: 70, name: '及格线' }],lineStyle: {type: 'dashed', // 虚线},label: {show: true,position: 'insideStartTop',formatter: '及格线',},},data: [13, 40, 80, 70, 60, 50, 11, 13, 14, 55],type: 'bar',name: '平均分数',label: {show: true,position: 'top', // 展示在柱子的上方color: '#333',},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#83bff6' },{ offset: 0.5, color: '#188df0' },{ offset: 1, color: '#188df0' },]),},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#2378f7' },{ offset: 0.7, color: '#2378f7' },{ offset: 1, color: '#83bff6' },]),},},areaStyle: {show: true,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#188df0',},{offset: 1,color: '#fff',},]),},},],color: ['#83bff6'],}return option
}
const getLastNDay = (time, n) => {let arry = []let baseDate = new Date(time)for (let i = n - 1; i >= 0; i--) {let date = new Date(baseDate)date.setDate(date.getDate() - i)let year = date.getFullYear()let mon = (date.getMonth() + 1).toString().padStart(2, '0')let d = date.getDate().toString().padStart(2, '0')arry.push(mon + '.' + d)}return arry
}
onMounted(() => {nextTick(() => {setTimeout(() => {initChart()})})
})
const initChart = async () => {if (!chartRef.value) return// 初始化echartmyChart.value = await chartRef.value.init(echarts)// 默认获取容器尺寸myChart.value.resize()const dates = getLastNDay(new Date(), 10)console.log(dates)const optionData = getOptionData(dates)// 设置true清空echart缓存myChart.value?.setOption(optionData, true)console.log(myChart.value)// myChart.value.
}// 组件销毁时销毁图表实例
onUnload(() => {if (myChart.value) {echarts.dispose(myChart.value)}
})
</script>
<style>
page {height: 100%;
}
.container {height: 100%;display: flex;flex-direction: column;background-color: #f5f6fa;
}.chart-container {height: 400rpx;position: relative;border-bottom: 2rpx solid #e5e5e5;
}</style>