首页 > 其他分享 >vue---echarts环形图

vue---echarts环形图

时间:2024-08-21 16:55:10浏览次数:11  
标签:vue const name color value --- item data echarts

1、完整代码直接可以cv 

<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、初始化

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、配置解释

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 使饼图显示完整的圆形
      },
    ],
  };
}

标签:vue,const,name,color,value,---,item,data,echarts
From: https://blog.csdn.net/apple_70049717/article/details/141397486

相关文章

  • 前端数据持久化——Vuex+LocalStorage
    VuexVueX详解_组合式vuex-CSDN博客 LocalStorageLocalStorage是一种WebAPI,它允许网站在用户的本地浏览器中存储和检索数据,而不是将数据存储在服务器上。以下是LocalStorage的详细解析:一、LocalStorage的基本特点本地存储:LocalStorage存储的数据保存在用户的浏览器中,不......
  • VUE主题切换
    Vue.use(Vuex)conststore=newVuex.Store({ state:{ "theme":"theme-red", }, mutations:{ setTheme(state,theme){ state.theme=theme }, }, actions:{ setTheme:({ commit, state },theme)=>{ //获取主题配......
  • jmeter压测组件bzm-Arrivals Thread Group使用Jenkins运行配置
    jmeter脚本设置Jenkins设置运行代码设置cd/home/jmeterWorkplace/performceTps/script/home/app/apache-jmeter-5.4.3/bin/jmeter-n-tjenkins_test.jmx-Jtarget_rate=${target_rate}-Jramp_up_time=${ramp_up_time}-Jramp_up_step_count=${ramp_up_step_count}-Jh......
  • 一门多范式的编程语言Scala学习的第二天-函数的使用
    2.12scala中的函数式编程*scala中的函数式编程**面向对象编程:将对象当作参数一样传来传去*1、对象可以当作方法参数传递*2、对象也可以当作方法的返回值返回*当看到类,抽象类,接口的时候,今后无论是参数类型还是返回值类型,都需要提供对应的实现类对象**面向函数式编程......
  • WebDriver API剖析----元素、鼠标、键盘的操作
    一、元素的操作1、清除元素的内容clear()方法用于清除元素中已有的内容。fromseleniumimportwebdriverfromtimeimportsleepfromselenium.webdriver.common.byimportBydriver=webdriver.Firefox()driver.get("https://www.baidu.com")driver.find_element(......
  • python环境配置问题-python+pysimpleGUI
    大家好,今天接到一个客户需求,帮忙配置pycharm后,代码需要可以正常运行用户需求如下:安装库:python环境/pysimpleGUI跑通代码:环境太复杂,需要清理环境后重新配置客户的项目先卸载那些冗余、冲突的Python版本 ,重新配置新环境代码跑通!总结一下客户项目并不复杂,只是自己......
  • (4-7-01)文生图大模型实操:基于深度学习的图文匹配系统(1)工具类
    4.7 跨模态配对实战:基于深度学习的图文匹配系统本项目旨在构建一个多模态学习系统,专注于处理图像和文本数据的配对任务,主要基于CUHK-PEDES数据集。本项目实现了多种深度学习模型,包括LSTM、MobileNetV1和ResNet,以分别处理文本和图像特征的提取与融合。通过这些模型的结合,系......
  • vue3中script标签的setup实现原理
    概述当vue3新建组件时,我们有两种选择选项式和组合式,如下所示传统方式<script>import{ref}from"vue";exportdefault{setup(){constcount=ref(0);consthandleClick=()=>{count.value++;};return{count,handleClick......
  • 整数排序(排序-基本题)【希冀】
    【问题描述】从标准输入中输入一组互不相同的整数(个数不超过100)及排序方式,按照从小到大排序,输出按某种算法排序的结果及元素的比较次数。说明:排序方式为一个1~5的整数,分别表示:1:选择排序,比较次数是指选择未排序部分的最小元素时的比较次数。2:冒泡排序,比较次数是指相邻元素的......
  • springboot+vue服装搭配推荐系统【程序+论文+开题】-计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着电子商务的蓬勃发展和个性化消费趋势的兴起,服装行业正经历着前所未有的变革。在海量商品面前,消费者往往面临选择困难,尤其是在服装搭配方面,如何根据个人喜好、身形特点以及场合需求快速找到最合适的搭配方案,成为众多消费者的迫切需......