vue实现 【echarts中 “7种” Pie饼图图例】组件的封装
2024-04-24 23:20:40
图例一：
图例二：
图例三：
图例四：
图例五：
图例六：
图例七：自定义显示内容
一、安装echarts
npm install echarts --save二、在需要的页面引入
import * as echarts from "echarts"三、创建组件
1、图例一：PieChart.vue
<template><div><div id="pie"></div></div>
</template>
<script>
import * as echarts from 'echarts'
export default {props: {studyList: {type: Array,default: () => []}},data() {return {avgNum: 0}},created() {this.$nextTick(() => {this.pieBtn()})this.studyData()},methods: {studyData() {let sum = 0this.studyList.forEach(s => {sum += s.value})this.avgNum = (sum / this.studyList.length).toFixed(1)},pieBtn() {let myChart = echarts.init(document.getElementById('pie'))let option = {color: ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6'],title: {text: '综合得分：' + this.avgNum + '分',left: 'center'},grid: {top: '0',left: '0%',right: '0%',bottom: '0%',containLabel: true},legend: {orient: 'vertical',left: 'left',show: false},series: [{type: 'pie',radius: '50%',labelLine: {length: 50, // 改变标示线的长度lineStyle: {color: '#333' // 改变标示线的颜色}},label: {alignTo: 'edge',formatter: '{name|{b}}\n{time|{c} 分}',edgeDistance: 10,lineHeight: 30,fontSize: 20,rich: {time: {fontSize: 16,color: '#999'}},textStyle: {color: '#333'}},data: this.studyList}]}myChart.setOption(option)// 让图表跟随屏幕自动的去适应window.addEventListener('resize', function () {myChart.resize()})}}
}
</script>
<style lang="scss" scoped>
#pie{width: 220mm;height: 110mm;margin: 0 auto;
}
</style>
2、图例二：PieChart1.vue
<template><div class="pie_page"><div class="pie_mark">综合得分：{{Score}}分</div><div class="pie" :id="conIndex"></div></div>
</template>
<script>
import * as echarts from 'echarts'
export default {props: {studyList: {type: Array,default: () => []},Score: {type: Number,default: 0},conIndex: {type: String,default: ''},title: {type: String,default: ''}},data() {return {nameList: []}},created() {this.$nextTick(() => {this.pieBtn()})},methods: {pieBtn() {this.studyList.forEach(fa => {this.nameList.push({name: fa.Name, value: fa.Score, ave: fa.AveScore})})let myChart = echarts.init(document.getElementById(this.conIndex))let option = {color: ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6'],title: {text: this.title,left: 'center',top: 'center'},grid: {top: '0',left: '0%',right: '0%',bottom: '0%',containLabel: true},legend: {orient: 'vertical',left: 'left',show: false},series: [{type: 'pie',radius: ['30%', '70%'],label: {alignTo: 'edge',position: 'inner',formatter: '{b}',fontSize: 20,textStyle: {fontWeight: 'bold',textShadowColor: '(0,0,0,.1)', // 文字阴影textShadowBlur: 1,textShadowOffsetX: 1}},data: this.nameList},{type: 'pie',radius: ['30%', '70%'],labelLine: {length: 40, // 改变标示线的长度lineStyle: {color: '#333' // 改变标示线的颜色}},label: {formatter: function(params) {return '我的得分：' + params.data.value + '分\n平均得分：' + params.data.ave + '分'},lineHeight: 30,fontSize: 14,textStyle: {color: '#999',borderColor: '#999',padding: [5, 10],borderWidth: 1}},data: this.nameList}]}myChart.setOption(option)// 让图表跟随屏幕自动的去适应window.addEventListener('resize', function () {myChart.resize()})}}
}
</script>
<style lang="scss" scoped>
.pie_page{text-align: center;margin: 5mm 0;.pie_mark{font-size: 20px;font-weight: bold;}
}
.pie{width: 210mm;height: 120mm;margin: 0 auto;
}
</style>
3、图例三：PieChart3.vue
<template><div><div class="bars_w" :id="id"></div></div>
</template>
<script>
import * as echarts from 'echarts'
export default {props: {markList: {type: Array,default: () => []},id: {type: String,default: ''}},data() {return {fatherName: [], // 父级childName: [] // 子级}},created() {this.$nextTick(() => {this.barBtn()})},methods: {barBtn() {this.markList.forEach((ma, index) => {this.fatherName.push({name: ma.Name, value: ma.UserScore, avg: ma.DivideScore})ma.Children.forEach(chi => {this.childName.push({name: chi.Name, value: chi.UserScore, avg: chi.DivideScore})})})// echarts 图let myChart = echarts.init(document.getElementById(this.id))let colorList = ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6']let option = {title: {text: '目标监控',left: 'center'},series: [{type: 'pie',radius: [0, '60%'],itemStyle: {normal: {label: {position: 'inner',formatter: function(params) {return params.data.name + '\n你的得分：' + params.data.value + '\n平均得分：' + params.data.avg},fontSize: 14,lineHeight: 20,textStyle: {fontWeight: 'bold',textShadowColor: '(0,0,0,.1)', // 文字阴影textShadowBlur: 1,textShadowOffsetX: 1}},// 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组color: function (params) {return colorList[params.dataIndex]}}},labelLine: {show: false},data: this.fatherName},{type: 'pie',radius: ['60%', '85%'],itemStyle: {normal: {label: {position: 'inner',formatter: '{b|{b}}',color: '#999',rich: {b: {color: '#fff',fontSize: 14,fontWeight: 'bold'}}}}},data: this.childName},{type: 'pie',radius: ['60%', '85%'],labelLine: {length: 30, // 改变标示线的长度lineStyle: {color: '#999' // 改变标示线的颜色}},itemStyle: {normal: {label: {formatter: function(params) {return '你的得分：' + params.data.value + '\n平均得分：' + params.data.value},color: '#333',fontSize: 12,lineHeight: 25,rich: {b: {fontSize: 16,fontWeight: 'bold'},c: {fontSize: 16}}},// 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组color: function (params) {return colorList[params.dataIndex]}}},data: this.childName}]}myChart.setOption(option)// 让图表跟随屏幕自动的去适应window.addEventListener('resize', function () {myChart.resize()})}}
}
</script>
<style lang="scss" scoped>
.bars_w{width: 210mm;height: 130mm;margin: 0 auto;
}
</style>
4、图例四：PieChart3.vue
var branch = 32, branchTotal = 146;//科数
var species = 82, speciesTotal = 608;//种数
option = {title: [{text: "占全国湿地维管束植物",textStyle: {fontSize: 14,color: "#333"},subtext: "总科数",subtextStyle: {color: "#333",fontSize: 14,fontWeight: "bold"},left: '20%',top: '65%',textAlign: 'center'},{text: "占全国湿地维管束植物",textStyle: {fontSize: 14,color: "#333"},subtext: "总种数",subtextStyle: {color: "#333",fontSize: 14,align: "center",fontWeight: "bold"},left: '70%',top: '65%',textAlign: 'center'}],series: [{name: "总科数",type: 'pie',hoverAnimation: false,radius: ["20%", '25%'],center: ['20%', '50%'],label: {show: false},data: [{value: branch,name: '总科数',label: {show: true,position: 'center',formatter: '{b|{b}}\n{d|{d}}%',rich: {b: {fontSize: 14,lineHeight: 30,color: "#333"},d: {fontSize: 24,color: "#333",fontWeight: "bold"}},color: "#333"},itemStyle: {normal: {color: "#1890FF"}}},{value: branchTotal - branch,//不需要显示的数据，颜色设置成和背景一样itemStyle: {normal: {color: '#F0F2F5'}}}]},{name: "总种数",type: 'pie',hoverAnimation: false,radius: ["20%", '25%'],center: ['70%', '50%'],label: {show: false},data: [{value: species, //需要显示的数据name: '总种数',label: {show: true,position: 'center',formatter: '{b|{b}}\n{d|{d}}%',rich: {b: {fontSize: 14,lineHeight: 30,color: "#333"},d: {fontSize: 24,color: "#333",fontWeight: "bold"}},color: "#333"},itemStyle: {normal: {color: "#FAFA14"}}},{value: speciesTotal - species,//不需要显示的数据，颜色设置成和背景一样itemStyle: {normal: {color: '#F0F2F5'}}}]}]};5、图例五：PieChart4.vue
option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {orient: 'vertical',right: "5%",top: "20%",icon: 'circle',textStyle: {color: '#333',fontSize:20},data: ['防火四级', '防火三级', '防火二级', '防火一级']},series: [{name: '火险等级',type: 'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {show: true,position: 'center',color:'#333'},emphasis: {label: {show: true,fontSize: 20,fontWeight: 'bold'}},labelLine: {show: false},data: [{value: 50,name: '防火一级',itemStyle: {normal: {color: 'rgba(53,130,247,0.6)',borderColor: 'rgba(53,130,247,0.8)',borderWidth: 3,shadowColor: 'rgba(53,130,247,0.8)',shadowBlur: 10}}},{value: 30,name: '防火二级',itemStyle: {normal: {color: 'rgba(244,201,7,0.5)',borderColor: 'rgba(244,201,7,0.8)',borderWidth: 3,shadowColor: 'rgba(244,201,7,0.8)',shadowBlur: 10}}},{value: 20,name: '防火三级',itemStyle: {normal: {color: 'rgba(25,236,176,0.5)',borderColor: "rgba(25,236,176,0.8)",borderWidth: 3,shadowColor: 'rgba(25,236,176,0.8)',shadowBlur: 10}}},{value: 10,name: '防火四级',itemStyle: {normal: {color: 'rgba(134,66,255,0.6)',borderColor: 'rgba(134,66,255,0.8)',borderWidth: 3,shadowColor: 'rgba(134,66,255,0.8)',shadowBlur: 10}}},],center: ['35%', '50%']}]};6、图例六：PieChart5.vue
option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {bottom: '20%',icon: 'circle',orient: 'vertical',left: '75%',textStyle: {color: '#333',fontSize:20},data: ['电话报警', '微信报警', '移动终端报警', '探测器报警', '云端报警']},visualMap: {show: false,min: 80,max: 600,inRange: {colorLightness: [0, 1]}},series: [{name: '',type: 'pie',radius: '55%',center: ['35%', '50%'],data: [{value: 335, name: '电话报警',itemStyle: {normal: {color: "rgba(50,123,250,0.5)",borderColor: 'rgba(50,123,250,0.8)',borderWidth: 2,shadowColor: 'rgba(50,123,250,0.8)',shadowBlur: 10}}},{value: 310, name: '微信报警',itemStyle: {normal: {color: 'rgba(160,234,253,0.5)',borderColor: 'rgba(160,234,253,0.8)',borderWidth: 2,shadowColor: 'rgba(160,234,253,0.8)',shadowBlur: 10}}},{value: 274, name: '移动终端报警',itemStyle: {normal: {color: 'rgba(252,238,187,0.5)',borderColor: 'rgba(252,238,187,0.8)',borderWidth: 2,shadowColor: 'rgba(252,238,187,0.8)',shadowBlur: 10}}},{value: 235, name: '探测器报警',itemStyle: {normal: {color: 'rgba(25,236,176,0.5)',borderColor: 'rgba(25,236,176,0.8)',borderWidth: 2,shadowColor: 'rgba(25,236,176,0.8)',shadowBlur: 10}}},{value: 400, name: '云端报警',itemStyle: {normal: {color: 'rgba(215,102,98,0.6)',borderColor: 'rgba(255,169,166,0.8)',borderWidth: 1,shadowColor: 'rgba(215,102,98,0.6)',shadowBlur: 10}}}].sort(function (a, b) { return a.value - b.value; }),roseType: 'radius',label: {formatter: '{a} {b}\n ({d}%) '},itemStyle: {shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200;}}]};7、图例七：PieChart6.vue
<template><div><div class="bars_w" :id="id"></div></div>
</template>
<script>
import * as echarts from 'echarts'
export default {props: {studyList: {type: Array,default: () => []},id: {type: String,default: ''}},data() {return {fatherName: [], // 父级childName: [] // 子级}},created() {this.$nextTick(() => {this.barBtn()})},methods: {barBtn() {this.studyList.forEach((ma, index) => {if (ma.Name === '教育观念') {ma.Children.map(m => {this.childName.push({name: m.Name, value: 1, SumAvgScore: m.SumAvgScore, Score: m.Score, Title: m.Title})})} else {ma.Children.map(m => {this.childName.push({name: ma.Name, value: 4, SumAvgScore: m.SumAvgScore, Score: m.Score, Title: m.Title})})}this.fatherName.push({name: ma.Name, value: 1, SumAvgScore: ma.SumAvgScore})})// echarts 图let myChart = echarts.init(document.getElementById(this.id))let option = {color: ['#326092', '#2c7eeb', '#d5f1ff', '#3dc6c8', '#becae0', '#4d8fc6'],series: [{type: 'pie',selectedMode: 'single',radius: [0, '45%'],label: {position: 'inner',fontSize: 14},labelLine: {show: false},data: this.fatherName},{type: 'pie',radius: ['45%', '65%'],labelLine: {length: 55, // 改变标示线的长度lineStyle: {color: '#333' // 改变标示线的颜色}},label: {formatter: function(params) {if (params.data.Title) {return params.data.name + '\n' + params.data.Title} else {return params.data.name + '\n你的得分：' + params.data.Score + '\n平均得分：' + params.data.SumAvgScore}},lineHeight: 25,fontSize: 14,textStyle: {color: '#999',borderColor: '#999',padding: [5, 10],borderWidth: 1},rich: {b: {color: '#4C5058',fontSize: 14,fontWeight: 'bold',lineHeight: 33}}},data: this.childName}]}myChart.setOption(option)// 让图表跟随屏幕自动的去适应window.addEventListener('resize', function () {myChart.resize()})}}
}
</script>
<style lang="scss" scoped>
.bars_w{width: 210mm;height: 130mm;margin: 10mm auto 0 auto;
}
</style>
四、页面引入
<template><div><PieChart :studyList="studyList"></PieChart><PieChart1 :studyList="studyList1"></PieChart1><PieChart2 :studyList="studyList2"></PieChart3><PieChart6 :studyList="studyList6"></PieChart6></div>
</template>
<script>
import PieChart '@/components/PieChart'
import PieChart1 '@/components/PieChart1'
import PieChart6 '@/components/PieChart6'
export default {components: {PieChart,PieChart1},data() {return {// 图例1studyList: [{ value: 6.8, name: '预习反思'},{ value: 4.2, name: '预习认知'},{ value: 5.8, name: '预习任务'},{ value: 5.6, name: '预习方法'}],// 图例2studyList1: [{ Score: 10, AveScore: 6.6, Name: '策略认知'},{ Score: 8.2, AveScore: 6.4, Name: '计划策略'},{ Score: 8.4, AveScore: 6.1, Name: '监控策略'},{ Score: 8.8, AveScore: 6.4, Name: '调节策略'}],// 图例3studyList2: [{ Name: "过程监控", DivideScore: 7.2,UserScore: 6,Children: [{Name: "监控行为", DivideScore: 5, UserScore: 5},{Name: "监控结果", DivideScore: 6.7, UserScore: 6.7}]},{Name: "参照价值", DivideScore: 7,UserScore: 5.5,Children: [{Name: "监控过去", DivideScore: 5, UserScore: 5},{Name: "监控未来", DivideScore: 6.7, UserScore: 6.7}]},{Name: "能动性",DivideScore: 6.8,UserScore: 6,Children: [{Name: "主动监控", DivideScore: 5, UserScore: 5},{Name: "被动监控", DivideScore: 6.7, UserScore: 6.7}]}],// 图例7studyList6:[{Name: '教育观念',Title: '',Score: null,SumAvgScore: null,Children: [{Score: 0.0, SumAvgScore: 0.0, Name: '发展观', Title: '主张环境'},{Score: 69.0, SumAvgScore: 69.0, Name: '期望观'},{Score: 70.0, SumAvgScore: 75.0, Name: '父母观'},{Score: 0.0, SumAvgScore: 0.0, Name: '亲子观', Title: '主张奖励'}]}, {Name: '家长学习力',Title: '',Score: null,SumAvgScore: null,Children: [{Score: 31.0, SumAvgScore: 75.0}]},{Name: '管教风格',Title: '',Score: null,SumAvgScore: null,Children: [{Score: 0.0, SumAvgScore: 0.0, Title: '专制型', Name: '您的管教风格：'}]}]}}
}
</script>
希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
vue实现 【echarts中 “7种” Pie饼图图例】组件的封装相关推荐
- vue实现【echarts中 “7种” Bar柱状图图例】实现 人格画像 组件的封装，并在柱状条显示label自定义文字
图例一: 图例二: 图例三: 图例四: 图例五: 图例六: 图例七: 一.安装echarts npm install echarts --save 二.在需要的页面引入 import * as ech ...
- Vue在路由中懒加载并创建组件，省去写页面的步骤
需求 现在有一个公共组件,在多个端都需要使用,但传入组件的参数不同,每个端都要写个vue的页面或是component有点麻烦. <template><child blPath=&qu ...
- vue使用echarts中鼠标滚轮失效问题
问题描述: 前端使用echarts绘图时,鼠标在图表中滚动页面经常失效,只有在滚动条或页面空白区域上才能滚动页面. 原因分析: 未找到原因 - - , 找到原因了再更新吧...望各位大佬们知道原因的能 ...
- Android中几种常见的播放声音组件
(1)概念 (A)MediaPlayer MediaPlayer的功能很强大,下面附上一张该类封装音频的生命周期图: 适合在后台长时间播放本地音乐文件或者在线等流媒体文件,它的封装层次比较高,使用方式 ...
- vue中8种组件通信方式,纯干货！值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
- vue 之 echarts饼形图 如何显示负数份额
目录 vue 之 echarts饼形图 如何显示负数份额 饼形图组件 深拷贝对象 传入的数据 vue 之 echarts饼形图 如何显示负数份额 饼形图组件 <template><d ...
- Vue进阶（幺贰零）：父组件获取子组件验证结果
文章目录 一.前言 二.代码实现 三.拓展阅读 一.前言 在开发Vue项目过程中,代码复用之自定义组件是常做事情.当子组件为form表单的时候,父组件需要获取子组件(表单)的验证结果. 尽管有 pro ...
- vue中使用ECharts实现折线图和饼图
在开发后台管理项目时,需要统计后台用户数据,以折线图和饼图的形式显示,这边采用apache-echarts来实现需求. 1.安装echarts和引入 npm install echarts --sav ...
最新文章
- DM***+EZ***
- vs oracle带参数更新,Oracle vs PostgreSQL Develop（23） - PL(pg)sql(参数声明)
- JavaMail邮件别名和主题乱码解决[转]
- 数据回填过程中，不可设置nobackfill和norecover
- idea创建一个html5,idea创建一个SpringBoot项目
- 下列那些是oracle的伪列,oracle伪列
- 已超过了锁请求超时时段。 (Microsoft SQL Server,错误: 1222)
- 从数据库中取出数据表，导入并生成excel
- 什么是JAX-RS注释？ （第3部分）
- 会议交流 | 2021年全国知识图谱与语义计算大会（CCKS 2021）征稿通知
- 永远不要去依赖别人_心理学：永远不要穿别人剩下的旧衣服，这三点原因读来让人愧疚...
- python的匿名函数返回值_Python匿名函数返回值输出问题望指点
- 删除字符串中重复的字符
- 0x00007FFEBAD050D8 处(位于 first.exe 中)有未经处理的异常: Microsoft C++ 异常: cv::Exception，位于内存位置 0x0000000DD73CE
- 通过ng-change选择ng-object
- 菲佣WPF——3(关于INotifyPropertyChanged的使用的想法)
- EI/scopus推荐-智能交通与智慧城市会议
- ubuntu 安装万能五笔
- Http状态405-方法不允许
- html打印多了空白页,为什么打印Word文档会多打印出一空白页