echarts 出现的各种问题

最新推荐文章于 2024-02-27 18:06:07 发布

优雅的大白鹅

最新推荐文章于 2024-02-27 18:06:07 发布

阅读量926

点赞数 3

文章标签：数据可视化

本文链接：https://blog.csdn.net/weixin_48186771/article/details/118733449

版权

本文档介绍了Echarts在页面刷新后图表消失的问题及其解决方案，只需移除_echarts_instance_属性即可重新绘制。同时，详细阐述了如何配置双Y轴，包括在yAxis数组中添加两个对象，并在series中指定yAxisIndex。此外，还分享了自定义提示框样式的技巧，如调整颜色、字体和格式化内容。

摘要由CSDN通过智能技术生成

1.图表需要刷新才显示🐱

问题表述：第一次进入页面，图表正常显示。但回到首页之后再次进入此页面，图表不显示且无报错，返回数据也正常，画布也是正常的有绘制？？可是图表没了。需要刷新才会有？？？？

找了一大圈问题，最后发现：
echars在绘制图形的时候会给div添加属性_echarts_instance_，因此只需要将此属性移除并清空div内容即可重新绘制新的echarts图形。
这个解释算懵懂吧（echarts的重绘坑啊）

在这里插入图片描述

解决方案： 添加这个就好了😊

 document.getElementById("twoSpe")?.removeAttribute("_echarts_instance_");

在这里插入图片描述

2.双y轴显示🐖

2.1 y轴有几个写几个（我有俩就再yAxis数组里面配置两个对象）

 yAxis: [
        {
          //y轴字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: "#FFF",
              fontSize: "12",
            },
            formatter: (_val: number) => {
              return this.unit ? _val + this.unit : _val;
            },
          },
          //极值预留空白
          boundaryGap: ["0%", "30%"],
          type: "value",
          name: this.yNames[0],
          nameTextStyle: {
            color: "#5EC5EF",
            fontWeight: 600,
            fontSize: 14,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#7ECEF4"],
              type: "solid",
              opacity: 0.5,
            },
          },
        },
        {
          //y轴字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: "#FFF",
              fontSize: "12",
            },
            formatter: (_val: number) => {
              return this.unit ? _val + this.unit : _val;
            },
          },
          //极值预留空白
          boundaryGap: ["0%", "30%"],
          type: "value",
          name: this.yNames[1],
          nameTextStyle: {
            color: ["#7ECEF4"],
            fontWeight: 600,
            fontSize: 14,
          },
          splitLine: {
            show: false,
          },
        },
      ],

2.2 需要再series里面配置 yAxisIndex：i，否则就没办法正常显示俩个y轴

yAxisIndex: i,  //设置该数据需要绑定的Y轴，不添加的话所有数据都只匹配左侧Y轴

3.提示框样式更改🐬

 // 提示框样式
      tooltip: {
        //提示框组件
        show: true,
        trigger: "axis", //触发类型
        triggerOn: "mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。
        showContent: true, //是否显示提示框浮层
        hideDelay: 100, //浮层隐藏的延迟，单位为 ms
        enterable: false, //鼠标是否可进入提示框浮层中
        confine: false, //是否将 tooltip 框限制在图表的区域内
        transitionDuration: 0, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
        backgroundColor: "rgba(18,56,135,.7)", //标题背景色
        borderColor: "#3AA0C6", //边框颜色
        borderWidth: 1, //边框线宽
        padding: 5,
        textStyle: {
          color: "#fff",
          align: "left",
        },
        formatter:this.comId=='energyLine1'? formatter1: formatter2,
        //这个有需要更改再去写，而且里面是支持html的标签的写法的。随意更改。但是数据复杂的处理起来会很麻烦的，而且，你如果还数据显示是有的不是来自于传递进来的data（data: seriesData[i],）里的，那么图里切换的时候，是会出问题的哦。
        
      },