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

相关文章
|
2月前
|
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`异步绘制数据。
|
4天前
|
JavaScript
【vue】 在vue2项目中使用echarts
【vue】 在vue2项目中使用echarts
10 0
|
13天前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
28 0
|
1月前
|
JavaScript 容器
|
21天前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
32 0
|
2月前
|
JavaScript
升级echarts v5.0以后vue项目报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
升级echarts v5.0以后vue项目报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
|
2月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
67 1
|
2月前
|
JavaScript
封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市,并定义复杂样式
封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市,并定义复杂样式
|
8月前
echarts饼图点击区块事件
echarts饼图点击区块事件
39 0
|
10月前
|
JavaScript
echarts入门】:vue项目中应用echarts
echarts在vue项目中快速上手