Uniapp中使用Echarts
在uniapp中使用echarts折线图。
·
这里只举例折线图。
一、视图层
画图依赖于canvas标签,记得给它一个id名。
<template>
<view class="dataTable">
<u-toast ref="uToast" />
<view class="dataTable-canvas">
<view class="dataTable-canvas-title">
<text>
近七日学生上报统计
</text>
</view>
<canvas id="myEcharts"></canvas>
</view>
</view>
</template>
二、逻辑层
<script>
// 将npm方式下载的echarts插件引入进来
import * as echarts from 'echarts';
// 接口
import { getWeekStuReport } from '@/api/dataTable/dataTable.js';
export default {
data() {
return {
// 这里初始化一个null,待会儿用来充当echarts实例
myChart: null,
}
},
onLoad(options) {
let that = this;
// 通过nextTick异步画图
this.$nextTick(() => {
that.drawLines();
});
},
beforeDestroy() {
// 页面关闭时销毁echarts实例
this.myChart.clear();
this.myChart.dispose();
},
methods: {
async drawLines() {
// 这里是初始化的方式,通过id查询找到你的canvas标签
this.myChart = echarts.init(document.getElementById('myEcharts'));
// 这里我初始化了4个数组用来存放 后端接口给我的数据
let data = [];
let tian = [];
let reportLine = [];
let notReportLine = [];
try {
let res = await getWeekStuReport();
console.log(res);
if (res.code != 0) {
this.$refs.uToast.show({
title: res.message,
type: 'error',
duration: 3000,
});
} else {
data = res.result;
data.forEach((item) => {
// 从接口中提取自己想要的数据
tian.push(item.type);
reportLine.push(item.sbNum);
notReportLine.push(item.notSbNum);
})
}
} catch (e) {
console.log(e);
}
// 这里开始就是echarts的配置项了
let option = {
// x轴数据
xAxis: {
type: 'category',
data: tian,
},
// y轴数据
yAxis: {
type: 'value',
},
// 这里写2个对象是2条线条,3个则是3条
series: [
{
// data使用刚才定义的数组,数据从后端接口中取得
data: reportLine,
type: 'line',
smooth: true,
},
{
data: notReportLine,
type: 'line',
smooth: true,
},
],
grid: {
// 这里可以防止Y轴显示不全
containLabel: true
}
}
// 这里不要忘记把option设置给echarts实例
this.myChart.setOption(option);
// 这里是用于窗口变化时的自适应,利用的是echarts自带的resize方法
// 如果你打印出来这个echarts实例,可以在函数里面找到这个方法
window.addEventListener('resize', () => {
this.myChart.resize()
});
},
},
}
</script>
三、样式
记得给canvas宽高就行。
<style scope lang="scss">
.dataTable{
padding: 10rpx;
width: 100%;
height: 100%;
&-canvas {
&-title {
padding: 20rpx 0rpx;
> text {
padding-left: 20rpx;
width: 100%;
height: 100%;
font-size: 32rpx;
font-weight: 550;
line-height: 32rpx;
border-left: 10rpx solid #28b5b1;
}
}
#myEcharts {
width: 100%;
height: 600rpx;
}
}
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)