echarts的按需导入

安装echarts命令

npm install echarts --save

建立一个js，存放echarts的引入，我是在utils中建立的(这js的代码完全复制的这位大佬的：https://blog.csdn.net/weixin_44949068/article/details/130006047)

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
 
/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart } from "echarts/charts";
 
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
 
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
 
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
 
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
]);
 
// 导出
export default echarts;

在main.js中去引入上述的js，让全局都可以使用(路径仅供参考)

import echarts from './utils/echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

注意：如果是全局引入的话，使用的时候就要 echarts换成$echarts，因为官网中是echarts，所以但凡是echarts的都要换成this.$echarts
如：

var myChart = this.$echarts.init(chartDom);

//这只是series的一个节选，主要是为了举例，将echarts换成$echarts
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0128c5" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#022ccc" },
              ]),

如果只是一个地方使用，在该页面引入使用即可

import echarts from '@/utils/echarts';