本文主要是介绍echarts组件——饼图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
echarts组件——饼图
饼图，环形图
组件代码
<template><div :class="classname" :style="{height:height,width:width}" />
</template><script>
// 环形图
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'export default {mixins: [resize],props: {classname: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '100%'},color: { // 花瓣颜色type: Array,default: () => ['#5788F7', '#50CD89', '#FFC700', '#895CE8', '#0FC6C2', '#B5BDCB', '#fc8452', '#9a60b4', '#ea7ccc']},labelshow: { // 是否显示标签type: Boolean,default: true},emphasisshow: {type: Boolean,default: false},piedata: {type: Array,default: () => [{ value: 320, name: 'Industries' },{ value: 240, name: 'Technology' },{ value: 149, name: 'Forex' },{ value: 100, name: 'Gold' }]}},data() {return {chart: null,legenddata: []}},watch: {piedata: {deep: true,handler(val) {this.$nextTick(() => {this.piedata.forEach((item) => {this.legenddata.push(item.name)})this.initChart()})}}},mounted() {},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods: {initChart() {this.chart = echarts.init(this.$el, 'macarons')this.chart.setOption({color: this.color,tooltip: {trigger: 'item',formatter: '{b} : {c} ({d}%)'},legend: {data: this.legenddata,// orient: 'vertical',width: '66%',top: '250',left: 'center',icon: 'rect',itemWidth: 12,itemHeight: 12,itemGrap: 10,formatter: ['{a|{name}}'].join('\n'),textStyle: {rich: {a: {width: 80,lineHeight: 20,fontSize: 12,fontWeight: 400}}}},series: [{name: '',type: 'pie',radius: [40, 85],center: ['50%', '30%'],label: {show: this.labelshow,position: 'inner',color: '#ffffff',formatter: (params) => {if (params.percent) {return `${params.percent}%`} else {return ''}}},emphasis: {label: {show: this.emphasisshow}},data: this.piedata,animationEasing: 'cubicInOut',animationDuration: 2000}]})}}
}
</script>使用组件，传值格式可以看组件的默认数据的格式
这篇关于echarts组件——饼图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
