• 日期: 2026-11-25
  • 标签: 科技

  1. 安装echarts：在项目根目录下执行以下命令。

    npm install echarts --save

  2. 在组件中引入echarts和相应的样式。

    import React, { Component } from 'react';
import echarts from 'echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import 'echarts/lib/component/markArea';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/component/axisPointer';
import 'echarts/lib/component/polar';
import 'echarts/lib/component/geo';
import 'echarts/lib/component/parallel';
import 'echarts/lib/component/singleAxis';
import 'echarts/lib/component/brush';
import 'echarts/lib/component/calendar';
import 'echarts/lib/component/graphic';
import 'echarts/lib/component/dataset';
import 'echarts/lib/component/calendar';
import 'echarts/lib/component/visualMapContinuous';
import 'echarts/lib/component/visualMapPiecewise';
import 'echarts/lib/component/tooltip/TooltipModel';
import 'echarts/lib/component/tooltip/TooltipView';
import 'echarts/lib/component/tooltip/TooltipContent';
import 'echarts/lib/component/tooltip/TooltipComponent';
import 'echarts/lib/component/legend/LegendModel';
import 'echarts/lib/component/legend/LegendView';
import 'echarts/lib/component/legend/LegendDraw';
import 'echarts/lib/component/legend/legendAction';
import 'echarts/lib/component/legend/legendFilter';
import 'echarts/lib/component/tooltip/tooltipTrigger';
import 'echarts/lib/component/tooltip/tooltipMarkup';
import 'echarts/lib/component/tooltip/tooltipFormatter';
import 'echarts/lib/component/axis/AxisModel';
import 'echarts/lib/component/axis/axisModelCreator';
import 'echarts/lib/component/axis/AxisView';
import 'echarts/lib/component/axis/axisBuilder';
import 'echarts/lib/component/axis/parallelAxisAction';
import 'echarts/lib/component/axis/parallelAxisCommon';
import 'echarts/lib/component/axis/parallelAxisHelper';
import 'echarts/lib/component/axis/parallelAxis';
import 'echarts/lib/component/axis/SingleAxisView';
import 'echarts/lib/component/axis/AxisBuilder';
import 'echarts/lib/component/axis/AxisView';
import 'echarts/lib/component/axis/axisPointerModelBuilder';
import 'echarts/lib/component/axis/AxisModel';
import 'echarts/lib/component/axis/AxisView';
import 'echarts/lib/component/axis/axisTrigger';
import 'echarts/lib/component/axis/CategoryAxisView';
import 'echarts/lib/component/axis/ValueAxisView';
import 'echarts/lib/component/axis/LogAxisView';
import 'echarts/lib/component/axis/TimeAxisView';
import 'echarts/lib/component/axis/TimeAxisModel';
import 'echarts/lib/component/axis/TimeAxis';
import 'echarts/lib/component/axis/axisLabelInterval';
import 'echarts/lib/component/axis/axisLabel';
import 'echarts/lib/component/axis/axisPointer';
import 'echarts/lib/component/axis/axisPointerViewHelper';
import 'echarts/lib/component/axis/axisPointerModelBuilder';
import 'echarts/lib/component/axis/axisPointerView';
import 'echarts/lib/component/axis/axisPointerTrigger';
import 'echarts/lib/component/axis/axisPointerCommon';
import 'echarts/lib/component/axis/axisPointerCartesian';
import 'echarts/lib/component/axis/axisPointerPolar';
import 'echarts/lib/component/axis/axisPointerRadiusAxis';
import 'echarts/lib/component/axis/axisPointerAngleAxis';
import 'echarts/lib/component/axisPointer/AxisPointerModel';
import 'echarts/lib/component/axisPointer/AxisPointerView';
import 'echarts/lib/component/axisPointer/axisPointerAction';
import 'echarts/lib/component/axisPointer/axisPointer';
import 'echarts/lib/component/axisPointer/axisPointerCtor';

import 'echarts/lib/component/grid/Simple';
import 'echarts/lib/component/grid/GridModel';
import 'echarts/lib/component/grid/GridView';

