2020-09-23
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
提示：动手分装一个饼状图
一、使用步骤
1.引入库
安装echarts依赖：
npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
作者：sjj
链接：https://www.jianshu.com/p/cf0a54374419
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
2.新建vue文件
pieChat.vue：
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
data: {
type: Array,
default: function() {}
},
xdata: {
type: Array,
default: function() {}
},
legend: {
type: Array,
default: function() {}
},
percent: {
type: Array,
default: function() {}
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
backgroundColor: '#fff',
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#3ba0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b'],
legend: {
orient: 'vertical',
right: 'right',
left: '60%',
top: '20%',
icon: 'circle',
width: '10%',
data: this.xdata,
itemGap: 16, // 设置legend的间距
formatter: (name) => {
let index = 0
this.xdata.forEach((value, i) => {
if (value === name) {
index = i
}
})
return '{a|' + name + '}' + '| ' + '{a|' + this.percent[index] + '}' + this.legend[index]
}
},
textStyle: {
rich: {
a: {
width: 70
}
}
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '70%'],
center: ['30%', '50%'],
label: {
formatter: '{per|{d}%} ',
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
b: {
fontSize: 16,
lineHeight: 33
}
}
},
data: this.data,
itemStyle: {
borderWidth: 5, // 设置border的宽度有多大
borderColor: '#fff'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: '#fff',
borderWidth: 0, // 设置border的宽度有多大
borderColor: '#fff'
}
}
}
]
})
}
}
}
</script>
<style scoped>
.line-chart-box{
/* width: 100%; */
height: 350px;
}
.chart{
margin-left: 2.5%;
margin-bottom: 30px;
}
</style>
3.使用
import PieChart from 'PieChart'
<template>
<div>
<pie-chart :data="dataChart" :xdata="xdata" :legend="legend" :percent="percent"/>
</div>
</template>
data数据
data() {
return {
dataChart: [
{ value: 335, name: '姓名1' },
{ value: 310, name: '姓名2' },
{ value: 234, name: '姓名3'},
{ value: 135, name: '姓名4' },
{ value: 1548, name: '姓名5' }
],
xdata: ['姓名1', '姓名2', '姓名3', '姓名4', '姓名5'],
legend: [
'335', '310', '234', '135', '1548'
],
percent: ['13.08%', '12.1%', '9.13%', '5.27%', '60.42%'],
}
}
展示