echarts按需导入

1、安装第三方插件

npm install echarts --save

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;

引入柱状图and折线图图表,要以Chart结尾
在这里插入图片描述
3、把自己创建好的echarts.js文件引入 全局main.js中

// 引入echarts
import echarts from "./echarts/echarts";
 
// 挂载到vue实例中
Vue.prototype.$echarts = echarts
 
调用的时候就是 :  this.$echarts

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

猜你喜欢

转载自blog.csdn.net/weixin_44949068/article/details/130006047
今日推荐