vue echarts饼图文字和图形同颜色

最新推荐文章于 2024-09-09 15:44:32 发布

新宇最优秀

最新推荐文章于 2024-09-09 15:44:32 发布

阅读量3.6k

点赞数 1

分类专栏： echarts 文章标签： vue.js

本文链接：https://blog.csdn.net/tendernessxy/article/details/115674026

版权

echarts 专栏收录该内容

18 篇文章

订阅专栏

本文将介绍如何在Vue.js项目中使用ECharts库，创建饼图并使图表上的文字与对应图形颜色保持一致，详细阐述配置过程及关键代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：
在这里插入图片描述

<template>
  <div class="Distribution">
    <div id="DistributionChart" style="flex: 1; height: 288px; margin-top: -20px; padding: 0 20px 0 0"></div>
  </div>
</template>
<script>
import { getProposedInvestments } from '@/api/government';
const colors = [
  'rgb(1,231,225)',
  'rgb(229,88,234)',
  'rgb(160,81,235)',
  'rgb(42,178,116)',
  'rgb(233,156,187)',
  'rgb(241,213,100)',
  'rgb(116,216,243)',
  'rgb(55,182,255)',
  'rgb(1,231,225)',
  'rgb(229,88,234)',
  'rgb(160,81,235)',
  'rgb(42,178,116)',
  'rgb(233,156,187)',
  'rgb(241,213,100)',
  'rgb(116,216,243)',
  'rgb(55,182,255)',
  'rgb(1,231,225)',
  'rgb(229,88,234)',
  'rgb(160,81,235)',
  'rgb(42,178,116)',
  'rgb(233,156,187)',
  'rgb(241,213,100)',
  'rgb(116,216,243)',
  'rgb(55,182,255)',
  'rgb(1,231,225)',
  'rgb(229,88,234)',
  'rgb(160,81,235)',
  'rgb(42,178,116)',
  'rgb(233,156,187)',
  'rgb(241,213,100)',
  'rgb(116,216,243)',
  'rgb(55,182,255)',
  'rgb(1,231,225)',
  'rgb(229,88,234)',
  'rgb(160,81,235)',
  'rgb(42,178,116)',
  'rgb(233,156,187)',
  'rgb(241,213,100)',
  'rgb(116,216,243)',
  'rgb(55,182,255)',
];

export default {
  data() {
    return {
      investmentsCateRateData: [],
    };
  },
  mounted() {
    this.getProposedInvestments();
  },
  methods: {
    initMap() {
      var myChart = this.$echarts.init(document.getElementById('DistributionChart'));
      const option = {
        tooltip: {
          show: true,
          trigger: 'item',
        },
        color: colors,
        series: [
          {
            type: 'pie',
            radius: ['30%', '55%'],
            label: {
              show: true,
              fontFamily: 'TencentSans',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold',
              },
            },
            data: this.investmentsCateRateData,
          },
        ],
      };
      myChart.setOption(option);
    },
    getProposedInvestments() {
      getProposedInvestments().then((res) => {
        const { status, data } = res;
        const { proposedInvestmentsCateRate } = JSON.parse(data);
        if (status === 200) {
        // this.investmentsCateRateData=[{label: {color: "rgb(1,231,225)"}
		// 			name: "农业：7.66%"
		// 			value: "7.66"}]
          this.investmentsCateRateData = proposedInvestmentsCateRate.map((item, index) => {
            let cateData = {
              name: item.category + '：' + item.rate,
              value: item.rate.slice(0, item.rate.length - 1),
              label: { color: colors[index] },
            };
            return cateData;
          });
          this.initMap();
        }
      });
    },
  },
};
</script>