这篇文章主要介绍“vue中如何将echart封装为组件”,在日常操作中,相信很多人在vue中如何将echart封装为组件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中如何将echart封装为组件”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
1. 安装Echarts
首先第一步,肯定是安装Echarts了。通过cd命令进入项目根目录,然后敲以下命令行:
cnpm install echarts -S
安装成功会如下显示,package.json里的dependencies属性也会自动加上Echarts依赖:
安装Echarts
package.json
2.在vue项目中使用Echarts
安装成功以后,我们先要考虑的是如何在vue项目中导入Echarts,并成功初始化一个图表。
下面我会先建两个.vue文件 chart.vue 和 radar-chart.vue 作为这次示例的基础。 chart.vue的角色是调用雷达图,radar-chart.vue的角色是提供雷达图:
//chart.vue <template> <radar-chart></radar-chart> </template> <script> import RadarChart from '../components/radar-chart' export default { name: "chart", components: {RadarChart}, component: RadarChart } </script>
//radar-chart.vue <template> </template> <script> export default { name: "radar-chart" } </script>
好,正式创建一个Echarts图表了
(1)在radar-chart.vue导入echart :
// 引入基本模板 import echarts from 'echarts/lib/echarts' // 引入雷达图组件 import 'echarts/lib/chart/radar' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend'
(2)创建图表配置数据,数据格式参考 Echarts官网:
const option = { tooltip: {}, radar: { indicator: [{name: '体育', max: '100'}, {name: '数学', max: '100'}, {name: '化学', max: '100'}, {name: '劳动', max: '100'}, {name: '物理', max: '100'}], center: ['50%', '51%'] }, series: [{ type: 'radar', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data: [ { value: [58,56,78,64,98], name: '各项得分', itemStyle: {normal: {color: '#f0ad4e'}} } ] }] }
(3)初始化图表:
const chartObj = echarts.init(document.getElementById('radar')) chartObj.setOption(option)
上面几步汇总为以下代码,另外补充一点就是,创建配置数据option和初始化的时候,都要放在mounted钩子函数里执行,这样才能保证获取dom的是时候,dom已完成渲染:
//chart.vue <template> <radar-chart></radar-chart> </template> <script> import RadarChart from '../components/radar-chart' export default { name: "chart", components: {RadarChart}, component: RadarChart } </script>
//radar-chart.vue <template> <div id="radar" class="container"> </div> </template> <script> // 引入基本模板 import echarts from 'echarts/lib/echarts' // 引入雷达图组件 import 'echarts/lib/chart/radar' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' export default { name: "radar-chart", mounted(){ const option = { //创建图表配置数据 tooltip: {}, radar: { indicator: [{name: '体育', max: '100'}, {name: '数学', max: '100'}, {name: '化学', max: '100'}, {name: '劳动', max: '100'}, {name: '物理', max: '100'}], center: ['50%', '51%'] }, series: [{ type: 'radar', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data: [ { value: [58,56,78,64,98], name: '各项得分', itemStyle: {normal: {color: '#f0ad4e'}} } ] }] } //初始化图表 const chartObj = echarts.init(document.getElementById('radar')) chartObj.setOption(option) } } </script> <style scoped> .container{width: 500px;height: 400px;} </style>
3.将Echarts封装为组件
上面我们已经成功创建一个雷达图了,但是很明显的是,radar-chart.vue里的数据写死的,无法重复调用。接下来着手封装的事情了。
封装的思路是这样的:
(1)chart.vue向radar-chart.vue传递一组个性化数据
(2)radar-chart.vue通过props选项接收数据
(3)提炼接收到的数据,覆盖配置数据option
(4)初始化图表
具体代码如下:
//chart.vue (父组件) <template> <radar-chart :items="items"></radar-chart> //传递在子组件prop选项里约定好的数据 </template> <script> import RadarChart from '../components/radar-chart' export default { name: "chart", components: {RadarChart}, component: RadarChart, data () { return { items: [{name: '体育', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '化学', value: 75, max: '100'}, {name: '劳动', value: 85, max: '100'}, {name: '烹饪', value: 85, max: '100'}] } } } </script>
//radar-chart.vue (子组件) <template> <div id="radar" class="container"> </div> </template> <script> // 引入基本模板 import echarts from 'echarts/lib/echarts' // 引入雷达图组件 import 'echarts/lib/chart/radar' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' export default { name: "radar-chart", props: { //接受父组件传递来的数据 items: { type: Array, default () { //默认数据,没有数剧的情况下启用 return [{name: '生物', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '语文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美术', value: 59, max: '100'}] } }, }, mounted(){ let values = [] //提炼接收到的数据 this.items.forEach(el => { values.push(el.value) }) const option = { //覆盖配置数据option tooltip: {}, radar: { indicator: this.items, center: ['50%', '51%'] }, series: [{ type: 'radar', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data: [ { value: values, name: '各项得分', itemStyle: {normal: {color: '#f0ad4e'}} } ] }] } //初始化 const chartObj = echarts.init(document.getElementById('radar')) chartObj.setOption(option) } } </script> <style scoped> .container{width: 500px;height: 400px;} </style>
封装以后,就能传递自定义的数据,反复调用了
4.细节优化
基本的功能已经实现了,下面我们来优化下一些细节。
不知道大家有没发现radar-chart.vue里的<template>-id是写死的,这会出现什么问题?当一个页面调用两次这个雷达图组件,id就会重复了,从而报错。
为了解决这个问题,我引入了uuid(vue-cli项目自带,不需另外安装),意在为每个生成的雷达图配一个不重复的随机id。还需要注意的是,我们要在created()方法里去做这个生成id的事情,如果写在mounted了就会出现无法初始化的情况,因为来不及渲染新的ID,就执行document.getElementById()了,具体代码如下:
<template> <div> <radar-chart :items="items_one"></radar-chart> <radar-chart :items="items_two"></radar-chart> </div> </template> <script> import RadarChart from '../components/radar-chart' export default { name: "chart", components: {RadarChart}, component: RadarChart, data () { return { items_one: [{name: '体育', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '化学', value: 75, max: '100'}, {name: '劳动', value: 85, max: '100'}, {name: '烹饪', value: 85, max: '100'}], items_two: [{name: '体育', value: 22, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '化学', value: 75, max: '100'}, {name: '劳动', value: 85, max: '100'}, {name: '烹饪', value: 85, max: '100'}] } } } </script>
<template> <div :id="elId" class="container"> </div> </template> <script> // 引入基本模板 import echarts from 'echarts/lib/echarts' // 引入雷达图组件 import 'echarts/lib/chart/radar' // 引入提示框和图例组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' //引入uuid文件 import uuidv1 from 'uuid/v1' export default { name: "radar-chart", props: { items: { type: Array, default () { return [{name: '生物', value: 95, max: '100'}, {name: '数学', value: 55, max: '100'}, {name: '语文', value: 86, max: '100'}, {name: '物理', value: 54, max: '100'}, {name: '美术', value: 59, max: '100'}] } }, }, data () { return { elId: '' } }, created(){ this.elId = uuidv1() //获取随机id }, mounted(){ let values = [] this.items.forEach(el => { values.push(el.value) }) const option = { tooltip: {}, radar: { indicator: this.items, center: ['50%', '51%'] }, series: [{ type: 'radar', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data: [ { value: values, name: '各项得分', itemStyle: {normal: {color: '#f0ad4e'}} } ] }] } const chartObj = echarts.init(document.getElementById(this.elId)); chartObj.setOption(option) } } </script> <style scoped> .container{width: 500px;height: 400px;} </style>
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
到此,关于“vue中如何将echart封装为组件”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。