Echarts 环形图 自定义配置
业务需求实现一个圆环图，看着简单，做起来卡卡的……
效果图：
步骤：
1、从echarts官网上复制一个最基本的饼图
2、在series中设置饼图的半径 和 饼图的中心(圆心)坐标 形成圆环
3、设置圆环渐变色 color 、线性渐变
4、图例说明与图表呈横向排列，设置：legend
细节点：
（1）图例的图标改为圆形
（2）图例的图标在左，文字在右
（3）右边图例与圆环图位置水平居中
（4）自定义图例文字样式，文字之间有间隔，文字颜色尺寸等，使用 rich
实现：
5、图表的标题始终与圆环图保持居中
6、设置圆环内文字始终在圆环的正中间，并且自适应
7、设置hover圆环时有阴影：series 的 emphasis 属性
完整实现：
组件：
<template>
<div ref="treeChartCommon" :style="{ height: '242px' }">div>
template>
<script>
export default {
name: 'eCharts',
props: {
chartData: {
type: Object,
required: false,
},
},
data() {
return {
pieData: [],
}
},
mounted() {
this.showChart()
},
methods: {
showChart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(this.$refs.treeChartCommon)
myChart.clear()
this.pieData = this.chartData.pieData
const list = this.pieData
// 指定图表的配置项和数据
var option = {
//标题
title: {
text: this.chartData.pieTitle,
x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y: 'bottom', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
textStyle: {
fontFamily: 'Microsoft YaHei',
fontSize: 14,
fontWeight: 'normal',
color: '#333333',
},
left: '25%',
top: '80%',
textAlign: 'center', // 标题始终和图表保持居中
},
// 设置圆环渐变色
color: [
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
// 右 下 左 上
{
offset: 0,
color: '#65D161',
},
{
offset: 1,
color: '#8AE587',
},
]),
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#5393E7',
},
{
offset: 1,
color: '#9EC8FF',
},
]),
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
//0, 1, 1, 0
{
offset: 0,
color: '#F5E127',
},
{
offset: 1,
color: '#FFF381',
},
]),
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FFC772',
},
{
offset: 1,
color: '#FFA51E',
},
]),
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FF8A8A',
},
{
offset: 1,
color: '#EC6161',
},
]),
],
legend: {
itemWidth: 8,
itemHeight: 8,
icon: 'circle',
x: 'right',
y: 'center',
orient: 'vertical', //设置图例排列纵向显示
align: 'left', //设置图例中文字位置在icon标识符的右侧
left: '50%',
top: '20%',
itemGap: 10, //设置图例之间的间距
padding: [0, 0, 0, 0], //设置图例与圆环图之间的间距
formatter: function (name) {
//该函数用于设置图例显示后的百分比
var total = 0
var value
list.forEach((item) => {
total += item.value
if (item.name === name) {
value = item.value
}
})
var p = ((value / total) * 100).toFixed(1) //求出百分比,保留2位小数
// return `${name} ${value}件 ${p}%`
return `{a|${name}}{b|${value}件}{c|${p}%}` //返回出图例所显示的内容是名称+百分比
},
// 自定义图例文字样式
textStyle: {
rich: {
a: {
color: '#333333',
padding: [0, 10, 0, 0],
fontSize: 12,
},
b: {
color: '#666666',
padding: [0, 10, 0, 0],
fontSize: 12,
},
c: {
color: '#666666',
fontSize: 12,
},
},
},
},
graphic: [
// 设置圆环内文字始终在圆环的正中间
{
type: 'group',
left: '25%',
top: '36%',
bounding: 'raw',
children: [
{
type: 'text',
style: {
text: this.chartData.satisfaction,
fontSize: 24,
fill: '#333333', //文字的颜色
textVerticalAlign: 'middle',
textAlign: 'center',
},
},
],
},
{
type: 'group',
left: '25%',
top: '46%',
bounding: 'raw',
children: [
{
type: 'text',
style: {
text: '满意度',
fontSize: 14,
fill: '#333333', //文字的颜色
textVerticalAlign: 'middle',
textAlign: 'center',
},
},
],
},
],
calculable: true,
series: [
{
name: '企业类型',
type: 'pie',
radius: ['42%', '70%'], //饼图的半径，数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。可以将内半径设大显示成圆环图, 设置内半径和外半径，形成环状
center: ['25%', '40%'], //饼图的中心(圆心)坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。这里的center一旦设置, 则 graphic/legend 里的内容位置也要相应进行调整
roseType: 'radius',
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: true,
},
},
emphasis: {
shadowColor: 'rgba(4, 116, 0, 0.3)',
shadowBlur: 10,
// label: {
// show: true,
// },
},
},
data: this.pieData,
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
window.addEventListener('resize', function () {
//浏览器大小调整echarts随之改变
myChart.resize()
})
},
},
}
script>
页面中调用组件：
<template>
<el-row :gutter="20">
<el-col :span="8">
<DoughnutChart :chartData="chartData_1" />
el-col>
<el-col :span="8">
<DoughnutChart :chartData="chartData_2" />
el-col>
<el-col :span="8">
<DoughnutChart :chartData="chartData_3" />
el-col>
el-row>
template>
<script>
import DoughnutChart from './components/doughnutChart.vue'
export default {
components: {
DoughnutChart,
},
data() {
return {
chartData_1: {},
chartData_2: {},
chartData_3: {},
}
},
created() {
this.chartData_1 = {
pieData: [
{
value: 113,
name: '5.0分',
},
{
value: 101,
name: '4.0分',
},
{
value: 89,
name: '3.0分',
},
{
value: 82,
name: '2.0分',
},
{
value: 35,
name: '1.0分',
},
],
pieTitle: '服务响应时效',
satisfaction: '90%',
}
this.chartData_2 = {
pieData: [
{
value: 113,
name: '5.0分',
},
{
value: 101,
name: '4.0分',
},
{
value: 89,
name: '3.0分',
},
{
value: 82,
name: '2.0分',
},
{
value: 35,
name: '1.0分',
},
],
pieTitle: '服务人员态度',
satisfaction: '80%',
}
this.chartData_3 = {
pieData: [
{
value: 113,
name: '5.0分',
},
{
value: 101,
name: '4.0分',
},
{
value: 89,
name: '3.0分',
},
{
value: 82,
name: '2.0分',
},
{
value: 35,
name: '1.0分',
},
],
pieTitle: '处理方式',
satisfaction: '78%',
}
},
}
script>
<style lang="scss" scoped>
style>