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]);

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