隐藏饼图的legend，重写legend列表。

已于 2024-06-04 10:55:13 修改
阅读量424 收藏
点赞数 1
文章标签： 前端 javascript css
于 2024-06-03 13:48:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42080594/article/details/139412321
版权

因为要实现的饼图效果较复杂，所以，需要重新写列表。

点击右侧列表的圆点，实现隐藏左侧饼图相应环状。

<template>
  <div class="index_div">
    <a-spin :spinning="aLoading">
      <scalescreen
        :width="1920"
        :height="1080"
        :selfAdaption="true"
        class="scale-wrap"
      >
                  <div class="pieMulBox">
                    <div class="pieMulChart">
                      <div class="pie_mul_box">
                        <div class="innPieBg">
                          <div class="number">{{curStorageRate}}</div>
                        </div>
                        <div class="pieChart">
                          <pie_mul ref="pie_mul" />
                        </div>
                      </div>
                      <p style="margin-top: 17px;">当前系统访问率</p>
                    </div>

                    <div class="pieMulMsg">
                      <ul>
                        <li v-for="(item,index) in pieMulData" :key="index" @click="clickPiechart(item, index)">
                          <span>{{item.label}}</span><strong>{{item.value}}</strong>
                        </li>
                      </ul>
                    </div>

                  </div>
              
      </scalescreen>
    </a-spin>
  </div>
</template>

<script>
  import { deepClone } from '@/utils/util'
  import pie_mul from './Analysis/pie_mul'
  import scalescreen from './Analysis/scale-screen.vue'
  import { energyStateAnalysis } from '@/api/analysis/index'

  
  export default {
    name: "Analysis",
    components: {
      pie_mul,
      scalescreen
    },
    data() {
      return {
        aLoading: true,
        pieMulData: [],
        hidePieData: [], // 点击隐藏的值
        showPieData: [] // 点击显示的值
         
      }
    },
    created() {
      this.getEnergyStateAnalysis()
      setTimeout(()=>{
        this.aLoading = false
      }, 3000)
    },
    methods: {
      
      getEnergyStateAnalysis() {
        energyStateAnalysis().then((res) => {
          // console.log('energyStateAnalysis', res)
          if (res.success) {
            let data = res.result
            this.curStorageRate = data.curStorageRate

            // let dataList = [
            //   { value: 62.2, label: "小1" },
            //   { value: 17.3, label: "基1" },
            //   { value: 6.2, label: "移1" },
            //   { value: 9.1, label: "农1" },
            //   { value: 3.2, label: "三1" },
            // ];
            // this.pieMulData = dataList
            // this.$refs.pie_mul.draw(dataList);

            if(data.list && data.list.length > 0) {
              let dataList = []
              this.$nextTick(() => {
                data.list.map(v=>{
                  dataList.push({ value: v.cnt, label: v.itemName })
                });
                this.pieMulData = dataList
                this.showPieData = deepClone(dataList)
                this.$refs.pie_mul.draw(dataList);
              })
            }
            
          }
        })
      },
      // 点击饼图旁边的列表，显示和隐藏饼图数据。
      clickPiechart(item, idx) {
        const index = this.hidePieData.indexOf(item.label);
        if (index > -1) {
          this.hidePieData.splice(index, 1);
          this.showPieData[idx] = item
        } else {
          this.hidePieData.push(item.label);
          this.showPieData[idx] = {}
        }
        this.$refs.pie_mul.draw(this.showPieData);
      }, 

    }
  }
</script>

