在vue项目中封装echarts的步骤

<template>
<div class=”echart-pie-wrap”>
<echart-pie :series-data=”dataList” :extra-option=”extraOption” />
</div>
</template>

<script>
import EchartPie from ‘@/components/echarts/echart_pie’;

export default{
components: { EchartPie },
data() {
return {
dataList: [
{
name: “西瓜”,
value: 20
},
{
name: “橘子”,
value: 13
},
{
name: “杨桃”,
value: 33
}
],
extraOption: {
color: [ ‘#fe883a’, ‘#2d90d1′,’#f75981’, ‘#90e2a9’]
}
}
}
}

</script>

<style lang=”less” scoped>
.echart-wrapper {
width: 300px;
height: 300px;
margin: 10px auto;
}
</style>

效果图

当数据正常时，效果如下

当无数据时，效果如下

关于灵活性

这里面提供的封装只是一种大概的思路，实际项目中，可能会与这里出现偏差。软件开发没有银弹可言，非常适合我这个项目的，可能在细节上不太适合看这篇文章的你。但是思路是类似的，可以对照着做一些调整。

以上就是在vue项目中封装echarts的步骤的详细内容，更多关于vue项目中封装echarts的资料请关注脚本之家其它相关文章！

来源：脚本之家

链接：https://www.jb51.net/article/202900.htm

申请创业报道，分享创业好点子。点击此处，共同探讨创业新机遇！

本文素材来自互联网

（编辑：应用网_阳江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!