前言
最近学习了Vue3，于是在网上找相关的项目进行练手，发现vue3+echarts实现数据可视化这个项目不错，于是跟着教程动手操作，并把学习过程做一个分享~
项目预览：http://39.108.15.20/ （简单弄了个服务器进行展示嘿嘿嘿~）
展示效果：
项目搭建
使用脚手架创建一个Vue3项目
--引入echarts插件做数据展示
--引入lib-flexible实现窗口自适应
--安装插件px to rem，进行px和rem的转换（px to rem参数在插件的设置中进行配置）
接下来就是页面的实现 这里需要了解echarts相关的参数配置，比较复杂的数据展示需要的配置较多，可以参考官网（echarts.apache.org/zh/index.ht…
以简单的饼状图为例
myChart.setOption({
// 设置图例
legend: {
top: "bottom",
},
// 提示框
tooltip: {
show: true,
},
series: [
{
type: "pie", // 类型为饼状图
data: data.data.chartThree.chartData,
radius: [10, 100],
center: ["50%", "45%"],
roseType: "area",
itemStyle: {
borderRadius: 10,
},
},
],
})
接口数据
后台通过node实现
数据源是提前准备好的
这块弄的比较粗糙😂
项目打包部署上线
用的是阿里云的服务器，由于是第一次接触，这一块花了不少时间去配置，也请教了一下运维大佬~
云服务器的相关配置
nginx和node环境配置
因为不太懂，百度了不少，最后好在成功部署了~（感谢大佬带路）
总结
通过这次的学习对echarts有了不少的了解，同时vue3方面也有一些巩固
echarts是能满足我们日常数据展示的一些需求的，在web端和移动端都有不少应用
以上就是我这个前端小白的学习总结，最后想说：
这是我第一次在掘金发布文章，也希望通过这种方式能激励自己不断学习😊
和掘金的小伙伴们一起共同成长✌️
