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、具体例子看后面的文章有写到

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue3 中按导入 ECharts 的 Graphic 模块,可以使用 `echarts/core` 模块提供的 `use()` 方法来按加载所ECharts 模块和组件。 首先,安装 ECharts: ``` npm install echarts --save ``` 然后,在组件中引入要使用的 ECharts 模块和组件,如下所示: ``` <template> <div ref="chart" style="width: 600px; height: 400px;"></div> </template> <script> import { defineComponent, ref, onMounted } from 'vue'; import { use } from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; import { GridComponent, TooltipComponent } from 'echarts/components'; import { LineChart } from 'echarts/charts'; import { RectShape } from 'echarts/graphic'; export default defineComponent({ name: 'MyChart', setup() { const chartRef = ref(null); onMounted(() => { use([CanvasRenderer, GridComponent, TooltipComponent, LineChart, RectShape]); const chart = echarts.init(chartRef.value); // 在这里使用 ECharts 绘制图表 }); return { chartRef, }; }, }); </script> ``` 在 `use()` 方法中传入要使用的 ECharts 模块和组件,然后在 `setup()` 函数中初始化 ECharts 实例,并在实例中使用要的模块和组件。在这个例子中,我们使用了 `CanvasRenderer` 渲染器、`GridComponent` 组件、`TooltipComponent` 组件、`LineChart` 图表和 `RectShape` 图形。 注意,要在 `onMounted()` 钩子函数中初始化 ECharts 实例,因为只有在组件渲染完成后才能访问 DOM 元素。 最后,在模板中添加一个 `div` 元素作为图表的容器,并将其绑定到 `chartRef` 引用变量上。在 ECharts 实例初始化之后,可以在实例中使用 ECharts 绘制图表。 希望这个例子对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值