Vue3.0 echart的引入与使用

最新推荐文章于 2024-07-05 10:34:38 发布
最新推荐文章于 2024-07-05 10:34:38 发布
阅读量7k 收藏 15
点赞数 3
分类专栏： vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39279706/article/details/112245678
版权
本文档详细介绍了如何在 Vue3.0 项目中解决 ECharts 图表不显示的问题，以及如何正确引用 ECharts 库。通过 composition-api 的使用，讲解了在 Vue3 中如何初始化 ECharts 图表，包括 js 和 html 部分的代码实现，确保图表能够正常显示。
摘要由CSDN通过智能技术生成

本博文解决的问题

  • 引用echarts时，图表不显示，且控制台报错‘Cannot read property ‘init’ of undefined’
  • echarts在vue3中的使用

composition-api 移步

点此访问 composition-api

echarts安装

npm install echarts --save

js部分

echarts 5.0版本接口更新后，echarts 引入方式
由import echarts from ‘echarts’ 变更为 import * as echarts from ‘echarts’，
如不按此引用，图表不会显示，且控制台会报 ‘Cannot read property ‘init’ of undefined’

此处参考原博文地址 https://blog.csdn.net/qq_41636947/article/details/110879791

import * as echarts from 'echarts';

1.定义一个函数echartInit()，用于初始化图表，并指定图表的配置项和数据

