uni-app中使用Echarts的实践总结

本是古典何须时尚 2022-05-08 12:16 2583阅读 0赞

**声明：本人在写这篇博客的时候，uni-app的插件市场还没发布，适用版本也比较老，仅供参考！建议各位技术大神去uni-app官方的“插件市场”去找寻适合自己项目的图表插件。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZXJyeUxlZV8xMjEw_size_16_color_FFFFFF_t_70]  
1、首先在uni-app中不支持包下载所以得自己先新建一个项目，然后进入到这个目录下，执行 **npm init**，接下来一路回车即可。  
2、下载所需要的库

npm install echarts mpvue-echarts --save

3、进入 node\_modules 目录，里面的三个目录：**echarts**、**mpvue-echats** 、**zrender** 就是我们需要的第三方库。  
4、把这三个库copy到自己项目的根目录下。  
![在这里插入图片描述][70]  
5、接下来要做的事儿就是导入库。  
在自己需要图表显示的组件中导入所需要的库。

import * as echarts from 'echarts'
    import mpvueEcharts from 'mpvue-echarts'

6、导入库之后就要使用了  
我在同一个页面中使用了两次mpvueEcharts组件，这里需要注意的是，使用多次就要给每一个mpvueEcharts组件指定一个特有的**canvasId**。（必须要的，否则不好使，我在这个地方踩坑了）

<view class="box1">
    	
    	<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引入第三方库][uni-app]  
[微信小程序中使用echarts][echarts]

这里说明一点：  
虽然第二个链接是微信小程序引入echarts，其实远离一样的。我们要到事情的本质，开始我一看小程序，直接忽略，因为我写的不是小程序。可是后来找不到，就耐着性子去看，发现代码是相通的。  
虽然[mpvue][]是一个使用 Vue.js 开发**小程序**的前端框架，但是这里导入组件，并且使用还是很顺畅的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoZXJyeUxlZV8xMjEw_size_16_color_FFFFFF_t_70]: /images/20220508/3fe74606407f4be7b0b61c2d0f743fe3.png
[70]: /images/20220508/e1bd72398cb647ae9dc2377a9ebcd409.png
[uni-app]: http://ask.dcloud.net.cn/article/19727
[echarts]: https://github.com/F-loat/mpvue-echarts
[mpvue]: http://mpvue.com/