echarts 饼状图

实现效果

请添加图片描述

难题1 中间换行 \n
解决方法formatter:“{a}\n{c}”

难题2 中间设置不同的样式
解决方法

		emphasis: {
            label: {
              formatter: (param) => {
                let info = param.data;
                let str = `{count|${info.value}}\n{train|${info.name}}`; //这里对不同的内容进行标识 a,b,或者可以随便自己起个别的名字
                return str;
              },
              rich: { //在rich中对两个标识进行样式修改
                count: {
                  fontSize: 24
                },
                train: {
                  fontSize: 12,
                  opacity: 0.6
                }
              },
              show: true,
              fontSize: '24',

              fontFamily: 'PangMenZhengDao',
              color: '#B0E1FF',
            }
          },

难题3 设置与原本不同的颜色
解决方法 itemStyle

itemStyle: {
   color: param => param.data.color // color自己定义的字段
 }

难题4左侧与默认不一样 自定义文字
解决方法
参考链接https://blog.csdn.net/YPJMFC/article/details/78979319

	// 总揽
      legend: {
        orient: 'vertical',
        right: 11,
        top: 0,
        itemWidth: 9,
        itemHeight: 3,
        itemGap: 12, // 修改间距
        textStyle: {
          color: '#B0E1FF', 
          fontSize: 16,
          rich: { //在rich中对两个标识进行样式修改
            train: {
              opacity: 0.8,
              padding: [0, 16, 0, 8], // 修改文字和图标距离
            },
            rate: {
              fontWeight: 'bold'
            }
          },
        },
        formatter: (name:string) => {
          var rate;
          for (var i = 0; i < this.errorData.length; i++) {
            if (this.errorData[i].name === name) {
              rate = this.errorData[i].rate;
            }
          }
          var arr = [
            '{train|'+name+'}{rate|'+(rate*100).toFixed(2)+'%}'
          ]
          return arr.join('\n')
        },
      },

难题5 想要实现中间总是显示(总数)的功能
解决办法一:
需要绑定鼠标滑入和滑出 动态的设置title的内容
借鉴 https://blog.csdn.net/Kiruthika/article/details/124442303

 private mouseover (){
    (this.$refs.echarts as Echarts).chart.setOption({
      title: {
        text: ""
      }
    })
  }

  private mouseout (){
    (this.$refs.echarts as Echarts).chart.setOption({
      title: {
        text: this.total
      }
    })
  }

因为第一种方法 有些时候会导致不局中
解决办法二:(推荐)
不使用title设置,直接使用label设置,但是在这个过程中遇到一个问题就是 饼图 label 居中的时候会重叠

		label: {
            show: true,
            position: 'center',
            formatter: () => {
              return this.total
            },
            textStyle: {
              color: '#B0E1FF',
              fontSize: 24,
              fontWeight: 600
            }
          },

后来想到使用echarts的事件监听 设置label。成功解决

	<echarts
      ref="echarts"
      :option="option"
      @mouseover="mouseover"
      @mouseout="mouseout"
    />

 private mouseover (params:any) {
    (this.$refs.echarts as Echarts).chart.setOption({
      series: {
        label:{show: false}
      }
    });
  }

  private mouseout () {
    (this.$refs.echarts as Echarts).chart.setOption({
      series: {
        label:{
          show: true
        }
      }
    });
  }

以上总代码

