React 引用echarts图表

React 引用echarts图表 https://echarts.apache.org/

1 终端下载入

npm install echarts --save

2 引入 ECharts

import * as echarts from 'echarts';

3 设计div

<div className='chart' id="chart1"></div>

4 渲染（放在生命周期里，否则提前渲染会找不到dom报错）

 useEffect(() => {
    const Chart1 = echarts.init(document.getElementById("chart1"), {
      renderer: 'svg'
    });
    Chart1.setOption(option);

  }, []);

5 例子

import { useState, useEffect } from 'react'
import * as echarts from 'echarts';

function DivFunc() {
  const option = {
    // title: {
    //   text: 'Stacked Line'
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };
  const option2 = {
    // title: {
    //   text: 'Stacked Line'
    // },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '15%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },

    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  

  useEffect(() => {
    const Chart1 = echarts.init(document.getElementById("chart1"), {
      renderer: 'svg'
    });
    Chart1.setOption(option);

    const Chart2 = echarts.init(document.getElementById("chart2"), {
      renderer: 'svg'
    });
    Chart2.setOption(option2);


  }, []);

  return (
    <div className='overview_body'>
        {/* 竖图 */}
        <div className='box'>
          <div className='chart' id="chart1"></div>
        </div>

        {/* 则线条 */}
        <div className='box'>
          <div className='chart chart_2' id="chart2"></div>
        </div>
    </div>
  )
}

export default DivFunc

534 Views

React 引用echarts图表

linwute

留下评论