记录一下用echarts写的饼图,echarts封装成vue组件,并且自适应屏幕大小,防止以后再写的时候还要去百度

<template>
  <div class="chart_container">
    <div :id="id" class="chartPie"></div>
  </div>
</template>

<script>
// 生成一个 id 值给标签,目的是为了当多次使用组件防止id重复
const uid = function () {
  return new Date().getTime()
}
import { getAction } from '@/api/manage'
export default {
  name: 'HomeEcharts',
  props: {
    echartsItem: {
      required: true,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {
      // 图表id
      id: null,
      //  图表实例
      chartPie: null,
      url: {
        echartsUrl: '',
      },
    }
  },
  created() {
    // 生成一个 id 值给标签,目的是为了当多次使用组件防止id重复
    this.id = uid()
    // 获取图表数据Url
    this.url.echartsUrl = this.echartsItem.urlAddress
  },
  mounted() {
    this.initData()
    this.drawCharts()
  },
  methods: {
    drawPieChart() {
      // 创建echarts图表实例
      // devicePixelRatio canvas像素比,提高清晰度
      let chartPie = this.$echarts.init(document.getElementById(this.id), null, { devicePixelRatio: 2.5 })
      // 图表自适应
      window.addEventListener('resize', () => {
        chartPie.resize()
      })
      chartPie.setOption({
        tooltip: {
          trigger: 'item',
          // 显示百分比
          // formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        //分类条形符
        legend: {
          orient: 'vertical',
          // 位置
          x: 'right',
          y: 'center',
          //图案大小
          itemHeight: 15,
          itemWidth: 13,
          // 间距大小
          itemGap: 10,
        },
        //饼状图类型以及数据源
        series: [
          {
            type: 'pie',
            // 饼图大小
            radius: '70%',
            // 防止标签重叠
            avoidLabelOverlap: true,
            // label显示在饼图里面
            label: {
              position: 'inside',
              fontSize: 11,
              // 格式化要显示的内容
              formatter: '{c}',
            },
            // 去掉折线
            labelLine: {
              show: false,
            },
            // 饼图位置
            center: ['37%', '45%'],
            // 数据源
            data: [],
            //设置饼状图扇形区域的样式
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
      this.chartPie = chartPie
    },
    //动态获取饼状图的数据
    async initData() {
      this.load()
      if (!this.url.echartsUrl) {
        this.$message.error('请检查报表地址是否存在')
      } else {
        getAction(this.url.echartsUrl).then((res) => {
          if (res.success) {
            this.hideLoad()
            const data = res.result
            // 注入数据
            this.chartPie.setOption({
              series: [
                {
                  data: data,
                },
              ],
            })
          } else {
            this.$message.error(res.message)
            this.hideLoad()
          }
        })
      }
    },
    //调用 showLoading 方法显示
    load() {
      let myChart = this.$echarts.init(document.getElementById(this.id))
      myChart.showLoading({
        text: '数据加载中...',
        maskColor: 'rgba(255, 255, 255, 1)', //加载的背景颜色
        zlevel: 0,
      })
    },
    //调用 hideLoading 方法隐藏加载动画。
    hideLoad() {
      let myChart = this.$echarts.init(document.getElementById(this.id))
      myChart.hideLoading()
    },
    // 调用 绘制图表
    drawCharts() {
      this.drawPieChart()
    },
  },
  watch: {},
}
</script>

<style lang="less" scoped>
.chart_container {
  width: 100%;
  height: calc(100% - 26px);
  .chartPie {
    width: 100%;
    height: 100%;
  }
}
</style>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue封装echarts饼图组件可以参考以下内容。 首先,需要引入echarts组件的使用参考,可以参考这篇博客文章来学习如何使用echarts组件进行饼图封装。 其次,在Vue的页面中使用<chart>标签来放置echarts饼图组件。在data()方法中定义extraOption和seriesData,这两个参数用来配置echarts饼图的选项和数据。在echarts组件的初始化中,需要将extraOption和seriesData赋值为原始的配置选项和系列数据。 在js文件的default_option中,可以定义一些基本的配置内容,如标题、图例、提示框、坐标轴等。 最后,导出这些配置项供饼图组件使用。通过以上的步骤,就可以对Vue进行echarts饼图组件封装了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue实现 【echarts中 “9种” Pie饼图图例】的组件封装及调用](https://blog.csdn.net/weixin_50450473/article/details/122424201)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue中使用echarts进行封装使用,提高开发效率](https://blog.csdn.net/weixin_46002223/article/details/131274952)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值