Echarts折线图如何根据容器宽度自适应展示

更新时间：2022年11月01日 15:29:01 作者：努力搬砖的石乐乐

我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应,下面这篇文章主要给大家介绍了关于Echarts折线图如何根据容器宽度自适应展示的相关资料,需要的朋友可以参考下

需求描述

如上图所见，在开发过程中经常会遇到容器自适应展示的功能，那么如果在需要自适应宽高的容器内，echarts折线图要怎么处理呢？

改造前代码实现流程

import React, { useRef, useEffect } from 'react';
import ReactDom from 'react-dom';
import * as echarts from 'echarts';

const Test =  () => {
  const divRef = useRef < HTMLDivElement > (null);
  const chart = useRef < echarts.ECharts > (null);
  const fontColor = "#30eee9";

  useEffect(() => {
    if (!divRef.current) return;
    let myChart = chart.current;
    if (!myChart) {
      chart.current = myChart;
      myChart = echarts.init(divRef.current);
      const option = {
        backgroundColor: "#11183c",
        grid: {
          left: "5%",
          right: "10%",
          top: "20%",
          bottom: "15%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          show: true,
          x: "center",
          y: "35",
          icon: "stack",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#1bb4f6",
          },
          data: ["已采纳", "已发布"],
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: fontColor,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#195384",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 1000,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#2ad1d2",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
              },
            },
          },
        ],
        series: [
          {
            name: "已采纳",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#0092f6",
                lineStyle: {
                  color: "#0092f6",
                  width: 1,
                }
              },
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: "red",
                },
              },
            },
            data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
          },
          {
            name: "已发布",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,

            itemStyle: {
              normal: {
                color: "#00d4c7",
                lineStyle: {
                  color: "#00d4c7",
                  width: 1,
                },
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410],
          },
        ],
      };
  
      option && myChart.setOption(option);
    }
  }, []);

  return  <div style={{ width: '100%', height: 280 }} ref={divRef}/>
};

代码思路

以上的功能实现是基于react 和 react hook，在页面展示前先获取dom元素，如果dom成功获取到以后，为这个dom插入option相关的配置，那么现在并没有根据容器的宽度自适应的显示折线图，现在是把获取dom和渲染的方法放在了useEfft中，那么要如何监听自身的容器宽高，并动态的渲染变化呢？？

处理方案

使用ResizeObserver对象来监听指定Dom元素(div…)的变化(width、height等等)。一般，浏览器不支持该监听对象，所以需要引入第三方库支持-resize-observer-polyfill

第一步，安装 npm install resize-observer-polyfill；

第二步，页面中引入 import ResizeObserver from 'resize-observer-polyfill';

第三步，利用 ResizeObserver 对渲染折线图的dom进行监听，如果监听到渲染折线图所在的dom元素宽高发生变化，利用echarts本身提供的resize事件重绘。

第四部，页面销毁时，取消所有被ResizeObserver对象监听的节点

最终代码

import React, { useRef, useEffect } from 'react';
import ReactDom from 'react-dom';
import * as echarts from 'echarts';
 // 关键代码
import ResizeObserver from 'resize-observer-polyfill';

const Test = () => {
  const divRef = useRef < HTMLDivElement > (null);
  const chart = useRef < echarts.ECharts > (null);
  // 关键代码
  const myObserver = useRef < ResizeObserver > (null);
  const fontColor = "#30eee9";

  useEffect(() => {
    if (!divRef.current) return;
    let myChart = chart.current;
    if (!myChart) {
      chart.current = myChart;
      myChart = echarts.init(divRef.current);
      const option = {
        backgroundColor: "#11183c",
        grid: {
          left: "5%",
          right: "10%",
          top: "20%",
          bottom: "15%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          show: true,
          x: "center",
          y: "35",
          icon: "stack",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#1bb4f6",
          },
          data: ["已采纳", "已发布"],
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: fontColor,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#195384",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 1000,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#2ad1d2",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
              },
            },
          },
        ],
        series: [
          {
            name: "已采纳",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#0092f6",
                lineStyle: {
                  color: "#0092f6",
                  width: 1,
                }
              },
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: "red",
                },
              },
            },
            data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
          },
          {
            name: "已发布",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,

            itemStyle: {
              normal: {
                color: "#00d4c7",
                lineStyle: {
                  color: "#00d4c7",
                  width: 1,
                },
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410],
          },
        ],
      };
        //关键代码， 利用observe监听折线图所在容器的宽度变化（divRef.current），在ResizeObserver回掉函数中entries返回的内容可以获取的到；最后将获取到宽度赋值给resize方法进行重绘
      myObserver.current = new ResizeObserver((entries) => {
        myChart?.resize(entries[0]?.contentRect.width);
      });
      myObserver.current.observe(divRef.current);
      myChart.setOption(option);
    }
    
    //关键代码
      return () => {
      if (chart?.current) chart.current.dispose();
      //取消所有被ResizeObserver对象监听的节点
      myObserver.current?.disconnect();
    };
  }, []);

  return (
    <div className='line' style={{ width: '100%', height: 280 }} ref={divRef} />
  )
};

总结

到此这篇关于Echarts折线图如何根据容器宽度自适应展示的文章就介绍到这了,更多相关Echarts折线图宽度自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

zTree获取当前节点的下一级子节点数实例
下面小编就为大家带来一篇zTree获取当前节点的下一级子节点数实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
微信小程序组件通信和behavior使用详解
behaviors是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”，这篇文章主要介绍了微信小程序组件通信和behavior使用,需要的朋友可以参考下
2022-08-08
利用JavaScript判断浏览器类型及版本
浏览器对于我们来说，可能是最熟悉的工具了。在我们的产品开发过程中，经常要考虑浏览器兼容问题，以适应不同的用户人群，同时也减少因浏览器兼容问题所带来的服务量。所以检测浏览器的版本及类型就是很重要的一件事了，下面来一起看看用Javascript如何实现。
2016-08-08
JavaScript树的深度优先遍历和广度优先遍历算法示例
这篇文章主要介绍了JavaScript树的深度优先遍历和广度优先遍历算法,结合实例形式分析了JavaScript树的深度优先遍历、广度优先遍历递归与非递归相关实现技巧,需要的朋友可以参考下
2018-07-07
JavaScript之cookie技术详解
这篇文章主要为大家详细介绍了JavaScript之cookie技术,运用JS设置cookie、读取cookie、删除cookie ,需要的朋友可以参考下
2016-11-11
js调试系列控制台命令行API使用方法
上次初步介绍了什么是控制台，以及简单的 console.log 输出信息。最后还有两个小问题，我们就当回顾，来看下怎么操作吧
2014-06-06
JavaScript中防抖和节流的区别及适用场景
这篇文章主要介绍了JavaScript中防抖和节流的区别及适用场景，文章通过围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-05-05
JavaScript在图片绘制文字两种方法的实现与对比
这篇文章主要为大家详细介绍了前端实现在图片上绘制文字的两种思路,支持即粘即贴即用,文中的示例代码讲解详细,需要的小伙伴可以了解下
2024-03-03
原生JavaScript写出Tabs标签页的实例代码
这篇文章主要介绍了原生JavaScript写出Tabs标签页的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
arcgis for js栅格图层叠加(Raster Layer)问题
这篇文章主要介绍了arcgis for js栅格图层叠加(Raster Layer)的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-11-11