您现在的位置是:网站首页> 编程资料编程资料
Element中使用ECharts的项目实践_vue.js_
2023-05-24
484人已围观
简介 Element中使用ECharts的项目实践_vue.js_
一、引入ECharts
1、直接引入echarts (安装echarts项目依赖)
npm install echarts --save
2、全局引入 (我们安装完成之后,可以在main.js中全局引入 echarts)
import echarts from "echarts"; Vue.prototype.$echarts = echarts;
3、我们可以将Echar封装成组件的形式,方便调用
封装在组件中:封装成 Echarts.vue 文件放在ElementUI前端框架中
4、此时我们可以通过Echart官网引入我们需要的图
例如:以所选的折柱混合图为例

引入(需要引入Echarts刚刚封装好的组件)
从Echart官网获取对应图的代码

引入代码:
二、效果展示

到此这篇关于Element中使用ECharts的项目实践的文章就介绍到这了,更多相关Element使用ECharts内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
您可能感兴趣的文章:
相关内容
- React深入了解原理_React_
- uniapp打包成微信小程序的详细过程_javascript技巧_
- element-ui 表格sortable排序手动js清除方式_vue.js_
- VUE组件传参超详细讲解_vue.js_
- JS实现谷歌浏览器插件拷贝语音功能详解_网页特效_
- VUE零基础入门axios的使用_vue.js_
- JS异步观察目标元素方式完成分页加载_JavaScript_
- element-UI el-table树形数据 修改小三角图标方式_vue.js_
- vue-router后台鉴权流程实现_vue.js_
- JavaScript函数防抖与函数节流的定义及使用详解_javascript技巧_
