首页 前端知识 echarts问题汇总

echarts问题汇总

2024-09-03 02:09:12 前端知识 前端哥 898 652 我要收藏

因为工作中经常使用echarts,做数据可视化相关需求,需要实现各种各样图表的需求。

有遇到过很多问题,一些网上不太好搜索到解决方案的,一直想总结一下解决过程。方便自己查阅,也方便别人参考。

一:echarts折线图变形

因为设计图要求折线图渲染一个月30天的数据,但是默认只展示8个点,剩下的数据如果想看到需要拉伸dataZoom来缩放。于是我在初始化时用Js设置了dataZoom的开始和结束位置。

测试时就出现了如上折线变形或折线渲染不全的问题,一时不知从何下手。后来查到在datazoom属性中添加过滤器设置即可

filterMode: 'empty'

二:echarts dataZoom与X轴联动

还是如上需求,折线图需要展示30天数据,初始化时展示8天的数据。随着dataZoom拉伸,x轴上需要展示的时间文本越来越多。这时如果不设置每个文本间的距离,就会出现文本重叠的问题。并且随着展示的天数越来越多,每两个文本间间隔的距离也要越来越大,才不至于拥挤。于是就需要如下的联动逻辑

需要注意的是,对dataZoom的监听,要放在ajax获取到数据后。在dataZoom的监听回调函数中,可以知道dataZoom的起始/终止位置,根据位置不同设置不同的间隔(interval)。修改完interval后,拿着已有的数据再次渲染折线图即可。

三:设置镂空的渐变背景色

只在y轴两边设置渐变背景色

如上效果需要给x轴分割区域的第一个和最后一个,设置起始和终止位置相反的渐变背景色。

其中背景用rgba的色值类型,渐变色的起点透明度为100%,重点还是同一个颜色但是透明度为0。图中渐变色整体宽度并不大,所以起点为0,终点并不是1,而是0.15,只占每个x轴分割区域整体宽度的15%;

关于背景色的渐变效果,需要用到echarts的函数graphic,传入渐变的起始终止方向已经颜色,宽度等;

xAxis: {
          splitArea: { 
              show: true, 
              areaStyle: { 
                color: [
                  new echarts.graphic.LinearGradient(0, 0, 1, 0,[
                    {offset: 0,color: 'rgba(24,52,90,1)'}, 
                    {offset: 0.15,color: 'rgba(24,52,90,0)'}
                  ]),
                  "",
                  "","",
                  new echarts.graphic.LinearGradient(1, 0, 0, 0,[
                    {offset: 0,color: 'rgba(24,52,90,1)'}, 
                    {offset: 0.15,color: 'rgba(24,52,90,0)'}
                  ]),
                ]
              }
          }
        }
}

四:xAxis报错

在vue中使用echarts的折线图时,js报错信息如下

log.js?edae:62 [ECharts] Component xAxis is used but not imported.
import { GridComponent } from 'echarts/components';
echarts.use([GridComponent]);

弹框中提示

xAxis "0" not found

全网搜索基本没有查不到原因,我自己也感觉匪夷所思。xAxis只是个配置的属性,module依赖里也看了没有这个组件。查了好久,引入grid组件就不再报错了

require("echarts/lib/component/grid");

至今不知为啥报错,请了解的亲帮忙指点下

 五:图例细节

问题1、折线图例圆圈内填充色

legend配合series中symbol一起设置

问题2、图形右侧间距调整

grid: {
          top: "20%",
          right: "2%",
          left: "8%",
          bottom: "10%",
        },

六:下拉框联动折线图

需求:

3个下拉框,第1个联动第2个和第3个。echarts根据3个下拉框刷新

思路:

3个下拉框声明3个变量,并将3个分别放在watch属性里。

第1个的watch中放请求第2、3下拉选项的方法,和请求折线图的方法。

第2、3的watch中放请求折线图接口的方法。

mouted时,请求第1个下拉框的接口,并默认选中第一项。此时watch会加载第二三个下拉框。第2、3个watch会自动加载折线图。

初始化后,随便点击选中那个select都会刷新折线图

七:地图组件异常

我在使用地图组件时,渲染出了canvas但是该区域空白。想了很久,原来是canvas版本太低不支持。升级了版本才生效

 

PS:实例

我的个人网站里,自己写的访问数据统计相关功能;里面用到了几种echarts场景。代码开源,分享给大家。

页面:echarts实例

源码:gitHub地址

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17587.html
标签
数据分析
评论
发布的文章

关于HTML的知识

2024-09-18 23:09:36

js简单实现轮播图效果

2024-09-18 23:09:36

CSS3美化网页元素

2024-09-18 23:09:27

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!