快捷導(dǎo)航

Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示

更新時間：2022年11月01日 15:29:01 作者：努力搬磚的石樂樂

我們使用vue做項目的時候,常常需要做到echarts圖表的自適應(yīng),一般是根據(jù)頁面的寬度做對應(yīng)的適應(yīng),下面這篇文章主要給大家介紹了關(guān)于Echarts折線圖如何根據(jù)容器寬度自適應(yīng)展示的相關(guān)資料,需要的朋友可以參考下

需求描述

如上圖所見，在開發(fā)過程中經(jīng)常會遇到容器自適應(yīng)展示的功能，那么如果在需要自適應(yīng)寬高的容器內(nèi)，echarts折線圖要怎么處理呢？

改造前代碼實現(xiàn)流程

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: ["已采納", "已發(fā)布"],
        },
        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: "已發(fā)布",
            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}/>
};

代碼思路

以上的功能實現(xiàn)是基于react 和 react hook，在頁面展示前先獲取dom元素，如果dom成功獲取到以后，為這個dom插入option相關(guān)的配置，那么現(xiàn)在并沒有根據(jù)容器的寬度自適應(yīng)的顯示折線圖，現(xiàn)在是把獲取dom和渲染的方法放在了useEfft中，那么要如何監(jiān)聽自身的容器寬高，并動態(tài)的渲染變化呢？？

處理方案

使用ResizeObserver對象來監(jiān)聽指定Dom元素(div…)的變化(width、height等等)。一般，瀏覽器不支持該監(jiān)聽對象，所以需要引入第三方庫支持-resize-observer-polyfill

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

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

第三步，利用 ResizeObserver 對渲染折線圖的dom進(jìn)行監(jiān)聽，如果監(jiān)聽到渲染折線圖所在的dom元素寬高發(fā)生變化，利用echarts本身提供的resize事件重繪。

第四部，頁面銷毀時，取消所有被ResizeObserver對象監(jiān)聽的節(jié)點

最終代碼

import React, { useRef, useEffect } from 'react';
import ReactDom from 'react-dom';
import * as echarts from 'echarts';
 // 關(guān)鍵代碼
import ResizeObserver from 'resize-observer-polyfill';

const Test = () => {
  const divRef = useRef < HTMLDivElement > (null);
  const chart = useRef < echarts.ECharts > (null);
  // 關(guān)鍵代碼
  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: ["已采納", "已發(fā)布"],
        },
        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: "已發(fā)布",
            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],
          },
        ],
      };
        //關(guān)鍵代碼， 利用observe監(jiān)聽折線圖所在容器的寬度變化（divRef.current），在ResizeObserver回掉函數(shù)中entries返回的內(nèi)容可以獲取的到；最后將獲取到寬度賦值給resize方法進(jìn)行重繪
      myObserver.current = new ResizeObserver((entries) => {
        myChart?.resize(entries[0]?.contentRect.width);
      });
      myObserver.current.observe(divRef.current);
      myChart.setOption(option);
    }
    
    //關(guān)鍵代碼
      return () => {
      if (chart?.current) chart.current.dispose();
      //取消所有被ResizeObserver對象監(jiān)聽的節(jié)點
      myObserver.current?.disconnect();
    };
  }, []);

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