uni-app 引入ecart

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 canvasId="chat1" :echarts="echarts" :onInit="fn1OnInit" />
</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

最新文章

热门文章