在项目中引入 Apache ECharts

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情

安装

首先先安装 这里是使用了yarn 安装，使用npm也是一样。 提示node版本不对，node版本更新到18了，干啥啥不行， 使用 nvm use 16 切换到了16版本

yarn add echarts

安装成功后，直接在函数组件中使用React.createRef创建一个ref对象,直接将这个ref绑定到一个口的dom上面，这dom就是echarts的载体。图就会渲染到这个上面，所以要明显的给这个dom一个宽和高。不然就啥也画不出来了。

直接复制一个初始化的参数，重点是要将init里的参数换成chatRef.current

  const chartRef = React.createRef()
  const chartInit = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chartRef.current)
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    })

封装一个Bar 吧

上面已经会基本的使用了，如果没有定制的要求，简单封装一下子啊，在components目录下新建一个Bar.jsx,将上面组件全部剪切过去，然后名字改成Bar.然后这个Bar组件接收四个属性。一个是title ,一个时xData.一个是series,一个是style 一个理念，就是把你项目里两个图不同的东西都抽离出去，相同的都在里面写死。当前也根据情况，明显可以为动态的就设置成动态的，方便后期扩展，

export default function Bar({ title, xData = [], series = {}, style }) {
  const chartRef = React.createRef()
  const chartInit = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chartRef.current)
    // 绘制图表
    myChart.setOption({
      title: {
        text: title,
      },
      tooltip: {},
      xAxis: {
        data: xData,
      },
      yAxis: {},
      series,
    })
  }
  useEffect(chartInit, [])
  return (
    <div>
      <div ref={chartRef} className="charts-box" style={style}></div>
    </div>
  )
}

然后在home组件中导入并使用

import Bar from '@/components/Bar'
export default function Home () {

  return (<div>
    <Bar title={'啥也不是'} xData={['react', 'vue', 'angular']} series={{
      name: '吐槽',
      type: 'bar',
      data: [6, 30, 90],
    }} style={{ width: "300px", height: "400px" }}></Bar>
    <Bar title={'是啥也不'} xData={['react', 'vue', 'angular']} series={
      {
        name: '销量',
        type: 'bar',
        data: [6, 30, 90],
      }
    } style={{ width: "800px", height: "400px" }}></Bar>
  </div>)