vue---echarts环形图

1、完整代码直接可以cv

javascript 复制代码

<template>
  <div id="main1"></div>
</template>

<script>
import * as echarts from 'echarts';
// import { mapState } from 'vuex';
// import { Alarm_Device } from '../utils/api.js';
export default {
  name: 'PieChart',

  data() {
    return {
      chart: null,
      data: [
        { value: 1048, name: '人体探测器', itemStyle: { color: '#4f7ff7' } },
        { value: 262, name: '生命体征探测器', itemStyle: { color: '#be71f2' } },
        { value: 210, name: '防摔倒探测器', itemStyle: { color: '#7586f5' } },
        { value: 140, name: '智能床垫', itemStyle: { color: '#6ee497' } },
        { value: 90, name: '智能手表', itemStyle: { color: '#4ebfff' } }
      ]
    };
  },
  computed: {
    // ...mapState(['login']),
  },
  mounted() {
    this.initChart();
    this.registerUser()
  },

  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },

  methods: {


    getItemStyleByName(name) {
      // 根据设备名称返回对应的颜色
      const colorMap = {
        '人体探测器': '#4f7ff7',
        '生命体征探测器': '#be71f2',
        '防摔倒探测器': '#7586f5',
        '智能床垫': '#6ee497',
        '智能手表': '#4ebfff'
      };
      return { color: colorMap[name] || '#ffffff' }; // 如果名称未找到，则默认为白色
    },

    initChart() {
      const chartDom = document.getElementById('main1');
      this.chart = echarts.init(chartDom);

      const options = this.getChartOptions();
      this.chart.setOption(options);
    },

    getChartOptions() {
      const total = this.data.reduce((sum, item) => sum + item.value, 0);
      const dataWithPercentage = this.data.map(item => ({
        value: item.value,
        name: item.name,
        percentage: `${(item.value / total * 100).toFixed(1)}%`,
        itemStyle: item.itemStyle
      }));
      return {
        title: {
          text: '总数量',
          subtext: '100%',
          left: 'center',
          top: '40%',
          left: '29%',
          textAlign: 'center',
          textStyle: {
            fontSize: 18,
            fontWeight: 'bold',
            color: '#ffffff'
          },
          subtextStyle: {
            fontSize: 17,
            color: '#ffffff'
          }
        },
        legend: {
          orient: 'vertical',
          right: '16%',
          top: 'center',
          textStyle: {
            color: '#fff',  // 图例文字颜色
            fontSize: 12,   // 图例文字大小
          },
          formatter: (name) => {
            const item = dataWithPercentage.find(d => d.name === name);
            return item ? `${item.name} ${item.percentage}` : name;
          },
        },
        tooltip: {
          trigger: 'item',
        },
        label: {
          show: true,
          color: '#fff',  // 设置文字颜色为白色
          position: 'outside',
          formatter: ({ data }) => `${data.percentage}` // 只显示百分比
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold',
            color: '#fff'  // 确保在强调状态下文字依然为白色
          },
        },
        labelLine: {
          show: true,
          lineStyle: {
            color: '#fff'  // 设置指引线的颜色为白色
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['30%', '50%'], // 将中心位置设置为垂直和水平的中点
            data: dataWithPercentage,
            // 移除startAngle和endAngle，以显示完整的圆形
          },
        ],
      };
    },
  },
};
</script>

<style scoped>
#main1 {
  width: 560px;
  height: 180px;
}
</style>

2、初始化

javascript 复制代码

initChart() {
  // 获取 DOM 元素，通过其 ID 获取到的元素将作为 ECharts 实例的容器
  const chartDom = document.getElementById('main1');
  
  // 初始化 ECharts 实例，传入上面获取的 DOM 元素
  this.chart = echarts.init(chartDom);

  // 获取图表的配置项，这些配置项用于定义图表的类型、数据、样式等
  const options = this.getChartOptions();
  
  // 设置图表的配置项
  // 这一步将配置项应用到 ECharts 实例中，渲染出图表
  this.chart.setOption(options);
}

所有的基本上都是先获取容器盒子，然后初始化echarts,最后配置options

3、配置解释

javascript 复制代码

getChartOptions() {
  // 计算数据总量，用于计算百分比
  const total = this.data.reduce((sum, item) => sum + item.value, 0);

  // 为每个数据项计算百分比，并保留原有的 itemStyle
  const dataWithPercentage = this.data.map(item => ({
    value: item.value,
    name: item.name,
    percentage: `${(item.value / total * 100).toFixed(1)}%`, // 计算并格式化百分比
    itemStyle: item.itemStyle // 保留原有的样式
  }));

  return {
    // 图表标题配置
    title: {
      text: '总数量', // 主标题文本
      subtext: '100%', // 副标题文本
      left: 'center', // 主标题水平居中
      top: '40%', // 主标题垂直位置
      left: '29%', // 主标题水平位置
      textAlign: 'center', // 主标题文本对齐方式
      textStyle: {
        fontSize: 18, // 主标题字体大小
        fontWeight: 'bold', // 主标题字体粗细
        color: '#ffffff' // 主标题字体颜色
      },
      subtextStyle: {
        fontSize: 17, // 副标题字体大小
        color: '#ffffff' // 副标题字体颜色
      }
    },
    // 图例配置
    legend: {
      orient: 'vertical', // 图例垂直排列
      right: '16%', // 图例水平位置
      top: 'center', // 图例垂直居中
      textStyle: {
        color: '#fff',  // 图例文字颜色
        fontSize: 12,   // 图例文字大小
      },
      // 格式化图例文字，显示名称和百分比
      formatter: (name) => {
        const item = dataWithPercentage.find(d => d.name === name);
        return item ? `${item.name} ${item.percentage}` : name;
      },
    },
    // 提示框配置
    tooltip: {
      trigger: 'item', // 鼠标悬停在项上触发提示框
    },
    // 标签配置
    label: {
      show: true, // 显示标签
      color: '#fff',  // 标签文字颜色
      position: 'outside', // 标签位置在图形外部
      formatter: ({ data }) => `${data.percentage}` // 标签只显示百分比
    },
    // 高亮显示配置
    emphasis: {
      label: {
        show: true, // 高亮时显示标签
        fontSize: 20, // 高亮时标签字体大小
        fontWeight: 'bold', // 高亮时标签字体粗细
        color: '#fff'  // 高亮时标签字体颜色
      },
    },
    // 标签线配置
    labelLine: {
      show: true, // 显示标签线
      lineStyle: {
        color: '#fff'  // 标签线颜色
      }
    },
    // 系列数据配置
    series: [
      {
        name: '', // 系列名称
        type: 'pie', // 图表类型为饼图
        radius: ['40%', '70%'], // 饼图的半径范围，内环到外环
        center: ['30%', '50%'], // 饼图中心位置，水平和垂直的百分比位置
        data: dataWithPercentage, // 使用带有百分比的数据
        // 移除 startAngle 和 endAngle 使饼图显示完整的圆形
      },
    ],
  };
}