最近的新项目里，有大量数据图表类的需求，为了增强代码的复用性，减少冗余，我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例，一步步讲解在vue项目中如何使用echart，如何将其封装为能重复调用的组件。

阅读之前，可以先看看我之前的一些文章，这样能更好的理解这次的内容：

【使用vue-cli（vue脚手架）快速搭建项目】：https://ponent/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>

成功解决重复id的问题：

效果三

整个封装echart的思路就是上面那样了，其实这个demo还不完美，像雷达图的宽高也是写死的，还没来得及做更多的优化，后面有空慢慢再完善它~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。