图表修复bug1-title数据的显示问题

蚂蚁金服:https://antv.vision/zh

//实例化近一年门急诊处方和住院病历点评数量月度评估表
      initReviewMonthTotalChart() {   //这个接口是初始化调用
        //全局命名空间 DataSet,同时也是数据集类的构造函数。   数据视图构造函数。new DataView()
        this.ReviewMonthTotalChartDataView = new DataView();
        //dv.source()dv.source(data, options) 载入数据        this.ReviewMonthTotalChartDataView.source(this.ChartReviewMonthTotalData)
          //dv.transform()dv.transform(options) 执行数据处理。
          .transform({
            type: 'fold',
            fields: ['MZNum', 'JZNum', 'ZYNum'],
            key: 'month',
            value: 'value',
            retains: ['Time'],
            color: {
              colorField: 'type', // 部分图表使用 seriesField
              color: ['#63DAAB', '#6395FA', '#F7C122'],
            }
          })
          .transform({
            type: 'map',
            callback: (obj) => {
              const key = obj.month;
              let type;
              let type2;    //可以set数据
              if (key === 'MZNum') {
                type2 = '门诊处方'
              }
              if (key === 'JZNum') {
                type2 = '急诊处方'
              }
              if (key === 'ZYNum') {
                type2 = '住院病历'
              }
              if (key === 'MZNum' || key === 'JZNum') {
                type = 'a';
              } else {
                type = 'b';
              }
              obj.type = type;
              obj.month = type2;
              return obj;
            },
          });
//近一年门急诊处方和住院病历点评数量月度评估
        this.ReviewMonthTotalChart = new Column('ChartReviewMonthTotal', {
          data: this.ReviewMonthTotalChartDataView.rows,
          xField: 'Time',
          yField: 'value',
          isGroup: true,   //是否分组柱状图。
          isStack: true,   //是否堆积柱状图。
          seriesField: 'month',   //拆分字段,在分组柱状图下同 groupField、colorField,在堆积柱状图下同 stackField、colorField。
          groupField: 'type',     //拆分字段,用于堆叠分组柱状图,拆分优先级高于 seriesField,isGroup: true 时会根据 groupField 进行分组。
          colorField: 'month',
          label: {
            position: 'top'
          },
          //格式化 tooltip item 内容。
          tooltip: {
            formatter: ((data) => {
              return { name: data.month, value: data.value};
            }),
          },
          //颜色在另一个地方定义看后面代码
          color: ({
            month
          }) => {
            return this.colorMap[month]
          }
        });
        this.ReviewMonthTotalChart.render();
      },
    },

在data里面定义的颜色

colorMap: {
    '门诊处方': '#6395FA',
    '急诊处方': '#63DAAB',
    '住院病历': '#F7C122',   
  },

图表在html里面的写法

 <div id="ChartReviewMonthTotal"></div>

后面的效果图
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值