想在uniapp和vue3環(huán)境中使用echarts是一件相當(dāng)前衛(wèi)的事情，官方適配的還不是很好，echarts的使用插件寫的是有些不太清晰的，這里我花費(fèi)了一天的時間，終于將這個使用步驟搞清楚了，并且建了一個倉庫，大家可以直接clone下來使用。先看一下pc端和小程序端的效果：
微信小程序和抖音小程序等都支持：
使用步驟如下
第一步：下載插件包
下載echarts插件包，并導(dǎo)入到項目中，然后使用插件中的組件創(chuàng)建容器，并導(dǎo)入數(shù)據(jù)就可以了。
echarts插件包地址：echarts - DCloud 插件市場
如果你是使用hbuilder寫的，可以直接導(dǎo)入，如果你是vscode寫的，就下載壓縮包：
我這里將我下載好的zip包分享出來：lime-echart_0.8.1.zip - 藍(lán)奏云
?
下載好解壓然后將解壓后的組件導(dǎo)入到項目的components下面：
并且將靜態(tài)資源放到靜態(tài)文件夾中：
第二步：安裝echarts包
pnpm add echarts
-or-
npm install echarts?
第三步：在頁面中導(dǎo)入依賴并運(yùn)行
然后在頁面中導(dǎo)入這個LEchart這個組件：
將依賴按照不同的平臺區(qū)分導(dǎo)入到頁面組件中：下面是我的頁面源代碼文章來源：http://www.zghlxwxcb.cn/news/detail-755246.html
<template>
<view>
<view class="title">我的主頁</view>
<view>
<LEchart class="echart" ref="chart" @finished="init"></LEchart>
</view>
</view>
</template>
<script setup>
import LEchart from '@/components/l-echart/l-echart.vue'
// lime-echart是一個demo的組件，用于測試組件
// import LEchart from '@/components/lime-echart/lime-echart.vue'
import { onMounted, reactive, ref } from "vue"
// nvue 不需要引入
// #ifdef VUE3
// #ifdef MP
// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
const echarts = require('../../static/echarts.min');
// #endif
// #ifndef MP
// 由于 vue3 使用vite 不支持umd格式的包，故引入npm的包
import * as echarts from 'echarts';
// #endif
// #endif
let chart = ref(); // 獲取dom
const state = reactive({
option: {},
})
state.option = {
legend: {
show: true,
data: []
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left: '3%',
right: '8%',
top: '15%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 1, 4, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
axisLabel: {
// inside: true,
// color: '#fff'
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#83bff6'
}
},
z: 10
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#83bff6'
}
},
axisTick: {
show: false
},
// axisLabel: {
// ? color: '#999'
// },
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#83bff6'
}
}
},
series: [
{
data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, ,],
type: "bar",
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']
}
// 組件能被調(diào)用必須是組件的節(jié)點(diǎn)已經(jīng)被渲染到頁面上
onMounted(() => {
chart.value.init(echarts, chart => {
chart.setOption(state.option);
});
})
// 渲染完成
const init = () => {
console.log("渲染完成");
}
</script>
<style scopedlang='scss' scoped>
.echart {
width: 100%;
height: 300px;
}
.title {
text-align: center;
}
</style>?最后運(yùn)行小程序或者h(yuǎn)5就可以看到效果了：
文章來源地址http://www.zghlxwxcb.cn/news/detail-755246.html
到了這里，關(guān)于uniapp+vue3+ts+vite+echarts開發(fā)圖表類小程序，將echarts導(dǎo)入項目使用的詳細(xì)步驟，耗時一天終于弄好了的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
