2024-09-01文章讲述了在Vue3 TS项目中，由于切换tab时echarts图表宽度异常的问题。当tab隐藏时，echarts的父元素宽度为0，导致设置的width:100%无效。解决方案是在切换到特定tab时，通过定时器触发resizeHandler函数，动态调整echarts图表的大小，确保其正确渲染。代码示例展示了如何在组件生命周期中初始化echarts，以及添加和移除窗口resize事件监听器。

https://www.qianduange.cn//article/17458.html 分类：前端知识

2024-09-01该博客详细介绍了如何在Vue项目中集成并使用echarts库创建一个基础的统计图表。首先通过npm安装Echarts，然后在main.js中全局引入。接着在组件中定义图表的配置项，包括标题、坐标轴、网格等，并在mounted钩子中初始化图表并设置数据。示例代码展示了一个显示一周用户来源的折线图。

https://www.qianduange.cn//article/17397.html 分类：前端知识

2024-08-27地址:可自行选择版本，笔者测试了5.3.3和5.4.1都支持下载后得到echarts.min.js请根据需要自行选择需要的图表打包下载，我只选了默认的饼图、柱图、线图;

https://www.qianduange.cn//article/17045.html 分类：前端知识

2024-08-27文章介绍了如何使用echarts进行分辨率适配，包括监听窗口大小变化、计算适配率和调整图表元素尺寸。同时，详细讲解了如何利用Echarts.graphic.LinearGradient创建渐变效果，以及构建折线图的通用代码结构。此外，文章还展示了实现点击切换折线图数据的详细步骤，包括数据获取、动态渲染和下拉框控制。

https://www.qianduange.cn//article/17043.html 分类：前端知识

2024-08-24vue脚手架中使用echarts_echarts脚手架中使用

https://www.qianduange.cn//article/16820.html 分类：前端知识

2024-08-24title: {text: '简单柱状图示例' // 图表的标题},tooltip: {}, // 启用图表的工具提示功能legend: {data: ['销售量'] // 图例显示的项名称},xAxis: {data: ['产品 A', '产品 B', '产品 C', '产品 D', '产品 E'] // X 轴的类目数据},yAxis: {}, // Y 轴的配置项，使用默认配置series: [name: '销售量', // 数据系列的名称。_vue3 echarts

https://www.qianduange.cn//article/16816.html 分类：前端知识

2024-08-23splitNumber：坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对’value’和’log’类型的轴有效。根据上面的原因去分析，要想左右的刻度线一致，分隔的段数是必须是一样的，这样才能重合。刻度在显示时，分割段数不一样，导致左右的刻度线不一致，不能重合在一起。interval：强制设置坐标轴分割间隔。从 v5.3.0 开始支持。_echarts双y轴不对齐

https://www.qianduange.cn//article/16693.html 分类：前端知识

2024-08-23文章展示了如何在Vue.js应用中使用echarts库创建一个日历热力图子组件，该组件接收并处理父组件传递的数据，显示日总计和月总计信息，同时支持点击事件以获取选中日期的数据。组件内部实现了数据的初始化、监听更新以及Echarts图表的配置和渲染。

https://www.qianduange.cn//article/16666.html 分类：前端知识

2024-08-235、注意：这里因为在阿里可视化平台下载的json文件运行起来的省份名称是全称（后续如果有好的办法可以解决的话我会更新），所以我使用的是自己新建的json文件。在项目的src目录下新建一个文件夹或者放在你的静态文件目录下，在这里我是新建了一个json文件夹，将下载好的地图json文件放在里面。7、在组件中发请求获取json文件并使用echarts引入地图（相关配置项已注释）。2、进入阿里云数据可视化平台下载（2）或在线获取地图json文件（1）。3、首先介绍下载地图的json文件的使用方法。_阿里云地图

https://www.qianduange.cn//article/16655.html 分类：前端知识

2024-08-22在Echarts的项目实践中，配置折线图的分界线和自定义颜色区分区域是常见需求。通过直接使用代码示例，文章展示了如何设置分界线属性以及在visuaMap中进行颜色配置，对于柱状图，同样可以通过添加itemStyle属性来根据值设定颜色，简化了开发过程。

https://www.qianduange.cn//article/16562.html 分类：前端知识