echarts按需导入_echarts怎么导入数据

1、安装第三方插件

npm install echarts --save
1

2、新建文件echarts.js，将echarts内容填写进来

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

// 引入柱状图and折线图图表，就是图表后面的内容，以Chart结尾（下面放有图片）
import {
  BarChart,
  LineChart,
  PieChart
} from "echarts/charts";

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent,
  LegendComponent
} 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,
  PieChart,
  ToolboxComponent,
  LegendComponent
]);

// 导出
export default echarts;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

引入柱状图and折线图图表，要以Chart结尾

3、把自己创建好的echarts.js文件引入 全局main.js中

// 引入echarts
import echarts from "./echarts/echarts";
 
// 挂载到vue实例中
Vue.prototype.$echarts = echarts
 
调用的时候就是 ：  this.$echarts
1
2
3
4
5
6
7

4、具体例子看后面的文章有写到