大事件项目17----Vue项目引入Echarts

简介: 大事件项目17----Vue项目引入Echarts

1、第一步我们先找到Echarts的文档

2、第一步先下载Echarts

3、下载之后,再想办法,将Echarts下载下来

4、在哪里引入Echarts,哪里用,就在哪里写

5、Echarts用的是命名导出,要加大括号

6、把所有对象导出,形成对象

7、我想要在这个盒子里放一个容器

8、把这一个名换一下

9、这里初始化失败,怎样解决报错问题呢?

10、Vue中先执行WebPack,会将js先执行了,执行到这里,是没有Dom的,所以获取到了一个

11、在外面写是错误的,什么时候,我能够获取到div的真实容器,不能在外面写,在外面写的时候,create,还没有创建呢。

12、要在mounted里写,为了看起来方便,我们专门封装一个函数

13、现在先初始化面积图

14、组件调用后,再创建Echarts

15、git 提交,Vue项目中引入,Echarts的讲解

--------------------------------------------------------------------------------------------------------------------------------

现在我们看到了已经将Echarts给引入进来了,点击示例

找到一个最相近的,再去找一个文档的配置手册

1、这里我要直接,拿我们的配置项复制过来

2、替换掉,我的option对象

3、替换之后,变成了面积图了

4、

5、这三个方法,你可以将他拿过来

6、

7、饼状图,第二行,第二列,选中这一部分的内容

8、最终写法

9、初始化饼状图和面积图

10、最后我们用git 提交,git push一下

相关文章
|
4月前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading 'setOption')`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
133 3
|
1月前
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图
|
1月前
|
JavaScript 数据可视化 搜索推荐
在Vue项目中使用Echarts图表库
这篇文章介绍了如何在Vue项目中集成ECharts图表库,并通过具体的代码示例展示了如何创建并配置一个饼图来展示数据。
22 0
在Vue项目中使用Echarts图表库
|
1月前
|
JavaScript
Echarts——VUE中如何给echarts绑定click事件
Echarts——VUE中如何给echarts绑定click事件
37 1
|
2月前
|
JavaScript
【vue】 在vue2项目中使用echarts
【vue】 在vue2项目中使用echarts
36 0
|
3月前
|
JavaScript 容器
|
2月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
231 0
|
3月前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
|
4月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
95 1
|
23天前
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
139 1
微信小程序使用echarts图表(ec-canvas)