Echarts 环形图自定义配置

最新推荐文章于 2026-03-22 00:18:24 发布

原创

最新推荐文章于 2026-03-22 00:18:24 发布 · 1.2w 阅读

标签

#echarts #html #javascript

本文详细展示了如何使用ECharts库实现圆环图，并定制图例样式，使其与圆环保持水平居中，图例文字以圆形图标和百分比形式显示。包括设置渐变色、圆环内文字定位和hover效果。

业务需求实现一个圆环图，看着简单，做起来卡卡的……

效果图：
在这里插入图片描述
步骤：
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,
              colo