大事件项目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一下

相关文章
|
6月前
|
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`异步绘制数据。
152 3
|
1月前
|
算法 Java Linux
java制作海报五:java 后端整合 echarts 画出 折线图,项目放在linux上,echarts图上不显示中文,显示方框口口口
这篇文章介绍了如何在Java后端整合ECharts库来绘制折线图,并讨论了在Linux环境下ECharts图表中文显示问题。
39 1
|
3月前
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图
|
3月前
|
JavaScript 数据可视化 搜索推荐
在Vue项目中使用Echarts图表库
这篇文章介绍了如何在Vue项目中集成ECharts图表库,并通过具体的代码示例展示了如何创建并配置一个饼图来展示数据。
46 0
在Vue项目中使用Echarts图表库
|
3月前
|
JavaScript
Echarts——VUE中如何给echarts绑定click事件
Echarts——VUE中如何给echarts绑定click事件
184 1
|
4月前
|
JavaScript
【vue】 在vue2项目中使用echarts
【vue】 在vue2项目中使用echarts
65 0
|
5月前
|
JavaScript 容器
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
376 0
|
5月前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
55 1

热门文章

最新文章