VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Feature] 希望支持一个轴功能。当轴对应的系列数据都被图例删选掉之后,轴可以隐藏。

Open xuefei1313 opened this issue 1 year ago • 0 comments

What problem does this feature solve?

多个轴的场景,当某一个轴对应的数据已经被完全筛选掉之后,希望隐藏掉轴这个轴 img_v3_02ar_78f0a40c-0324-449b-b5e6-80619143640g

const spec = {
  type: 'common',
  data: [
    {
      id: 'dau',
      values: [
        { x: '05-01', type: '日均用户数', y: 5 },
        { x: '05-02', type: '日均用户数', y: 4 },
        { x: '05-03', type: '日均用户数', y: 7 },
        { x: '05-04', type: '日均用户数', y: 7 },
        { x: '05-05', type: '日均用户数', y: 9 },
        { x: '05-06', type: '日均用户数', y: 2 },
        { x: '05-07', type: '日均用户数', y: 13 },
      ]
    },
    {
      id: 'total_message',
      values: [
        { x: '05-01', type: '日均对话数量', y: 12 },
        { x: '05-02', type: '日均对话数量', y: 5 },
        { x: '05-03', type: '日均对话数量', y: 11 },
        { x: '05-04', type: '日均对话数量', y: 23 },
        { x: '05-05', type: '日均对话数量', y: 30 },
        { x: '05-06', type: '日均对话数量', y: 14 },
        { x: '05-07', type: '日均对话数量', y: 33 },
      ]
    },
    {
      id: 'ratation',
      values: [
        { x: '05-01', type: '平均7日留存', y: 0 },
        { x: '05-02', type: '平均7日留存', y: 0 },
        { x: '05-03', type: '平均7日留存', y: 0 },
        { x: '05-04', type: '平均7日留存', y: 0 },
        { x: '05-05', type: '平均7日留存', y: 0 },
        { x: '05-06', type: '平均7日留存', y: 0 },
        { x: '05-07', type: '平均7日留存', y: 0 },
      ]
    },
    {
      id: 'round',
      values: [
        { x: '05-01', type: '平均对话轮数', y: 1.8 },
        { x: '05-02', type: '平均对话轮数', y: 2.2 },
        { x: '05-03', type: '平均对话轮数', y: 3.5 },
        { x: '05-04', type: '平均对话轮数', y: 4.2 },
        { x: '05-05', type: '平均对话轮数', y: 3.2 },
        { x: '05-06', type: '平均对话轮数', y: 4.2 },
        { x: '05-07', type: '平均对话轮数', y: 2.3 },
      ]
    },
    {
      id: 'star_rate',
      values: [
        { x: '05-01', type: '点赞率', y: 0.99 },
        { x: '05-02', type: '点赞率', y: 0.7 },
        { x: '05-03', type: '点赞率', y: 0.9 },
        { x: '05-04', type: '点赞率', y: 0.9 },
        { x: '05-05', type: '点赞率', y: 0.99 },
        { x: '05-06', type: '点赞率', y: 0.92 },
        { x: '05-07', type: '点赞率', y: 0.99 },
      ]
    },
    {
      id: 'round_time',
      values: [
        { x: '05-01', type: '对话持续时间', y: 34012 },
        { x: '05-02', type: '对话持续时间', y: 35012 },
        { x: '05-03', type: '对话持续时间', y: 38012 },
        { x: '05-04', type: '对话持续时间', y: 32012 },
        { x: '05-05', type: '对话持续时间', y: 44012 },
        { x: '05-06', type: '对话持续时间', y: 24012 },
        { x: '05-07', type: '对话持续时间', y: 34012 },
      ]
    },
  ],
  series: [
    {
      type: 'line',
      id: 'dau',
      dataId: 'dau',
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      point: {
        style: {
          fill: '#4D53E8'
        }
      },
      line: {
        style: {
          stroke: '#4D53E8'
        }
      }
    },
    {
      type: 'line',
      id: 'total_message',
      dataId: 'total_message',
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      point: {
        style: {
          fill: '#2C90FF'
        }
      },
      line: {
        style: {
          stroke: '#2C90FF'
        }
      }
    },
    {
      type: 'line',
      id: 'round',
      dataId: 'round',
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      point: {
        style: {
          fill: '#C2DFFF'
        }
      },
      line: {
        style: {
          stroke: '#C2DFFF'
        }
      }
    },
    {
      type: 'line',
      id: 'ratation',
      dataId: 'ratation',
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      point: {
        style: {
          fill: '#A4EE00'
        }
      },
      line: {
        style: {
          stroke: '#A4EE00'
        }
      }
    },
    {
      type: 'line',
      id: 'star_rate',
      dataId: 'star_rate',
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
            point: {
        style: {
          fill: '#32A247'
        }
      },
      line: {
        style: {
          stroke: '#32A247'
        }
      }
    },
    {
      type: 'line',
      id: 'round_time',
      dataId: 'round_time',
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      point: {
        style: {
          fill: '#FF9600',
          fillOpacity: 0.5
        }
      },
      line: {
        style: {
          stroke: '#FF9600',
          strokeOpacity: 0.5
        }
      }
    },
  ],
  axes: [
    { 
      orient: 'left', 
      seriesId: ['dau','total_message','round'],
      label: {
        style: {
          fill: '#1B59F8',
          opacity: 0.45
        }
      }
    },
    { 
      orient: 'right', 
      seriesId: ['round_time'], 
      grid: { visible: false },
      label: {
        formatMethod: (text)=>{
          return text+'ms'
        },
        style: {
          fill: '#FF9600',
          fillOpacity: 0.5
        }
      },
      padding: {
        left: 16
      },
      domainLine: {
        visible: true,
        style: {
          stroke: '#FF9600',
          strokeOpacity: 0.5
        }
      },
      tick: {
        visible: true,
        style: {
          stroke: '#FF9600',
          strokeOpacity: 0.5
        }
      }
    },
    { 
      orient: 'right', 
      seriesId: ['star_rate','ratation'], 
      grid: { visible: false },
      label: {
        formatMethod: (text)=>{
          return text * 100 + '%'
        },
        style: {
          fill: '#85C600',
          fillOpacity: 0.5
        }
      },
      domainLine: {
        visible: true,
        style: {
          stroke: '#85C600',
          strokeOpacity: 0.5
        }
      },
    },
    { 
      orient: 'bottom', 
      label: { visible: true }, 
      type: 'band' 
    }
  ],
  legends: {
    visible: true,
    orient: 'bottom'
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

What does the proposed API look like?

unkonw

xuefei1313 avatar May 14 '24 02:05 xuefei1313