怎么在Vue2中使用Echarts创建图表-创新互联
本篇文章为大家展示了怎么在Vue2中使用Echarts 创建图表,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
目前创新互联已为近千家的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、宜州网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。一、安装插件
使用 cnpm 安装 Echarts
cnpm install echarts -S
和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用
通常是在需要使用图表的 .vue 文件中直接引入
import echarts from 'echarts'
也可以在 main.js 中引入,然后修改原型链
Vue.prototype.$echarts = echarts
然后就可以全局使用了
let myChart = this.$echarts.init(document.getElementById('myChart'))
二、创建图表
首先需要在 HTML 中创建图表的容器
需要注意的是,图表的容器必须指定宽高,也就是说 width,height 不能使用百分比,只能用 px
这样确实不够灵活,不过我们可以用 js 来改变 width 和 height,使图表容器能够自适应,具体的实现请往后看
然后在 mounted 中创建图表,具体的配置参考官方文档,这里不再赘述
三、按需引入
上面引入的 echarts 包含了所有图表,但有时候我们只需要一两个基本图表,这时候完整的 echarts 就显得累赘
假如只需要创建一个饼图,那么可以这么做:
// 引入基本模板 let echarts = require('echarts/lib/echarts') // 引入饼图组件 require('echarts/lib/chart/pie') // 引入提示框和图例组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/legend')
之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全
可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js
四、适应容器
上面说过,图表的容器必须固定宽高,这确实是一个比较反人类的设定
为了解决这个问题,需要给图表容器外面再加一个容器,而这个外容器的宽高可以适应页面。上面的
let chartBox = document.getElementsByClassName('charts')[0] let myChart = document.getElementById('myChart') // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 function resizeCharts () { myChart.style.width = chartBox.style.width + 'px' myChart.style.height = chartBox.style.height + 'px' } // 设置容器高宽 resizeCharts() let mainChart = echarts.init(myChart) mainChart.setOption(options)
上述内容就是怎么在Vue2中使用Echarts 创建图表,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联网站建设公司行业资讯频道。
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:怎么在Vue2中使用Echarts创建图表-创新互联
文章源于:http://ybzwz.com/article/dddsog.html