react的echart的使用

1）npx create-react-app my-app
cd my-app
npm start

2）npm install echarts --save

import React, { useEffect } from 'react'

import * as echarts from 'echarts'

export default function Index() {

  const initChart = () => {

    let element = document.getElementById('chart1')

    let myChart = echarts.init(element)

    myChart.clear()

    let option

    option = {

      xAxis: {

        type: 'category',

        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

      },

      yAxis: [

        {

          type: 'value',

        },

        {

          type: 'value',

          name: 'SSS',

          min: 0,

          max: 25,

          interval: 5,

          axisLabel: {

            formatter: '{value} °C',

          },

        },

      ],

      series: [

        {

          data: [120, 200, 150, 80, 70, 110, 130, ''],

          type: 'bar',

        },

        {

          name: 'KKSK',

          type: 'line',

          yAxisIndex: 1,

          data: [

            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,

          ],

        },

      ],

    }

    option && myChart.setOption(option)

  }

  const initPinChart = () => {

    let element = document.getElementById('chart2')

    let myChart = echarts.init(element)

    myChart.clear()

    let option

    option = {

      tooltip: {

        trigger: 'item',

      },

      legend: {

        top: '5%',

        left: 'center',

      },

      series: [

        {

          name: 'Access From',

          type: 'pie',

          radius: ['40%', '70%'],

          itemStyle: {

            borderColor: '#fff',

            borderWidth: 2,

          },

          data: [

            { value: 1048, name: 'Search Engine' },

            { value: 735, name: 'Direct' },

            { value: 50, name: 'Email' },

            { value: 484, name: 'Union Ads' },

            { value: 300, name: 'Video Ads' },

          ],

        },

      ],

    }

    option && myChart.setOption(option)

  }

  useEffect(() => {

    initChart()

    initPinChart()

  }, [])

  return (

    <div style={{ display: 'flex' }}>

      <div

        id="chart1"

        style={{

          width: '50%',

          margin: '0 auto',

          height: '600px',

        }}

      ></div>

      <div

        id="chart2"

        style={{

          width: '50%',

          margin: '0 auto',

          height: '600px',

        }}

      ></div>

    </div>

  )

}