Vue Echarts 怎样按需引用

前提: 我使用的版本是 5.x

 "echarts": "^5.3.2"

1.安装

npm install echarts@5  --save 

2.全局引入
全局引入方式非常简单,可以直接在main.js里配置

//用import引入echarts
import echarts from 'echarts'
//绑定在vue的原型链上
Vue.prototype.$echarts = echarts; 

3.按需引用
由于按需引用js代码比较多,所以做好单独做一个js文件:

我是在 src/plugins/echart.js

 import Vue from 'vue'

// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
Vue.prototype.$echarts = echarts;

// 引入柱状图图表,图表后缀都为 Chart
import { BarChart,PieChart} from 'echarts/charts';
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  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,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
]);

如果后续新增不同的charts ,只需要修改以下代码

(1) 加上引用,比如添加 LineCharts

import { BarChart,PieChart,LineChart} from 'echarts/charts';

(2)注册组件

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
]);

那么怎么知道引用的chart名称呢?

找到: node_modules/echarts/lib/export/charts.js

export { install as LineChart } from '../chart/line/install.js';
export { install as BarChart } from '../chart/bar/install.js';
export { install as PieChart } from '../chart/pie/install.js';
export { install as ScatterChart } from '../chart/scatter/install.js';
export { install as RadarChart } from '../chart/radar/install.js';
export { install as MapChart } from '../chart/map/install.js';
export { install as TreeChart } from '../chart/tree/install.js';
export { install as TreemapChart } from '../chart/treemap/install.js';
export { install as GraphChart } from '../chart/graph/install.js';
export { install as GaugeChart } from '../chart/gauge/install.js';
export { install as FunnelChart } from '../chart/funnel/install.js';
export { install as ParallelChart } from '../chart/parallel/install.js';
export { install as SankeyChart } from '../chart/sankey/install.js';
export { install as BoxplotChart } from '../chart/boxplot/install.js';
export { install as CandlestickChart } from '../chart/candlestick/install.js';
export { install as EffectScatterChart } from '../chart/effectScatter/install.js';
export { install as LinesChart } from '../chart/lines/install.js';
export { install as HeatmapChart } from '../chart/heatmap/install.js';
export { install as PictorialBarChart } from '../chart/bar/installPictorialBar.js';
export { install as ThemeRiverChart } from '../chart/themeRiver/install.js';
export { install as SunburstChart } from '../chart/sunburst/install.js';
export { install as CustomChart } from '../chart/custom/install.js';

4.使用
let myChart = this. e c h a r t s . i n i t ( t h i s . echarts.init(this. echarts.init(this.main);
这里我们使用ref .

被用来给元素或子组件注册引用信息(id的替代者)。

  • 应用在html标签上获取的是真实DOM元素,应用在组件标签上获取的是组件实例对象VC
  • 使用方式
    • 打标识:

      或 想当于 id=“xxx”
    • 获取: this.$refs.xxx或 document.getElementById(“xxx”)
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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
发出的红包

打赏作者

半夏_2021

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值