uni-app 引入ecart

时间:2022-11-05 19:13:34

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的更多相关文章

  1. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  2. uni app 零基础小白到项目实战-1

    uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...

  3. uni app以及小程序 --环境搭建以及编辑器

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录 ...

  4. uni app canvas 不生效

    canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...

  5. vue-cli创建的项目打包成app引入字体图标的问题

    将项目在手机端调试时,发现引入的阿里图标显示不出来,需要在引入的iconfont.css文件夹里给url加上https

  6. uni app 零基础小白到项目实战2

    <template> <scroll-view v-for="(card, index) in list" :key="index"> ...

  7. uni app 零基础小白到项目实战

    $emit 子组件传给父组件 $ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http' const now = Date.now ...

  8. uni app中关于图片的分包加载

    因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...

  9. uni-app聊天室&vert;vue&plus;uniapp仿微信聊天实例&vert;uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

随机推荐

  1. centos5安装salt-master

    本篇文档主要解决2个问题: 1. centos5通过yum安装的master版本肯定低于centos6安装的minion,所以必须升级salt-master 2. zeromq版本太低会报这个错 20 ...

  2. LOL游戏程序中对一些函数的Hook记录&lpar;Win10 x64&rpar;

    [PC Hunter Standard][League of Legends.exe-->Ring3 Hook]: 108Hooked Object Hook Address and Locat ...

  3. QF——iOS的单例模式

    iOS的单例模式: 单例,即为单个实例,确保一个类里只有一个实例,向整个系统提供一个唯一的实例. 甚至为了严格提供唯一的实例,通常只允许该类自己提供实例化的方法,不允许出现其他入口.这时我们通常得重写 ...

  4. perl 循环类选择器 &comma;爬取内容

    jrhmpt01:/root/lwp/0526# cat 0526.txt <div class="TXD_sy_title"><span class=&quot ...

  5. 假设synthesize省略&comma;语义属性声明assign retain copy时间&comma;为了实现自己的setter和getter方法

    假设synthesize省略,而且我们自己实现setter和getter方法时,系统就不会生成相应的setter和getter方法,还有实例变量 1,当把语义特性声明为assign时,setter和g ...

  6. MONO 如何打包 &period;NET程序独立运行&lpar;winform篇&rpar;

    .NET程序独立运行是指运行.NET的电脑上,不需要安装.NET框架. .NET程序集“独立运行”并非真正的独立,它是运行在mono运行时基础之上的.由于这个运行时可以独立存在,所以,我们不需要在目标 ...

  7. Django中通过filter和simple&lowbar;tag为前端实现自定义函数

    Django的模板引擎提供了一般性的功能函数,通过前端可以实现多数的代码逻辑功能,这里称之为一般性,是因为它仅支持大多数常见情况下的函数功能,例如if判断,ifequal对比返回值等,但是稍微复杂一些 ...

  8. antlr v4 使用指南连载2——准备环境

    antlr v4 开发环境         从上一篇文章的例子中可以知道,antlr有一套自己的语法来声明目标语言的语法,因此它本身就需要编译或者使用antlr提供的api来读取这些语法规则,并使之可 ...

  9. Python&lpar;列表操作应用实战&rpar;

    # 输入一个数据,删除一个列表中的所有指定元素# 给定的列表数据data = [1,2,3,4,5,6,7,8,9,0,5,4,3,5,"b","a",&quo ...

  10. 最大子数组(I&comma; II&comma; III,IV,V)和最大子数组乘积 &lpar;动态规划&rpar;

    I 找一个连续最大子数组,sum加到nums[i], 如果前面子数组和<0则舍去,从头开始. class Solution { public: /** * @param nums: A list ...