熟能生巧，精益求精--关于可视化图表那些事

我想吃肉
333 阅读3分钟

随着数据时代的到来，数据可视化在IT行业显得格外重要，几乎所有的管理系统，首页一般都需要用到图表，常用的有Echart、Antv Chart、HightChart、还有蚂蚁旗下的各种图表引擎：G2、X6等等很多图表，每次用到无非就是疯狂扒拉文档，照着UI设计稿在那里疯狂一比一，百分百还原，这只能说熟能生巧，炉火纯青，下面就我遇到的一些问题及解决办法，展开说说，欢迎各位前端大佬指点评论，一起学习~

需求

  • 原本有根据一些商品信息进行数据展示，按照设计稿1：1还原（第一步应该没啥问题，掉几根头发的事）
  • 后续补充需求 在没有数据的是时候 以某种颜色展示

效果展示

基础版本

image.png

  • 当后端没有返回数据或者是商品数据都为0时，给我展示默认色（产品说）

image.png

需求分析

  • 保留图例的四种颜色
  • 饼图颜色改为'#EFF1F3'

问题所在

  • 图表的color配置项会根据我们设置的区分类型colorField: 'type'来决定
  • 而图例恰巧也是绑定到一块
  • 就出现了 我们配置的color映射成 饼图类型及图例

解决问题

  • 我们直接传空数组能不能解决呢？

效果展示

image.png

效果就是：直接给我图表也不显示了，好家伙啊

  • 还是看下文档吧，通过文档得知，里面的style支持回调写法 来看看能得到什么东东吧
legend: {
      layout: 'vertical', // 纵向 or 横向
      // position: 'left', // 左 or 右
      itemValue: {
        formatter: (text, item, index) => {
          return '----'
        },
      },
      // 设置legend 小圆点是在这里
      // Echart 的小圆点也是这个变量，只不过是返回html节点 别问我怎么知道 去打印出来瞅瞅咯
      marker: {
        style: (item, index) => {
          const { fill } = item || {}
          // 打印看看
          console.log('item', item)
          // 饼图颜色 和 图例死死绑定 巧妙处理
          // 核心代码处理
          const fillValue = fill === '#EFF1F3' ? '#8392C2' : fill
          return {
            ...item,
            fill: fillValue,
          }
        },
      },
    },

image.png

逻辑分析

- 看起来得到的是，我们传入颜色的值啊，
- 既然我不能改变你的绑定 那我还不能给你重新赋值啊，
- 直接暴力判断呗，
- 我们知道图例和饼图颜色 一一对应，
- 现在是饼图颜色统一，而图例保持不变，
- 饼图的颜色 单一色 可以通过数据去改变 只要有一个有值 其他为0 就行呗，
- 那么就是图例问题没有解决 既然我们颜色已经更改，
- 强制判断一下 如果返回的颜色值 === '#EFF1F3'（想要的灰色）我就改变你原本的灰色 让你变成蓝色
- 完美

image.png

图例显示的文本修改

  • 也很简单 顺手讲一下了

legend: {
        ...,
      itemValue: {
        formatter: (text, item, index) => {
            // 强制返回'---'
          return '----'
        },
      },
    },

效果展示

image.png

代码示例

  • 两种效果展示都一样的~
const DemoRingProgress = () => {
  const config = {
    height: 300,
    width: 300,
    autoFit: false,
    // 控制进度值
    percent: 0,
    // 控制颜色 ['进度占比颜色','未占比颜色']
    color: ['#5B8FF9', '#E8EDF3'],
    // 设置圆环里面的文本
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        content: '迷你图',
      },
    },
  };
  return <RingProgress {...config} />;
};

const DemoRingProgress = () => {
  const config = {
    height: 300,
    width: 300,
    autoFit: false,
    // 控制进度值
    percent: 1,
    // 控制颜色 ['进度占比颜色','未占比颜色']
    color: ['#E8EDF3','#5B8FF9'],
    // 设置圆环里面的文本
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        content: '迷你图',
      },
    },
  };
  return <RingProgress {...config} />;
};

迷你进度环图优缺点

  • 优点：代码量少
  • 缺点：缺少图例，需要手动补充（自己写htmlm，加个定位渲染啦）

结束

  • 后续有遇到特殊、好玩的需求会再分享
  • 觉得有帮助，可以给个点赞啦~点赞又不花钱，对吧！
avatar
文章
阅读
粉丝