import 'echarts/lib/component/toolbox/ToolboxModel';
import 'echarts/lib/component/toolbox/ToolboxView';
import 'echarts/lib/component/toolbox/toolboxAction';
import 'echarts/lib/component/toolbox/featureManager';
import 'echarts/lib/component/toolbox/feature/SaveAsImage';
import 'echarts/lib/component/toolbox/feature/DataView';
import 'echarts/lib/component/toolbox/feature/DataZoom';
import 'echarts/lib/component/toolbox/feature/MagicType';
import 'echarts/lib/component/toolbox/feature/Restore';
import 'echarts/lib/component/toolbox/feature/Brush';
import 'echarts/lib/component/toolbox/feature/Feature';

import 'echarts/lib/component/dataZoom/DataZoomModel';
import 'echarts/lib/component/dataZoom/DataZoomView';
import 'echarts/lib/component/dataZoom/InsideZoomModel';
import 'echarts/lib/component/dataZoom/InsideZoomView';
import 'echarts/lib/component/dataZoom/SliderZoomModel';
import 'echarts/lib/component/dataZoom/SliderZoomView';
import 'echarts/lib/component/dataZoom/dataZoomProcessor';
import 'echarts/lib/component/dataZoom/dataZoomAction';

import 'echarts/lib/component/markPoint/MarkPointModel';
import 'echarts/lib/component/markPoint/MarkPointView';
import 'echarts/lib/component/markPoint/MarkPointAction';
import 'echarts/lib/component/markPoint/MarkPointDraw';
import 'echarts/lib/component/markPoint/MarkPointView';

import 'echarts/lib/component/markLine/MarkLineModel';
import 'echarts/lib/component/markLine/MarkLineView';
import 'echarts/lib/component/markLine/MarkLineAction';
import 'echarts/lib/component/markLine/MarkLineDraw';

import 'echarts/lib/component/markArea/MarkAreaView';
import 'echarts/lib/component/markArea/MarkAreaModel';
import 'echarts/lib/component/markArea/MarkAreaView';
import 'echarts/lib/component/markArea/MarkAreaDraw';

import 'echarts/lib/component/visualMap/VisualMapModel';
import 'echarts/lib/component/visualMap/VisualMapView';
import 'echarts/lib/component/visualMap/visualEncoding';
import 'echarts/lib/component/visualMap/visualMapAction';
import 'echarts/lib/component/visualMap/visualMapHelper';

import 'echarts/lib/component/axisPointer/AxisPointerModel';
import 'echarts/lib/component/axisPointer/AxisPointerView';

import 'echarts/lib/component/polar/PolarModel';
import 'echarts/lib/component/polar/PolarView';
import 'echarts/lib/component/polar/polarCreator';
import 'echarts/lib/component/polar/RadiusAxisView';
import 'echarts/lib/component/polar/AngleAxisView';

import 'echarts/lib/component/calendar/CalendarModel';
import 'echarts/lib/component/calendar/CalendarView';
import 'echarts/lib/component/calendar/calendarVisual';
import 'echarts/lib/component/calendar/calendarModelMixin';

import 'echarts/lib/component/brush/BrushModel';
import 'echarts/lib/component/brush/BrushView';
import 'echarts/lib/component/brush/brushAction';
import 'echarts/lib/component/brush/brushSelector';
import 'echarts/lib/component/brush/BrushController';
import 'echarts/lib/component/brush/BrushModelBuilder';
import 'echarts/lib/component/brush/brushSymbolCreator';
import 'echarts/lib/component/brush/brushCoverCreator';
import 'echarts/lib/component/brush/brushVisual';
import 'echarts/lib/component/brush/brushHelper';

import 'echarts/lib/component/graphic/GraphicModel';
import 'echarts/lib/component/graphic/GraphicView';
import 'echarts/lib/component/graphic/install';
import 'echarts/lib/component/graphic/patch';
import 'echarts/lib/component/graphic/Graphic';

import 'echarts/lib/component/dataset/SeriesDataset';
import 'echarts/lib/component/dataset/Source';
import 'echarts/lib/component/dataset/datasetModel';
import 'echarts/lib/component/dataset/datasetView';

import 'echarts/lib/component/parallel/ParallelModel';
import 'echarts/lib/component/parallel/ParallelView';
import 'echarts/lib/component/parallel/parallelCreator';
import 'echarts/lib/component/parallel/AxisParallel';
import 'echarts/lib/component/parallel/AxisParallelModel';
import 'echarts/lib/component/parallel/AxisParallelView';
import 'echarts/lib/component/parallel/Parallel';
import 'echarts/lib/component/parallel/parallelVisual';
import 'echarts/lib/component/parallel/parallelLayout';
import 'echarts/lib/component/parallel/parallelPreprocessor';

