使用echarts遇到的问题总结记录

这篇博客总结了在使用Echarts过程中遇到的问题,包括安装包时的困扰,如何自定义图例图标,以及解决数据滑动加载时的鼠标拖拽报错问题。在图例配置上,通过调整图片引入方式成功实现自定义图标。在数据滑动加载功能中,通过调整datazoom配置解决了鼠标滚轮触发的错误。
摘要由CSDN通过智能技术生成

关于echarts使用的问题

1.关于安装echarts包遇到的问题(点击移动)
2. 关于echarts的自定义图例设置:
这个是我们ui的设计稿在这里插入图片描述
图例需要我们自定义的图标,按照官方文档的方式配置在这里插入图片描述
这样的图标配置,页面显示不出来在这里插入图片描述
不报错,就表示官方文档提供的配置是没有问题的,问题出在图片引入。换一种方式:在这里插入图片描述
在这里插入图片描述
用这样的方式引入,就OK了:
在这里插入图片描述

3.需求:数据滑动加载展示
根据官方文档介绍的datazoom配置,可以设置图表滑动,显示数据条数也是可以配置的;只要滑动加载用官方提供的api,可自行查看官方文档:echarts官网(我的代码会放后面)
问题:我在按照官网的方式去配置datazoom时,鼠标拖拽滑动会报错:在这里插入图片描述
一直提示我这个错误,无法阻挡默认事件。搞了好久,首先:
在这里插入图片描述
这个配置项改为false,鼠标滚轮不能平移;之后再配置:在这里插入图片描述
改为false,鼠标滚轮不能缩放。

至此,错误解决;关于这个错误,我看了好多别人的echarts实例配置,跟我一样的配,都没有这个问题,有知道的欢迎讨论,分享下我的代码的,先用的测试数据,还未封装,下一步就是封装了

<template>
  <div id="chart" ref="chart_Bbox" style="height: 1000px">
    <el-row :gutter="20">
      <el-col :span="8">
        <img
          class="top_img_left"
          src="@/assets/charts/left_top_decorate.png"
          alt=""
        />
        <div class="box_chart">
          <div style="width: 332px; height: 153px" ref="chart"></div>
          <img src="@/assets/charts/charts_title_decorate.png" alt="" />
    
          <el-select
            v-model="value"
           
引用\[1\]:最近在使用echars,遇到一些棘手的问题,官方文档也没找到解决答案,搜索了很多文档,很难找到,经过一下午的时间,终于找到了解法,记录下来,如果你也遇到类似情况,希望能再第一时间帮到你。引用\[2\]:如何让方形icon在第一行展示,需要特殊处理,直接上代码:引用\[3\]:2011和2022是多行的时候,如何让图标和第一行平行展示,而不是在多行的居中展示,无特殊处理的情况下,展示如图: 问题: echarts有什么难点? 回答: 在使用echarts时,可能会遇到一些难点。其中一个难点是在legend中让图标在多行中居上。为了实现这个效果,需要进行特殊处理,可以通过设置formatter属性和使用换行符来实现。另一个难点是在横向柱状图中禁止默认的根据数量排序。可以通过设置yAxis的inverse属性为true来实现。还有一个难点是在多行的情况下,让图标和第一行平行展示而不是居中展示。可以通过设置formatter属性并使用换行符来实现。这些难点可能需要花费一些时间和经验来解决,但通过仔细研究官方文档和搜索相关文档,最终可以找到解决方案。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [Echars 使用过程中遇到的难点总结](https://blog.csdn.net/fexiaoyujie/article/details/125521680)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值