<style scoped lang="less">
.index_div {
  margin: -12px -12px 0;
  padding: 12px 12px 0;
  background: #01091D;
}
ul, li {
  list-style: none none outside;
  padding: 0;
  margin-bottom: 0;
} 
.pieMulBox {
        display: flex;
        flex-direction: row;
        padding-left: 12px;
        .pieMulChart {
          text-align: center;
          .pie_mul_box {
            position: relative;
            width: 150px;
            height: 150px;
            border: 3px solid rgba(14, 98, 121, 0.3);
            border-radius: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;

            &::before {
              content: '';
              display: block;
              width: 7px;
              height: 7px;
              background: #3AB9FC;
              border-radius: 1000px;
              position: absolute;
              top: -4px;
              left: 68px;
            }
            &::after {
              content: '';
              display: block;
              width: 7px;
              height: 7px;
              background: #3AB9FC;
              border-radius: 1000px;
              position: absolute;
              bottom: -4px;
              left: 68px;
            }
            .pieChart {
              position: absolute;
              left: 0;
              top: 0;
              right: 0;
              bottom: 0;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .innPieBg {
              width: 93px;
              height: 93px;
              border: 6px solid rgba(14, 98, 121, 0.1);
              border-radius: 1000px;
              position: relative;

              .number {
                font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
                font-weight: normal;
                font-size: 26px;
                color: #FFFFFF;
                line-height: 35px;
                text-align: center;
                font-style: normal;
                position: absolute;
                left: 0;
                top: 21px;
                right: 0;
                bottom: 0;
                z-index: 9;
              }
            }
          }
          p {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: #F0F0F0;
            line-height: 25px;
          }
        }
        .pieMulMsg {
          margin-left: 68px;
          padding-top: 19px;
          ul {
            li {
              position: relative;
              padding-left: 23px;
              padding-bottom: 6px;
              margin-bottom: 12px;

              &::before {
                content: '';
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 1000px;
                position: absolute;
                left: 0;
                top: 6px;
              }

              &::after {
                content: '';
                display: inline-block;
                width: 118px;
                height: 1px;
                background: linear-gradient( 90deg, #0E7FC8 0%, rgba(9,159,216,0.16) 100%);
                box-shadow: 0px 20px 11px 11px rgba(0,21,38,0.01);
                opacity: 0.5;
                position: absolute;
                left: 20px;
                bottom: 0;
              }

              &:nth-child(1)::before { background: linear-gradient( 180deg, #469C94 0%, #6AE6C8 100%) }
              &:nth-child(2)::before { background: linear-gradient( 180deg, #21C5F5 0%, #043748 100%) }
              &:nth-child(3)::before { background: linear-gradient( 180deg, #23A9FF 0%, #0321BD 100%) }
              &:nth-child(4)::before { background: linear-gradient( 180deg, #FF7500 0%, #FF7500 100%) }
              &:nth-child(5)::before { background: linear-gradient( 180deg, #a72a21 0%, #803d37 100%) }
              &:nth-child(6)::before { background: linear-gradient( 180deg, #7b0488 0%, #3c1e69 100%) }
              &:nth-child(7)::before { background: linear-gradient( 180deg, #ff00bf 0%, #651754 100%) }
              span {
                display: inline-block;
                width: 110px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: rgba(255,255,255,0.8);
                line-height: 22px;
              }
              strong {
                font-weight: normal;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 19px;
              }
            }
          }
        }
      }

</style>

echarts的饼图组件：pie_mul.vue 

<template>
  <div class="bg">
    <div id="mulPieChart" style="width: 150px;height:150px;"></div>
  </div>
</template>

<script>
// import * as echarts from 'echarts';

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入图表，图表后缀都为 Chart
// import { LineChart } from 'echarts/charts';
// import { BarChart } from 'echarts/charts';
// import { CustomChart } from 'echarts/charts';
import { PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  // TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  // MarkLineComponent,
  // MarkAreaComponent,
  // MarkPointComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  // TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  // MarkLineComponent,
  // MarkAreaComponent,
  // MarkPointComponent,
  // LineChart,
  // BarChart,
  // CustomChart,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export default {
  data() {
    return {
      status: 'loading',
      loading: true,
      chart: null
    }
  },
  created() {
    
  },
  mounted() {

  },
  beforeDestroy() {

  },
  methods: {
    draw(sourceData) {
      // console.log(sourceData)
      // 基于准备好的dom，初始化echarts实例
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById('mulPieChart'));
      }
      
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            name: '',
            radius: [55, 62],
            legendHoverLink: false,
            avoidLabelOverlap: false,
            selectedOffset: 0,
            padAngle: 2,
            itemStyle: {
              borderRadius: 2
            },
            label: {
              show: true,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: sourceData, 
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    ['#469C94', '#6AE6C8'],
                    ['#21C5F5', '#043748'],
                    ['#23A9FF', '#0321BD'],
                    ['#FF7500', '#FF7500'],
                    ['#a72a21', '#803d37'],
                    ['#7b0488', '#3c1e69'],
                    ['#ff00bf', '#651754'],
                  ];
                  var index = params.dataIndex;
                  return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: colorList[index][0]
                    },
                    {
                      offset: 1,
                      color: colorList[index][1]
                    }
                  ]);
                }
              }
            }
          }
        ]
      }

      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

 scale-screen.vue

<template>
    <div class="screen-wrapper" :class="{'opacity': opacity}" ref="screenWrapper" :style="wrapperStyle">
      <slot></slot>
    </div>
  </template>
  <script>

  /**
   * 防抖函数
   * @param {T} fn
   * @param {number} delay
   * @return
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      timer = setTimeout(
        () => {
          typeof fn === "function" && fn.apply(null, args);
          clearTimeout(timer);
        },
        delay > 0 ? delay : 100
      );
    };
  }
  
  export default {
    name: "VScaleScreen",
    props: {
      width: {
        type: [String, Number],
        default: 1920,
      },
      height: {
        type: [String, Number],
        default: 1080,
      },
      fullScreen: {
        type: Boolean,
        default: false,
      },
      autoScale: {
        type: [Object, Boolean],
        default: true,
      },
      selfAdaption: {
        type: Boolean,
        default: true,
      },
      delay: {
        type: Number,
        default: 500,
      },
      boxStyle: {
        type: Object,
        default: () => ({}),
      },
      wrapperStyle: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        currentWidth: 0,
        currentHeight: 0,
        originalWidth: 0,
        originalHeight: 0,
        onResize: null,
        observer: null,
        opacity: false
      };
    },
    watch: {
      selfAdaption(val) {
        if (val) {
          this.resize();
          this.addListener();
        } else {
          this.clearListener();
          this.clearStyle();
        }
      },
    },
    computed: {
      screenWrapper() {
        return this.$refs["screenWrapper"];
      },
    },
    methods: {
      initSize() {
        return new Promise((resolve, reject) => {
          // console.log("初始化样式");
          //给父元素设置 overflow:hidden
          this.screenWrapper.parentNode.style.overflow = "hidden";
          this.screenWrapper.parentNode.scrollLeft = 0;
          this.screenWrapper.parentNode.scrollTop = 0;
  
          this.$nextTick(() => {
            // region 获取大屏真实尺寸
            if (this.width && this.height) {
              this.currentWidth = this.width;
              this.currentHeight = this.height;
            } else {
              this.currentWidth = this.screenWrapper.clientWidth;
              this.currentHeight = this.screenWrapper.clientHeight;
            }
            // endregion
            // region 获取画布尺寸
            if (!this.originalHeight || !this.originalWidth) {
              this.originalWidth = window.screen.width;
              this.originalHeight = window.screen.height;
            }
            // endregion
            resolve();
          });
        });
      },
      updateSize() {
        if (this.currentWidth && this.currentHeight) {
          this.screenWrapper.style.width = `${this.currentWidth}px`;
          this.screenWrapper.style.height = `${this.currentHeight}px`;
        } else {
          this.screenWrapper.style.width = `${this.originalWidth}px`;
          this.screenWrapper.style.height = `${this.originalHeight}px`;
        }
      },
      handleAutoScale(scale) {
        if (!this.autoScale) return;
        const screenWrapper = this.screenWrapper;
        const domWidth = screenWrapper.clientWidth;
        const domHeight = screenWrapper.clientHeight;
        const currentWidth = document.body.clientWidth - 232;
        const currentHeight = document.body.clientHeight - 111;
        screenWrapper.style.transform = `scale(${scale},${scale}) `;
        let mx = Math.max((currentWidth - domWidth * scale) / 2, 0);
        let my = Math.max((currentHeight - domHeight * scale) / 2, 0);
        if (typeof this.autoScale === "object") {
          // @ts-ignore
          !this.autoScale.x && (mx = 0);
          // @ts-ignore
          !this.autoScale.y && (my = 0);
        }
        this.screenWrapper.parentNode.style.height = (this.height * scale) + 'px'
        setTimeout(() => {
          this.opacity = true
        }, 500)
      },
      updateScale() {
        const screenWrapper = this.screenWrapper;
        // 获取真实视口尺寸
        const currentWidth = document.body.clientWidth - 232;
        const currentHeight = document.body.clientHeight - 111;
        // 获取大屏最终的宽高onResize
        const realWidth = this.currentWidth || this.originalWidth;
        const realHeight = this.currentHeight || this.originalHeight;
        // 计算缩放比例
        const widthScale = currentWidth / realWidth;
        const heightScale = currentHeight / realHeight;
        // console.log({currentWidth, currentHeight,realWidth,realHeight});
        // 若要铺满全屏，则按照各自比例缩放
        if (this.fullScreen) {
          screenWrapper.style.transform = `scale(${widthScale},${heightScale})`;
          return false;
        }
        // 按照宽高最小比例进行缩放
        const scale = Math.max(widthScale, heightScale);
        this.handleAutoScale(scale);
      },
      initMutationObserver() {
        const screenWrapper = this.screenWrapper;
        const observer = (this.observer = new MutationObserver(() => {
          this.onResize();
        }));
  
        observer.observe(screenWrapper, {
          attributes: true,
          attributeFilter: ["style"],
          attributeOldValue: true,
        });
      },
      clearListener() {
        window.removeEventListener("resize", this.onResize);
      },
      addListener() {
        window.addEventListener("resize", this.onResize);
      },
      clearStyle() {
        const screenWrapper = this.screenWrapper;
        screenWrapper.parentNode.style.overflow = "auto";
        screenWrapper.style = "";
      },
      async resize() {
        if (!this.selfAdaption) {
          return;
        }
        await this.initSize();
        this.updateSize();
        this.updateScale();
      },
    },
    mounted() {
      this.onResize = debounce(() => {
        this.resize();
      }, this.delay);
      this.$nextTick(() => {
        if (this.selfAdaption) {
          this.resize();
          this.addListener();
        }
      });
    },
    beforeDestroy() {
      this.clearListener();
    },
  };
  </script>
  
  <style scoped>
  .screen-box {
    overflow: hidden;
    background-size: 100% 100%;
    background: #000;
    width: 100vw;
    height: 100vh;
  }
  
  .screen-wrapper {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    position: relative;
    overflow: hidden;
    z-index: 100;
    transform-origin: left top;
    opacity: 0;
  }

  .opacity {
    opacity: 1;
  }
  </style>

程序媛之博客
关注
echarts的legend图例的显示与隐藏（legend图例进入页面显示的个数）
m0_63099094的博客
11-07 777
需求要求的图： 【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】 浏览器打开：qq.cn.hn/FTf 免费领取 解决办法： 代码展示： function randomData() { return Math.round(Math.random()*1000); } option = { title: { text: ‘iphone销量’, subtext: ‘纯属虚构’, left: ‘center’ }, tooltip: { trigger: ‘item’
vue实用echart饼图legend显示百分比
热门推荐
ying940718的博客
07-17 1万+
vue使用echart的饼图数据部分展示百分比 效果图 实现源码 option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a...
echart饼状图设置legend属性隐藏标题
徊忆羽菲
03-12 5112
echart饼状图隐藏标题的属性设置左侧显示隐藏标题 左侧显示 option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left',
Chart.js 隐藏legend
小鹰信息技术服务部
10-12 1381
Chart.js，默认会显示legend: 项目中的需求是不需要legend，因此需要隐藏，方法如下： 在options中设置legend的display属性为false即可。 options: { ... legend: { display: false } ... } 效果： 参考： javascript - Removing legend on charts with chart.js v2 - Stack Overflow ...
ECharts饼图图例消失踩的坑
Dreamer
03-11 1241
echats切换数据时图例消失了......
Echarts legend图例配置项 设置位置 显示隐藏
生产队的驴
11-28 1954
【代码】Echarts legend图例配置项 设置位置 显示隐藏。
vue饼图统计_vue实用echart饼图legend显示百分比
weixin_39991305的博客
01-14 1159
vue使用echart的饼图数据部分展示百分比效果图实现源码option = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} {b} : {c} ({d}%)"},legend: {orient: 'vertical', // 布局方式，默认为水平布...
echarts饼图解析html标签,JavaScript使用百度ECharts插件绘制饼图操作示例
weixin_42525005的博客
06-15 734
本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作。分享给大家供大家参考，具体如下：百度ECharts是一款由百度前端团队开发与维护的，基于HTML5的开源JavaScript图表库。E是Enterprise的简称，意思是商业级数据图表。本文简述使用ECharts绘制饼图(Pie Chart)的过程，下图为使用ECharts绘制的饼图实例。首先需要在页面中新建标签，引入符合A...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
weixin_28914371的博客
06-15 1728
饼图中的series有个avoidLabelOverlap属性，avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。当avoidLabelOverlap设置为false时会出现以下情况改为true之后就不会重叠代码如下var option = {tooltip: {trigger: "item",formatter:...
仿随手记的炫酷饼图.zip
04-19
- **PieData**: 将PieDataSet和饼图的描述（Legend）组合在一起，构成完整的饼图数据。 4. **动画效果**： MPAndroidChart支持饼图的入场、出场以及变化动画，可以通过设置AnimationDuration来控制动画时长，增加...
ECharts legend属性 换行字多隐藏
XXXTENTACIONXXXX的博客
05-19 861
【代码】ECharts legend属性 换行字多隐藏。
在echarts中，如何使用复选框代替legend控制显隐
weixin_43301156的博客
03-12 3525
开发过程中遇到了一个问题,需要使用复选框checkbox来代替legend控制数据显示操作,顺便记录一下 效果展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>E...
QML 自定义Legend（点击Legend隐藏/显示）
zjgo007的专栏
04-04 1974
QML ChartView中提供了默认的Legend，可对图例进行一些简单的例如颜色、字体等的设置，但是当需要图例具有个性化的功能时（如单击时隐藏或显示）时，就需要使用自定义的Legend。
解决 《《取消饼图legend点击事件（移动和点击legend时，不隐藏只显示高亮）》》
最新发布
m0_55970822的博客
06-21 283
【代码】解决 《《取消饼图legend点击事件（移动和点击legend时，不隐藏只显示高亮）》》
Echarts 的legend图例的显示与隐藏（legend折线图加载完页面显示的个数）
LW0512的博客
04-21 5590
Echarts图例的显示与隐藏 需求 ：在图表加载的时候，默认只显示部分图例，只要图例显示部分，对应的柱图或者折线图也只显示对应的。点击一个按钮显示剩余的图例，或者点击置灰的图例让恢复显示。 1.默认不展示（对比日期） 2. 点击显示结果： 点击（对比日期）的时候恢复显示 3.代码 legend: { right: 5, top: 10, textStyle: { color: '#fff',
echarts 点击legend只显示当前，隐藏其他
qq_40934617的博客
08-05 5527
当点击一个图例时，取消其他图例，仅显示当前图例
uniapp图表插件uCharts - 如何隐藏饼图的分类信息？- 饼图柱形图分析图图表大全 - uCharts如何使用opts、eopts参数？
Rudon滨海渔村的博客
03-25 6845
效果图 原来 修改后 实现步骤 修改\uni_modules\qiun-data-charts\js_sdk\u-charts\config-echarts.js的262行附近 原来 修改后 代码： "pie": { "color": color, "title": { "text": '' }, "tooltip": { "trigger": 'item' }, "grid": { "top": 40, "bottom":
echarts中legend图例显示隐藏与多选框联动显示其个数
wj的博客
10-27 3950
参考《echarts的legend图例的显示与隐藏（legend图例进入页面显示的个数）》 和 《【echarts踩坑记录】2、复选框+动态隐藏、显示数据》 确认按钮： <div class="dg-dspv-form-foot"><button type="submit">确定</button></div> 多选框： 实现js函数： $(document).ready(function(){ $(".dg-dspv-form-foot").click(f
echarts 饼图 legend
09-11
对于 ECharts 饼图的图例（legend），可以通过配置项中的 `legend` 进行设置。以下是一个简单的示例： ```javascript option = { legend: { data: ['数据一', '数据二', '数据三'] // 图例的数据项 }, series: [ { name: '饼图', type: 'pie', radius: '55%', data: [ { value: 335, name: '数据一' }, { value: 310, name: '数据二' }, { value: 234, name: '数据三' } ] } ] }; ``` 在上述示例中，`legend` 配置项中的 `data` 数组用于指定图例的数据项，每个数据项对应饼图中的一个扇区。你可以根据实际需求修改 `data` 数组中的内容。 此外，ECharts 还提供了许多其他的配置选项，例如调整图例的位置、样式等。你可以根据具体需求参考 [ECharts 官方文档](https://echarts.apache.org/zh/option.html#legend) 获取更详细的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值