import 'echarts/lib/component/geo/GeoModel';
import 'echarts/lib/component/geo/GeoView';
import 'echarts/lib/component/geo/geoCreator';
import 'echarts/lib/component/geo/geoSourceManager';
import 'echarts/lib/component/geo/geoTypes';

import 'echarts/lib/component/singleAxis/SingleAxisModel';
import 'echarts/lib/component/singleAxis/SingleAxisView';
import 'echarts/lib/component/singleAxis/singleAxisCreator';

import 'echarts/lib/component/legend/legendFilter';
import 'echarts/lib/component/legend/legendAction';
import 'echarts/lib/component/legend/LegendModel';
import 'echarts/lib/component/legend/LegendView';
import 'echarts/lib/component/legend/legendVisual';
import 'echarts/lib/component/legend/legendHelper';
import 'echarts/lib/component/legend/install';

import 'echarts/lib/component/visualMapContinuous/install';
import 'echarts/lib/component/visualMapPiecewise/install';

import 'echarts/lib/component/tooltip/install';
import 'echarts/lib/component/title/install';
import 'echarts/lib/component/grid/install';
import 'echarts/lib/component/toolbox/install';
import 'echarts/lib/component/dataZoom/install';
import 'echarts/lib/component/markPoint/install';
import 'echarts/lib/component/markLine/install';
import 'echarts/lib/component/markArea/install';
import 'echarts/lib/component/visualMap/install';
import 'echarts/lib/component/axisPointer/install';
import 'echarts/lib/component/polar/install';
import 'echarts/lib/component/geo/install';
import 'echarts/lib/component/parallel/install';
import 'echarts/lib/component/singleAxis/install';
import 'echarts/lib/component/brush/install';
import 'echarts/lib/component/calendar/install';
import 'echarts/lib/component/graphic/install';
import 'echarts/lib/component/dataset/install';
import 'echarts/lib/component/legend/install';

import 'echarts/lib/component/tooltip/TooltipModel';
import 'echarts/lib/component/tooltip/TooltipView';
import 'echarts/lib/component/tooltip/TooltipContent';
import 'echarts/lib/component/tooltip/TooltipComponent';
import 'echarts/lib/component/tooltip/tooltipTrigger';
import 'echarts/lib/component/tooltip/tooltipMarkup';
import 'echarts/lib/component/tooltip/tooltipFormatter';

import 'echarts/lib/component/title/TitleModel';
import 'echarts/lib/component/title/TitleView';
import 'echarts/lib/component/title/install';

import 'echarts/lib/component/grid/Simple';
import 'echarts/lib/component/grid/GridModel';
import 'echarts/lib/component/grid/Grid';
import 'echarts/lib/component/grid/install';

import 'echarts/lib/component/toolbox/ToolboxModel';
import 'echarts/lib/component/toolbox/ToolboxView';
import 'echarts/lib/component/toolbox/toolboxAction';
import 'echarts/lib/component/toolbox/featureManager';

import 'echarts/lib/component/dataZoom/DataZoomModel';
import 'echarts/lib/component/dataZoom/DataZoomView';
import 'echarts/lib/component/dataZoom/InsideZoomModel';
import 'echarts/lib/component/dataZoom/InsideZoomView';
import 'echarts/lib/component/dataZoom/SliderZoomModel';
import 'echarts/lib/component/dataZoom/SliderZoomView';
import 'echarts/lib/component/dataZoom/dataZoomProcessor';
import 'echarts/lib/component/dataZoom/dataZoomAction';

import 'echarts/lib/component/markPoint/MarkPointModel';
import 'echarts/lib/component/markPoint/MarkPointView';
import 'echarts/lib/component/markPoint/MarkPointAction';
import 'echarts/lib/component/markPoint/MarkPointDraw';
import 'echarts/lib/component/markPoint/MarkPointView';

import 'echarts/lib/component/markLine/MarkLineModel';
import 'echarts/lib/component/markLine/MarkLineView';
import 'echarts/lib/component/markLine/MarkLineAction';
import 'echarts/lib/component/markLine/MarkLineDraw';