setup(){
   
	const echartInit = () =>{
   
       	var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
   
	        title: {
   
	            text: 'ECharts 入门示例'
	        },
	        tooltip: {
   },
	        legend: {
   
	            data:[&
最低0.47元/天 解锁文章
ZJEEMO
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
在vue3 中使用echarts
web18224617243的博客
03-06 5010
在SetUp中使用echarts 在setup中可以直接引入文件 import { onMounted } from "vue"; import * as echarts from 'echarts' export default { name: "data_page", setup() { onMounted(() => {//需要获取到element,所以是onMounted的Hook let myChart = echarts.init(document.getEle
vue3.0+typescript集成jquery、bootstrap、jquery.dataTable插件、echart
10-31
vue3.0+typescript通过npm管理包，然后导入ts中进行集成jquery、bootstrap、jquery.dataTable插件、echart，具体界面请看：https://blog.csdn.net/sunxiaoju/article/details/109401288
vue3引入echarts
泪的结晶的博客
10-17 556
vue3引入echarts
vue3.0 使用echart
qq_26880461的博客
04-22 694
1：你可以使用如下命令通过 npm 安装 ECharts npm install echarts --save 2：引入 ECharts import * as echarts from ‘echarts’; 3：封装简单的chart 组件 <template> <div class="card-chart"> <div class="title"> <slot name="title"></slot> </d
Vue 3 中集成 ECharts(附一些案例)
jieyucx的博客
07-05 4332
在现代Web开发中，Vue 3以其卓越的性能和灵活的Composition API赢得了广泛的关注。而ECharts，作为开源的一个使用JavaScript实现的强大可视化库，以其丰富的图表类型和高度可定制性成为了数据可视化的首选工具之一。今天，我们将结合Vue 3的语法糖和ECharts，来详细探讨如何在Vue 3项目中集成ECharts，并不仅仅局限于折线图，而是展示一个通用的集成方法。
vue3关于Echarts的简单使用及配置
weixin_62918410的博客
03-10 6216
ECharts是一个使用 JavaScript 实现的开源，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
vue3中怎么引入Echarts
qwe0415的博客
04-24 1278
vue3中是用Echarts
vue中echarts3.0自适应的方法
01-19
前端时间做一个vue的项目，echart是按需引入的如下： // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts' // 引入折线图 import 'echarts/lib/chart/line' // 引入提示框和图例组件 import '...
基于Vue+Echart框智实现的慧城市.rar
最新发布
08-05
- 一个基于 Vue、Datav、Echart 框架的 " **智慧城市大屏可视化项目** "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。 - ...
完美解决vue 中多个echarts图表自适应的问题
12-28
看代码吧~ 　<IEcharts option=bar ref=echarts></IEcharts> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this；... self.$refs.echarts.resize()
echarts全国地图VUE版
12-28
vue版地图，echarts动态加载JS文件，支持下钻省市县和返回，依赖资源在我的资源里均可下载
插件echarts使数据可视化后，图随窗口自适应变化的方法
热门推荐
蒲厷渶と戀的博客
12-19 2万+
注：自己去echarts官网下载echarts.js，引入到html。 一、HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echart</title> <script src="echarts.js" type="text/ja...
Echarts中option属性设置
zhaojjjjjj163的博客
05-16 1771
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴重叠。直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴重叠。可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip。可以设置在全局，即 tooltip。可以设置在系列中，即。
在vue3项目中如何使用echarts
aiyang1214878408的博客
10-14 5838
vue3项目在做一个图表需求时发现项目之前引入的第三方echarts因确实文档使用时不能满足需求,顾去echarts官网查看文档,引入原生echarts.要实现的如下原型效果,用此文档记录.
vue3使用echarts
sunshine08_07的博客
08-04 974
1、安装 npm install echarts --save 2、在main.js中导入 import * as echarts from 'echarts' const app = createApp(App) app.config.globalProperties.$echarts = echarts app.use(store).use(router).use(ElementPlus).mount('#app') 3、在vue页面使用 <div id="myCharts" cl
vue3.0中使用echarts
qq_44983621的博客
04-15 5150
npm install echarts --save 默认就是5版本的。 在我们需要使用echarts的页面引入import * as echarts from 'echarts' //这个跟以前是不一样的。 我们需要在模板中定义一个容器来存放图表 <div ref="indexChart" :style="{ width: '100%', height: '300px' }"></div> 这里的宽高必须指定 setup中设置图表配置项 外部引入配置项import b.
vue3，echarts图表的使用
liyongchunscr的博客
05-16 3309
首先是先引入echarts图表 第一步： 安装 npm install echarts --save 在main.js引入 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' import * as echarts from 'echarts' const
【Vue】使用 onMounted 确保在组件挂载后执行异步操作
小秀的博客
06-27 7520
在该钩子函数中执行异步操作可以保证组件已经完全渲染，并且 DOM 元素已经存在，从而避免在组件还未挂载或尚未完全初始化时执行异步操作导致的问题。如果在这个阶段执行异步操作，可能无法获取到正确的 DOM 元素或执行预期的操作。钩子函数中，可以确保在组件已经挂载到 DOM 后执行异步操作，保证了组件已经完全初始化，并且相关的 DOM 元素和数据可用。如果在这个阶段执行异步操作，可能无法正确地获取或处理依赖项的数据。在上面的代码中，使用了 Vue 3 的 Composition API 中的。
Vue3.0 加载echart世界地图
04-11
Vue 3.0 是一种流行的JavaScript框架，用于构建用户界面。它具有响应式数据绑定和组件化的特性，使得开发者可以更加高效地构建交互式的Web应用程序。 要在Vue 3.0中加载echarts世界地图，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了Vue 3.0和echarts。你可以使用npm或yarn来安装它们： ``` npm install vue@next npm install echarts ``` 2. 在你的Vue项目中创建一个新的组件，用于加载echarts世界地图。你可以在该组件的模板中添加一个div元素，用于显示地图： ```html <template> <div id="map" style="width: 100%; height: 400px;"></div> </template> ``` 3. 在该组件的脚本部分，你需要引入echarts并在mounted钩子函数中初始化地图： ```javascript import { ref, onMounted } from 'vue'; import * as echarts from 'echarts'; export default { name: 'WorldMap', setup() { const mapContainer = ref(null); onMounted(() => { const myChart = echarts.init(mapContainer.value); // 在这里可以根据你的需求配置地图的数据和样式 myChart.setOption({ // 地图配置项 }); }); return { mapContainer, }; }, }; ``` 4. 最后，在你的Vue应用程序中使用该组件： ```html <template> <div> <WorldMap /> </div> </template> <script> import WorldMap from './WorldMap.vue'; export default { components: { WorldMap, }, }; </script> ``` 这样，你就可以在Vue 3.0应用程序中成功加载echarts世界地图了。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值