uni-app 引入ecart

https://blog.csdn.net/CherryLee_1210/article/details/83016706（copy）

一、首先在uni-app中不支持包下载因此得本身先新建一个项目，而后进入到这个目录下，执行 npm init，接下来一路回车便可。
二、下载所须要的库

npm install echarts mpvue-echarts --save
1
三、进入 node_modules 目录，里面的三个目录：echarts、mpvue-echats 、zrender 就是咱们须要的第三方库。
四、把这三个库copy到本身项目的根目录下。

五、接下来要作的事儿就是导入库。
在本身须要图表显示的组件中导入所须要的库。

import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
1
2
六、导入库以后就要使用了
我在同一个页面中使用了两次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,外号“没朋友”