https://blog.csdn.net/CherryLee_1210/article/details/83016706(copy)
1、首先在uni-app中不支持包下载所以得自己先新建一个项目,然后进入到这个目录下,执行 npm init,接下来一路回车即可。
2、下载所需要的库
npm install echarts mpvue-echarts --save
1
3、进入 node_modules 目录,里面的三个目录:echarts、mpvue-echats 、zrender 就是我们需要的第三方库。
4、把这三个库copy到自己项目的根目录下。
5、接下来要做的事儿就是导入库。
在自己需要图表显示的组件中导入所需要的库。
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
1
2
6、导入库之后就要使用了
我在同一个页面中使用了两次mpvueEcharts组件,这里需要注意的是,使用多次就要给每一个mpvueEcharts组件指定一个特有的canvasId。(必须要的,否则不好使,我在这个地方踩坑了)
视图层
<!-- 外层预留的图表容器 -->
<view class="box1">
<!-- 引入的mpvue-echarts组件 -->
<mpvue-echarts canvasId="chat1" :echarts="echarts" :onInit="fn1OnInit" />
</view>
<view class="box2">
<mpvue-echarts canvasId="chat2" :echarts="echarts" :onInit="fn2OnInit" />
</view>
业务层
//导入库
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
//命名一个方法名称,方便自己识别,也方便多个图表引用时易区别。
//切记这方法不能写到export default中。
function fn1(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart);
var option = {
...一些表格配置(参考echarts官方文档根据自己需求配置即可)
}
chart.setOption(option)
return chart
};
function fn2(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart);
var option = {
...一些表格配置(参考echarts官方文档根据自己需求配置即可)
}
chart.setOption(option)
return chart
};
//这是vue的导出对象
export default {
data() {
return {
//初始化图表
echarts,
//图表数据绑定(我们定义的两个方法绑定)
fn1OnInit: fn1,
fn2OnInit: fn2
}
},
//导入mpvue的mpvueEcharts组件。
components: {
mpvueEcharts
}
}
这样就实现了我们的echarts表格在uni中的使用
相关链接
uni-app引入第三方库
微信小程序中使用echarts
这里说明一点:
虽然第二个链接是微信小程序引入echarts,其实远离一样的。我们要到事情的本质,开始我一看小程序,直接忽略,因为我写的不是小程序。可是后来找不到,就耐着性子去看,发现代码是相通的。
虽然mpvue是一个使用 Vue.js 开发小程序的前端框架,但是这里导入组件,并且使用还是很顺畅的。
mpvue的地址:
mpvue,外号“没朋友”
uni-app 引入ecart的更多相关文章
-
uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
-
uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
-
uni app以及小程序 --环境搭建以及编辑器
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录 ...
-
uni app canvas 不生效
canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...
-
vue-cli创建的项目打包成app引入字体图标的问题
将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https
-
uni app 零基础小白到项目实战2
<template> <scroll-view v-for="(card, index) in list" :key="index"> ...
-
uni app 零基础小白到项目实战
$emit 子组件传给父组件 $ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http' const now = Date.now ...
-
uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
-
uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...
随机推荐
-
centos5安装salt-master
本篇文档主要解决2个问题: 1. centos5通过yum安装的master版本肯定低于centos6安装的minion,所以必须升级salt-master 2. zeromq版本太低会报这个错 20 ...
-
LOL游戏程序中对一些函数的Hook记录(Win10 x64)
[PC Hunter Standard][League of Legends.exe-->Ring3 Hook]: 108Hooked Object Hook Address and Locat ...
-
QF——iOS的单例模式
iOS的单例模式: 单例,即为单个实例,确保一个类里只有一个实例,向整个系统提供一个唯一的实例. 甚至为了严格提供唯一的实例,通常只允许该类自己提供实例化的方法,不允许出现其他入口.这时我们通常得重写 ...
-
perl 循环类选择器 ,爬取内容
jrhmpt01:/root/lwp/0526# cat 0526.txt <div class="TXD_sy_title"><span class=" ...
-
假设synthesize省略,语义属性声明assign retain copy时间,为了实现自己的setter和getter方法
假设synthesize省略,而且我们自己实现setter和getter方法时,系统就不会生成相应的setter和getter方法,还有实例变量 1,当把语义特性声明为assign时,setter和g ...
-
MONO 如何打包 .NET程序独立运行(winform篇)
.NET程序独立运行是指运行.NET的电脑上,不需要安装.NET框架. .NET程序集“独立运行”并非真正的独立,它是运行在mono运行时基础之上的.由于这个运行时可以独立存在,所以,我们不需要在目标 ...
-
Django中通过filter和simple_tag为前端实现自定义函数
Django的模板引擎提供了一般性的功能函数,通过前端可以实现多数的代码逻辑功能,这里称之为一般性,是因为它仅支持大多数常见情况下的函数功能,例如if判断,ifequal对比返回值等,但是稍微复杂一些 ...
-
antlr v4 使用指南连载2——准备环境
antlr v4 开发环境 从上一篇文章的例子中可以知道,antlr有一套自己的语法来声明目标语言的语法,因此它本身就需要编译或者使用antlr提供的api来读取这些语法规则,并使之可 ...
-
Python(列表操作应用实战)
# 输入一个数据,删除一个列表中的所有指定元素# 给定的列表数据data = [1,2,3,4,5,6,7,8,9,0,5,4,3,5,"b","a",&quo ...
-
最大子数组(I, II, III,IV,V)和最大子数组乘积 (动态规划)
I 找一个连续最大子数组,sum加到nums[i], 如果前面子数组和<0则舍去,从头开始. class Solution { public: /** * @param nums: A list ...