uni-app搭建的微信小程序项目中使用ECharts,记录一下自己的使用,以及过程中遇到的问题参考自:uniapp在微信小程序中使用ECharts_wxh958548129的博客-CSDN博客_uniapp小程序使用echartshttps://github.com/MissionWang/mpvue-echarts1.引入npm installechartsmpvue-echarts2.ECharts在线构建定制echarts的js文件,选择自己项目需要的图表及组件,可以选择进行代码压缩3.将定制文件放在common下,将node_modules下面的mpvue-echarts->src复

🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，互相交流学习，期待你的加入！(文末有我wx或者直接私信)目录折线图1.title2.tooltip3.grid4.legend5.xAxis6.yAxis7.series附：常见问题1、自定义X轴文字（文字替换）2、自定义X轴文字（文字换行）3、自定义tooltip本文主要讲解使用Echarts

🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，互相交流学习，期待你的加入！(文末有我wx或者直接私信)目录折线图1.title2.tooltip3.grid4.legend5.xAxis6.yAxis7.series附：常见问题1、自定义X轴文字（文字替换）2、自定义X轴文字（文字换行）3、自定义tooltip本文主要讲解使用Echarts

对于可视化大屏项目而言，我们主要需要考虑下面两个问题：    首先是div元素的适配，需要保持每个div元素在不同分辨率的屏幕下依然会显示正常的比例，不会因为不同分辨率的屏幕而变得拉伸变形；    第二个要考虑的因素是字体，通常情况下我们会吧字体设置为px，但在大屏项目中并不适用，会出现不协调的问题。解决方案：一、css3transform:scale()方法    在项目中直接使用设计稿中px单位进行开发即可，会对body内所有元素进行缩放，从而不会让echarts图表超出画布；     需要注意的是，绑定resize事件一定别忘了防抖，页面销毁别忘了移除监听事件    我们直接使用时如果显

对于可视化大屏项目而言，我们主要需要考虑下面两个问题：    首先是div元素的适配，需要保持每个div元素在不同分辨率的屏幕下依然会显示正常的比例，不会因为不同分辨率的屏幕而变得拉伸变形；    第二个要考虑的因素是字体，通常情况下我们会吧字体设置为px，但在大屏项目中并不适用，会出现不协调的问题。解决方案：一、css3transform:scale()方法    在项目中直接使用设计稿中px单位进行开发即可，会对body内所有元素进行缩放，从而不会让echarts图表超出画布；     需要注意的是，绑定resize事件一定别忘了防抖，页面销毁别忘了移除监听事件    我们直接使用时如果显

解决某些情况下ECharts饼图多行标签重叠问题对于多行标签的重叠问题，其实一直没有一个完美的解决方案。我能在网上查到的比较全面的解决方法就是这个：https://zhuanlan.zhihu.com/p/272710806但我的项目中某些东西是明确的：Label的行数、字体大小、数据个数(只有6个)、而且不必要做适配。所以我就用曲线救国的方式避免了多行标签的重叠。PS：我觉得5.0.0版本以上的labelLayout可能是一个更好的曲线救国方式，不过我这里是4.8.0的。我的问题：有许多小百分比的数据，导致label重叠：第一步：调整数组顺序ECharts饼图的label方向似乎是固定的，所

解决某些情况下ECharts饼图多行标签重叠问题对于多行标签的重叠问题，其实一直没有一个完美的解决方案。我能在网上查到的比较全面的解决方法就是这个：https://zhuanlan.zhihu.com/p/272710806但我的项目中某些东西是明确的：Label的行数、字体大小、数据个数(只有6个)、而且不必要做适配。所以我就用曲线救国的方式避免了多行标签的重叠。PS：我觉得5.0.0版本以上的labelLayout可能是一个更好的曲线救国方式，不过我这里是4.8.0的。我的问题：有许多小百分比的数据，导致label重叠：第一步：调整数组顺序ECharts饼图的label方向似乎是固定的，所

本章我们将解决在Windows系统中打开ECharts官网缓慢的问题。1、?问题描述正常情况下，我们在Windows环境中打开ECharts官网可能会遇到非常缓慢的情况，一直处于加载中，甚至打不开，此时我们需要做一些处理即可。2、?解决办法我们打开hosts文件，在文件最后追加上如下设置即可：151.101.2.132echarts.apache.orgPS：hosts文件所在文件夹为C:\Windows\System32\drivers\etc，我们在保存hosts文件的时候，可能会要求我们以管理员身份打开才能保存。3、?测试此时我们重新打开ECharts官网即可发现可以秒开了。?说明：20

本章我们将解决在Windows系统中打开ECharts官网缓慢的问题。1、?问题描述正常情况下，我们在Windows环境中打开ECharts官网可能会遇到非常缓慢的情况，一直处于加载中，甚至打不开，此时我们需要做一些处理即可。2、?解决办法我们打开hosts文件，在文件最后追加上如下设置即可：151.101.2.132echarts.apache.orgPS：hosts文件所在文件夹为C:\Windows\System32\drivers\etc，我们在保存hosts文件的时候，可能会要求我们以管理员身份打开才能保存。3、?测试此时我们重新打开ECharts官网即可发现可以秒开了。?说明：20

示例：  地图文件下载地址：https://gitcode.net/mirrors/fuhang-lm/echarts?utm_source=csdn_github_accelerator&from_codechina=yes 这里以北京市地图为例，如果是其他省份或者全国，下载对应的js文件并引入系统，需要替换一下两处，换成对应的省份：varmapName='北京'，geo:{map:'北京',}　名字命名在对应的js文件里，需要写对，地理坐标js文件也有，复制出来就可以了 htmldivid="chart_map"style="width:100%;height:610px;">div>di