echarts_在项目中引入echarts

echarts官网

echarts官网

在项目引入echarts

[1]下载

npm install echarts

[2-1] 全量引入

import * as echarts from 'echarts';

全量引入指的是引入了echarts的核心模块、全部图表以及图表所能用到的组件。

若是你的项目仅仅是使用1个或少数图表，建议使用按需引入。。。

[2-2]按需引入

• 引入 echarts 核心模块

   import * as echarts from "echarts/lib/echarts";
  

• 按需引入需要的图表及组件，如下(需要使用柱状图以及漏斗图)

    // 引入柱状图以及漏斗图
    import { FunnelChart, BarChart } from 'echarts/charts';
    // 引入组件
    import { GridComponent, TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
    // 注册
    echarts.use([FunnelChart, BarChart,  GridComponent, TitleComponent, TooltipComponent, LegendComponent]);
  

• 配置项渲染dom
  • [1]在react中

    const chartDom = useRef()
    const option = {...}
    const  myChart = echarts.init(chartDom.current)
    myChart.setOption(option)
    

  • [2]在vue中

    const dom = document.querySelector('.chartDom')
    const option = {...}
    const  myChart = echarts.init(dom)
    myChart.setOption(option)
    

    两者只是在获取dom方式上有所不同

问题 - 仅引入核心模块

以echarts官网快速入门案例为例讲解一些如果仅引入核心模块就进行option配置会出现什么问题～

• [1] 引入echarts核心模块

  import * as echarts from "echarts/lib/echarts";
  

• [2] 配置option并渲染dom

  useEffect(async () => {
    const option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    const  myFunnelChart = echarts.init(funnelchartDom.current)
    myFunnelChart.setOption(option)
  },[]);
  

  此时会报错如下
  
  按照上述报错引入所需组件

  import { GridComponent, TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
  echarts.use([ GridComponent, TitleComponent, TooltipComponent, LegendComponent]);
  

  此时不报错了，但是展示的图表如下(并没有达到所需效果)
  
  但是此时也不报错了，此时找错误变得艰难起来，其实就是没有按需引入图表而已， 引入所需图表之后就能正常显示了～

  import { BarChart } from 'echarts/charts';
  import { GridComponent, TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
  echarts.use([ BarChart, GridComponent, TitleComponent, TooltipComponent, LegendComponent]);
  

  
  当然这个问题也很少有人会犯这个错误，只是第一次引入不熟悉流程才有可能～