?插件地址：echarts-for-uniapp - DCloud 插件市場

圖例：

?

一、uniapp 安裝?

npm i uniapp-echarts --save

?二、文件夾操作

將?node_modules 下的 uniapp-echarts 文件夾復制到 components 文件夾下

?當前不操作此步驟的話，運行 -> 運行到小程序模擬器 -> 微信開發(fā)者工具 時，echarts圖表顯示不出來

原因：運行到小程序打包過程中，此插件不在小程序文件包內

三、地址引入

根據(jù)當前插件放的地址進行引入

import * as echarts from "@/components/uniapp-echarts/static/echarts.min.js";
import uniChart from "@/components/uniapp-echarts/components/uni-chart/uni-chart.vue"; 

四、組件封裝 echartLine.vue

<template><view class="content"><uniChart :option="person.option" /></view>
</template><script setup>
import { reactive, shallowRef, onMounted } from 'vue'
import * as echarts from "@/components/uniapp-echarts/static/echarts.min.js";
import uniChart from "@/components/uniapp-echarts/components/uni-chart/uni-chart.vue"; const props = defineProps({id: {type: String,required: true},datas:{type: Array,required: true}
})
let person=reactive({userScore:[],userAvgScore:[], xTime:[], // x軸數(shù)據(jù)max: 600, // 最大數(shù)值option: {}
})onMounted(()=>{load()GetEchar()
})
const load=()=>{// 指定配置項和數(shù)據(jù)person.userScore = props.datas.map(f => { return f.score })person.userAvgScore = props.datas.map(f => { return f.avgScore })person.xTime = props.datas.map(f => { return f.name })
}const GetEchar = () => {person.option = {tooltip: {trigger: 'axis',formatter: function (params) {return params[0].name+'\n'+option.legend.data[0].name+'：'+person.userScore[params[0].dataIndex]+'分\n'+option.legend.data[1].name+'：'+person.userAvgScore[params[0].dataIndex]+'分'}},legend: {data: [{ name: '學生/張小雨', icon: 'circle' },{ name: '年級平均', icon: 'circle' }],icon: 'circle',y: 'bottom',itemWidth: 12, //寬度itemHeight: 12, //高度itemGap: 25, //間距textStyle: {color: '#333',fontSize: 12,lineHight: 40}},grid: {top: '3%',left: '3%',right: '5%',bottom: '12%',containLabel: true},xAxis: [{type: 'category',axisTick: {show:false},axisLine: {onZero: false,lineStyle: {color: '#2A2A2A',width: 2}},axisLabel: {//坐標軸刻度標簽的相關設置。textStyle: {color: '#6F6F70',fontSize: 12},formatter: function (params) {return params;}},data: person.xTime}],yAxis: [{type: 'value',axisTick: {show:false},axisLine: {show:false},max: person.max,min: 0,// y軸文字顏色axisLabel: {textStyle: {color: '#6F6F70',fontSize: 12}},splitLine: {show: true,lineStyle: {color: ['#5E5E5E'],width: 1,type: 'dashed'}}}],series: [{name: '學生/張小雨',type: 'line',symbol: 'circle', //拐點樣式symbolSize: 4, //拐點大小// 折線拐點的樣式itemStyle: {normal: {// 靜止時：color: '#6B86FF',borderColor: '#6B86FF', //拐點的邊框顏色borderWidth: 2},emphasis: {// 鼠標經(jīng)過時：color: '#fff'}},data: person.userScore},{name: '年級平均',type: 'line',symbol: 'circle', //拐點樣式symbolSize: 4, //拐點大小// 折線拐點的樣式itemStyle: {normal: {// 靜止時：color: '#FFA755',borderColor: '#FFA755', //拐點的邊框顏色borderWidth: 2},emphasis: {// 鼠標經(jīng)過時：color: '#fff'}},data: person.userAvgScore}]};
}
</script>
<style>
.content {width: 375px;height: 250px;
}
</style>

五、頁面調用

<EchartLine v-if="person.studentScore && person.studentScore.length > 0" :id="'studentGrade'" :datas="person.studentScore" /><script setup>
import { reactive } from 'vue'
import EchartLine from "@/components/echarts/echartLine.vue"let person=reactive({// 學生總成績studentScore:[{name:'7月5日',score:10,avgScore:90},{name:'7月6日',score:93,avgScore:80},{name:'7月7日',score:60,avgScore:70},{name:'7月8日',score:50,avgScore:70},{name:'7月9日',score:86,avgScore:50}]
})
</script>

? ? ?希望我的愚見能夠幫助你哦~，若有不足之處，還望指出，你們有更好的解決方法，歡迎大家在評論區(qū)下方留言支持，大家一起相互學習參考呀~