private get option(): ECOption|any {
    return {
      title: {
      	show:false
        // show: true,
        // text: this.total || '',
        // 具体放置位置
        // left: "20%",
        // top: "center",
        // textStyle: {
         //  color: '#B0E1FF', 
         //  fontSize: 24,
        //   fontWeight: 600,
       //  },
      },
      // 总揽
      legend: {
        orient: 'vertical',
        right: '5%',
        top: 0,
        itemWidth: 9,
        itemHeight: 3,
        itemGap: 12, // 修改间距
        textStyle: {
          color: '#B0E1FF', 
          fontSize: 16,
          rich: { //在rich中对两个标识进行样式修改
            train: {
              opacity: 0.8,
              padding: [0, 16, 0, 8], // 修改文字和图标距离
            },
            rate: {
              fontWeight: 'bold'
            }
          },
        },
        formatter: (name:string) => {
          let rate = this.errorData.filter(item=>item.name === name)[0].rate
          let arr = [
            '{train|'+name+'}{rate|'+(rate*100).toFixed(2)+'%}'
          ]
          return arr.join('\n')
        },
      },
      // 饼状图
      series: [
        {
          type: 'pie',
          radius: ['60%', '90%'], // 外/内大小
          center: ['25%', '50%'], // 距离左/上 的距离
          avoidLabelOverlap: false,
          // label: {
            //  show: false,
            //  position: 'center',
          //  },
          label: {
            show: true,
            position: 'center',
            formatter: () => {
              return this.total
            },
            textStyle: {
              color: '#B0E1FF',
              fontSize: 24,
              fontWeight: 600
            }
          },
          emphasis: {
            label: {
              formatter: (param) => {
                let info = param.data;
                let str = `{count|${info.value}}\n{train|${info.name}}`; //这里对不同的内容进行标识 a,b,或者可以随便自己起个别的名字
                return str;
              },
              rich: { //在rich中对两个标识进行样式修改
                count: {
                  fontSize: 24
                },
                train: {
                  fontSize: 12,
                  opacity: 0.5
                }
              },
              show: true,
              fontSize: '24',
              fontFamily: 'PangMenZhengDao',
              color: '#B0E1FF',
            }
          },
          labelLine: {
            show: false
          },
          data: this.errorData,
          itemStyle: {
            color: param => param.data.color
          }
        }
      ]
    };
  }

  private get total():number{
    return this.data[this.activeTab].reduce((total,cur)=>{
      return cur['faults_count'] + total;
    },0)
  }

  private get errorData(){
    if(this.data[this.activeTab]){
      return this.data[this.activeTab].map((item,index)=>{
        return {
          value: item.faults_count,
          name: item.train_number,
          rate: item.faults_rate,
          color: this.defaultColorArray[index],
          icon: 'rect'
        }
      })
    }
  }

   private mouseover (params:any) {
    (this.$refs.echarts as Echarts).chart.setOption({
      series: {
        label:{show: false}
      }
    });
  }

  private mouseout () {
    (this.$refs.echarts as Echarts).chart.setOption({
      series: {
        label:{
          show: true
        }
      }
    });
  }

在组件中

const events = ['legendselectchanged',
  'legendselected',
  'legendunselected',
  'legendscroll',
  'datazoom',
  'datarangeselected',
  'timelinechanged',
  'timelineplaychanged',
  'restore',
  'dataviewchanged',
  'magictypechanged',
  'geoselectchanged',
  'geoselected',
  'geounselected',
  'pieselectchanged',
  'pieselected',
  'pieunselected',
  'mapselectchanged',
  'mapselected',
  'mapunselected',
  'axisareaselected',
  'focusnodeadjacency',
  'unfocusnodeadjacency',
  'brush',
  'brushselected',
  'rendered',
  'finished',
  'click',
  'dblclick',
  'mouseover',
  'mouseout',
  'highlight',
  'downplay',
  'mousemove',
  'mousedown',
  'mouseup',
  'globalout',
  'contextmenu'];


	events.forEach(event => {
      this.chart.on(event, (params:any)=>{
        this.$emit(event,params) // //这里的params是图表节点的数据
      });
    });

想让其取消放大的动画
hoverAnimation:false

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts饼状图是一种常见的图表类型,可以用来展示数据的占比关系。在ECharts中,可以通过设置series中的type为'pie'来创建饼状图饼状图的数据可以通过设置series中的data属性来指定,每个数据项包括value和name两个属性,分别表示数据的值和名称。例如,可以使用以下代码创建一个简单的饼状图: ```javascript var option = { series: \[{ type: 'pie', data: \[ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 548, name: '搜索引擎' } \] }\] }; ``` 除了基本的饼状图ECharts还支持南丁格尔图的展示方式。南丁格尔图是一种特殊的饼状图,可以通过将series中的roseType值设为'area'来实现。南丁格尔图的每个扇区的面积大小表示数据的大小,而不仅仅是角度的大小。例如,可以使用以下代码创建一个南丁格尔图: ```javascript var option = { series: \[{ type: 'pie', data: \[ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 548, name: '搜索引擎' } \], roseType: 'area' }\] }; ``` 以上是创建饼状图和南丁格尔图的基本配置,你可以根据自己的需求进行进一步的配置和美化。 #### 引用[.reference_title] - *1* *2* *3* [echarts饼状图、圆环图、南丁格尔图、散点图、数据转换、](https://blog.csdn.net/m0_68618659/article/details/126472464)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值