echarts5在Vue中按需引入

痛定思痛。 2023-01-12 04:14 403阅读 0赞

## 安装 `echarts5.x` ##

npm install echarts --save

## 按需引入 `echarts` 图表和组件 ##

先在项目根路径下新建 `plugin/echartsUI.js` 文件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
    import * as echarts from 'echarts/core';
    // 引入各种图表，图表后缀都为 Chart
    import { 
      BarChart
    } from 'echarts/charts';
    // 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
    import { 
      TitleComponent,
      TooltipComponent,
      GridComponent,
      LegendComponent
      // GeoCoComponent
    } from 'echarts/components';
    // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    import { 
      CanvasRenderer
    } from 'echarts/renderers';
    
    // 注册必须的组件
    echarts.use(
      [TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]
    )
    
    export default echarts

## 修改 `main.js` ##

// 按需引入 echarts 5.x
    import echarts from './plugins/echartsUI'
    
    Vue.prototype.$echarts = echarts

## 测试 ##

initEcharts () { 
      let myEcharts = this.$echarts.init(this.$refs.bar)
      let option = { 
        title: { 
          text: '按需引入'
        },
        tooltip: { 
          trigger: 'axis',
          axisPointer: { 
            type: 'shadow'
          }
        },
        xAxis: { 
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五']
        },
        yAxis: { 
          type: 'value'
        },
        legend: { },
        series: [
          { 
            name: '星期',
            type: 'bar',
            data: [23, 33, 45, 56, 78]
          }
        ]
      }
      myEcharts.setOption(option)
    }

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221119/7d65c7d819064c23ac9cc6922a26df43.png