图表的提示框,隐藏掉自带的提示

蚂蚁金服:https://g2.antv.vision/zh/examples/case/pie#pie6在这里插入图片描述
鼠标放上去的效果
在这里插入图片描述

隐藏了自带的提示文字,其他表有个formatter字段可以格式化提示文字,但是这个试了不行,然后用了野蛮的方法,给隐藏了,哈哈哈!

/deep/ #DpTotal .g2-tooltip-list {
    display: none;
  }

完整的代码如下:
1,html的

<div id="DpTotal"></div>

2,js代码

initDpTotalChart0() {
        this.DpTotalChart = new Chart({
          container: 'DpTotal',
          autoFit: true,
          height: 375,
        });
      },
      //门急诊处方点评统计
      initDpTotalChart() {
        this.DpTotal.DpTotalData = [
          {
          type: '门诊处方',
          value: 0,
          percent1: '门诊处方:' + '33444' + " ; " + (33444 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
        },
          {
          name: '已点评门诊处方',
          type: '门诊处方',
          value: 22222,
          percent1: '已点评门诊处方:' + '22222' + " ; " + (22222 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
        }, {
          name: '未点评门诊处方',
          type: '门诊处方',
          value: 11222,
          percent1: '未点评门诊处方:' + '11222' + " ; " + (11222 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
        }, 
         {
          type: '急诊处方',
          value: 0,
          percent1: '急诊处方:' + '77774' + " ; " + (77774 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
        },
        {
          name: '已点评急诊处方',
          type: '急诊处方',
          value: 33332,
          percent1: '已点评急诊处方:' + '33332' + " ; " + (33332 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
        }, {
          name: '未点评急诊处方',
          type: '急诊处方',
          value: 44442,
          percent1: '未点评急诊处方:' + '44442' + " ; " + (44442 * 1 / this.DpTotal.MZBlTotal * 1).toFixed(2)* 100 + '%'
        }, ]
        const ds = new DataSet();
        const dv = ds.createView();
        dv.source(this.DpTotal.DpTotalData).transform({
          type: 'percent',
          field: 'value',
          dimension: 'type',
          as: 'percent',
        });

        const colorMap = {
          门诊处方: '#5B8FF9',
          急诊处方: '#F7A127',
        };
        const colorMap2 = {
          已点评门诊处方: '#5CB0FA',
          未点评门诊处方: '#6DDEED',
          已点评急诊处方: '#F7B823',
          未点评急诊处方: '#F7E623',
        };
        this.DpTotalChart.data(dv.rows);
        this.DpTotalChart.legend(false);   配置图例有两种方式 // 关闭图例
        this.DpTotalChart.coordinate('theta', {  //配置坐标系  //theta:一种特殊的极坐标系,半径长度固定,仅仅将数据映射到角度,常用于饼图的绘制。
          radius: 0.5,   //用于极坐标,配置极坐标半径,0-1 范围的数值
          innerRadius: 0.3,   //用于极坐标,极坐标内半径,0 -1 范围的数值
        });
        let data2 =  this.DpTotal.DpTotalData
        this.DpTotalChart.tooltip({
          // showTitle: false,
          // showContent:false,
          showMarkers: false,   //是否渲染 tooltipMarkers。
          title: 'percent1'
        });
        this.DpTotalChart
        .interval()
        .adjust('stack')  //设置数据调整方式。stack(堆起来的意思)
        .position('percent')
        .color('type', (val) => colorMap[val])
        .style({
          stroke: 'white',
          lineWidth: 1,
        })
        //里面圈的文字
        .label('type*value', {  //是将数据值映射到图形的文本上的方法
          offset: -5, //相对数据点的偏移距离。
          style: {  //文本图形属性样式
            fill: 'white',
            shadowBlur: 2,  //阴影模糊
            shadowColor: 'rgba(0, 0, 0, .45)',
          },
        });
        // 辅助文本
        this.DpTotalChart
          .annotation()   //图形标注,Annotation,作为 G2 图表的辅助元素,主要用于在图表上标识额外的标记注解。
          .text({  //辅助文本,指定位置添加文本说明。
            position: ['50%', '50%'],  //定位位置。
            content: '处方总数',  //显示的文本内容。
            style: {
              fontSize: 13,
              fill: '#8c8c8c',
              textAlign: 'center',
            },
            offsetY: -10,
          }).text({
            position: ['50%', '50%'],
            content: this.DpTotal.MZBlTotal + '',
            style: {
              fontSize: 13,
              fill: '#8c8c8c',
              textAlign: 'center',
            },
            offsetY: 10,
          })

        const ds2 = new DataSet();
        const dv2 = ds2.createView();
        dv2.source(this.DpTotal.DpTotalData).transform({
          type: 'percent',
          field: 'value',
          dimension: 'name',
          as: 'percent',
        });
        const outterView = this.DpTotalChart.createView();
        console.log(dv2.rows,"dv2.rows")
        outterView.data(dv2.rows);
        outterView.coordinate('theta', {  配置坐标系,详见上
          innerRadius: 0.5 / 0.8,
          radius: 0.8,
        });
        outterView
          .interval()
          .adjust('stack')
          .position('percent')
          .color('type*name', (type, name) => colorMap2[name])
          .style({
            stroke: 'white',
            lineWidth: 1,
          })
          .label('name', {
            offset: 10,
            style: {
              fill: '#666666',
              // shadowBlur: 2,
              // shadowColor: 'rgba(0, 0, 0, .45)',
            },
          });

        this.DpTotalChart.interaction('element-active')

        this.DpTotalChart.render();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值