import 'echarts/lib/component/markArea/MarkAreaView';
import 'echarts/lib/component/markArea/MarkAreaModel';
import 'echarts/lib/component/markArea/MarkAreaView';
import 'echarts/lib/component/markArea/MarkAreaDraw';

import 'echarts/lib/component/visualMap/VisualMapModel';
import 'echarts/lib/component/visualMap/VisualMapView';
import 'echarts/lib/component/visualMap/visualEncoding';
import 'echarts/lib/component/visualMap/visualMapAction';
import 'echarts/lib/component/visualMap/visualMapHelper';

import 'echarts/lib/component/axisPointer/AxisPointerModel';
import 'echarts/lib/component/axisPointer/AxisPointerView';

import 'echarts/lib/component/polar/PolarModel';
import 'echarts/lib/component/polar/PolarView';
import 'echarts/lib/component/polar/polarCreator';
import 'echarts/lib/component/polar/RadiusAxisView';
import 'echarts/lib/component/polar/AngleAxisView';

import 'echarts/lib/component/calendar/CalendarModel';
import 'echarts/lib/component/calendar/CalendarView';
import 'echarts/lib/component/calendar/calendarVisual';
import 'echarts/lib/component/calendar/calendarModelMixin';

import 'echarts/lib/component/brush/BrushModel';
import 'echarts/lib/component/brush/BrushView';
import 'echarts/lib/component/brush/brushAction';
import 'echarts/lib/component/brush/brushSelector';
import 'echarts/lib/component/brush/BrushController';
import 'echarts/lib/component/brush/BrushModelBuilder';
import 'echarts/lib/component/brush/brushSymbolCreator';
import 'echarts/lib/component/brush/brushCoverCreator';
import 'echarts/lib/component/brush/brushVisual';
import 'echarts/lib/component/brush/brushHelper';

import 'echarts/lib/component/graphic/GraphicModel';
import 'echarts/lib/component/graphic/GraphicView';
import 'echarts/lib/component/graphic/install';
import 'echarts/lib/component/graphic/patch';
import 'echarts/lib/component/graphic/Graphic';

import 'echarts/lib/component/dataset/SeriesDataset';
import 'echarts/lib/component/dataset/Source';
import 'echarts/lib/component/dataset/datasetModel';
import 'echarts/lib/component/dataset/datasetView';

import 'echarts/lib/component/parallel/ParallelModel';
import 'echarts/lib/component/parallel/ParallelView';
import 'echarts/lib/component/parallel/parallelCreator';
import 'echarts/lib/component/parallel/AxisParallel';
import 'echarts/lib/component/parallel/AxisParallelModel';
import 'echarts/lib/component/parallel/AxisParallelView';
import 'echarts/lib/component/parallel/Parallel';
import 'echarts/lib/component/parallel/parallelVisual';
import 'echarts/lib/component/parallel/parallelLayout';
import 'echarts/lib/component/parallel/parallelPreprocessor';

import 'echarts/lib/component/geo/GeoModel';
import 'echarts/lib/component/geo/GeoView';
import 'echarts/lib/component/geo/geoCreator';
import 'echarts/lib/component/geo/geoSourceManager';
import 'echarts/lib/component/geo/geoTypes';

import 'echarts/lib/component/singleAxis/SingleAxisModel';
import 'echarts/lib/component/singleAxis/SingleAxisView';
import 'echarts/lib/component/singleAxis/singleAxisCreator';

import 'echarts/lib/component/legend/legendFilter';
import 'echarts/lib/component/legend/legendAction';
import 'echarts/lib/component/legend/LegendModel';
import 'echarts/lib/component/legend/LegendView';
import 'echarts/lib/component/legend/legendVisual';
import 'echarts/lib/component/legend/legendHelper';
import 'echarts/lib/component/legend/install';
import 'echarts/lib/component/visualMap/install';

  3. 在render函数中渲染一个div，用于放置echarts图表。

    render() {
  return (
    <div id="lineChart" style={{ width: '100%', height: '500px' }}></div>
  );
}

  4. 在componentDidMount函数中初始化echarts图表。

    componentDidMount() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('lineChart'));

  // 定义图表的配置项和数据
  const option = {
    title: {
      text: '折线图示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20, 30]
    }]
  };

  // 使用刚指定的
在React的应用中使用echarts画一个折线图

原文地址: https://www.cveoy.top/t/topic/bdsY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录