插件地址:echarts-for-uniapp - DCloud 插件市场
图例:
一、uniapp 安装
npm i uniapp-echarts --save
二、文件夹操作
将 node_modules 下的 uniapp-echarts 文件夹复制到 components 文件夹下
当前不操作此步骤的话,运行 -> 运行到小程序模拟器 -> 微信开发者工具 时,echarts图表显示不出来
原因:运行到小程序打包过程中,此插件不在小程序文件包内
三、地址引入
根据当前插件放的地址进行引入
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轴数据
max: 600, // 最大数值
option: {}
})
onMounted(()=>{
load()
GetEchar()
})
const load=()=>{
// 指定配置项和数据
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: {
// 鼠标经过时:
color: '#fff'
}
},
data: person.userScore
},
{
name: '年级平均',
type: 'line',
symbol: 'circle', //拐点样式
symbolSize: 4, //拐点大小
// 折线拐点的样式
itemStyle: {
normal: {
// 静止时:
color: '#FFA755',
borderColor: '#FFA755', //拐点的边框颜色
borderWidth: 2
},
emphasis: {
// 鼠标经过时:
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>
六、避坑
1、解决echarts层级太高
在手机端运行时,出现 echarts层级太高,导致滑动到图表上时,滑不动的情况
解决方法:
在复制的 uniapp-echarts 文件夹包下,找到 components -> uni-chart -> uni-chart.vue 文件,添加 scroll-view 将 canvas 标签包裹一层,其中 canvas 要有@touchstart ,否则真机不生效。
如下代码
<!-- #ifdef MP-WEIXIN || MP-QQ -->
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<canvas
v-if="useNewCanvas"
type="2d"
:id="canvasId"
class="uni-canvas"
:canvas-id="canvasId"
@click="click"
@touchstart="touchStart"
@touchmove.stop="touchMove"
@touchend="touchEnd"
force-use-old-canvas="true"
/>
<canvas
v-else
:id="canvasId"
class="uni-canvas"
:canvas-id="canvasId"
@click="click"
@touchstart="touchStart"
@touchmove.stop="touchMove"
@touchend="touchEnd"
force-use-old-canvas="true"
/>
</scroll-view>
<!-- #endif -->
同时需要修改样式文章来源:https://www.toymoban.com/news/detail-651667.html
<style>
.scroll-Y{
height: 100%;
position: relative;
left: 50%;
transform: translate(-50%);
}
.uni-canvas {
width: 100%;
height: 100%;
display: block;
z-index: -1 !important;
}
</style>
希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~文章来源地址https://www.toymoban.com/news/detail-651667.html
到了这里,关于【uniapp】中 微信小程序实现echarts图表组件的封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!