这里只举例折线图。

一、视图层

画图依赖于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>

Uniapp中使用Echarts相关推荐

uniapp中封装echarts圆环图
①安装插件市场的echarts图表插件 https://ext.dcloud.net.cn/plugin?id=4899 ②安装后需安装echarts相关依赖: npm install echarts ...
uni-app中使用Echarts绘画图表
1.下载安装 npm install echarts mpvue-echarts --save 这时,在node_modules里面会多出 echarts.mpvue-echats .zrender ...
uni-app插入ucharts(echarts)图表,支持H5，APP，小程序
uni-app插入ucharts(echarts)图表,支持H5,APP,小程序这是uni-app里通用的图表方法,从ucharts官网上整理的链接: https://pan.baidu.com/ ...
uniapp中使用ucharts组件开发App中的折线图流程
uniapp中使用ucharts组件开发流程官方ucharts地址我是在uniapp使用echarts后发现在安卓手机app上不显示,所以使用ucharts来代替echarts 组件地址在这里导 ...
uniapp 中使用图表（秋云uCharts图表组件）
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦.于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件), ...
如何在 Vue 项目中使用 echarts
数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,为什么选择 echarts,第一:简单上手容易,第二:它几 ...
React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
小程序多个echars_微信小程序中使用echarts以及踩坑总结
人在家中坐,锅从天上来. 半个月前本来在家写着一个项目,还没来得及提测,领导突然一个电话,需要立刻去支援另一个项目,一打听,一个烂尾半年的项目,纵使内心不愿意,还是要去啊.因为鲁迅说过,生活就像强*, ...
在vue-cli项目中使用echarts
本文转载自:https://www.cnblogs.com/Smiled/p/7686316.html 这个示例使用 vue-cli 脚手架搭建安装echarts依赖 npm install ech ...

Uniapp中使用Echarts

一、视图层

二、逻辑层

三、样式

Uniapp中使用Echarts相关推荐

最新文章

热门文章