zoukankan      html  css  js  c++  java
  • echarts 实战 : 怎么处理特殊的图表数字 label ?

    所谓Label,就是在图表上面显示的那个数字。

    但有的时候我们需要柱状图堆叠。

    那如果我们需要所有数字都在外面,并且以 320/210/310/410/1320 这样的形式显示呢?

    那么 echarts 本身提供的属性就没有办法了。

    我们就需要自己写方法算一下。

      // 特殊label
      getParallelLabel = (normalData) => {
        let labelResult = []
        // 注入数据
        normalData.sData.forEach((item) => {
          item.data.forEach((item_2, index_2) => {
            if (!labelResult[index_2]) {
              labelResult[index_2] = (item_2 + '/')
            } else {
              labelResult[index_2] += (item_2 + '/')
            }
          })
        })
        // 去掉最后一个
        return labelResult.map(item => item.substring(0, (item.length-1)))
      }

    然后在渲染时调用这个方法。

        // 判定是否需要 label
        if (settingData.labelFlag && !settingData.labelFlag.mode) {
    // ...
    } else if (settingData.labelFlag && settingData.labelFlag.mode && settingData.labelFlag.mode === "parallel") { // 计算自定义label字符 const labelResult = this.getParallelLabel(normalData) baseSeriesObject.label = { normal: { fontSize:16, show: true, position: settingData.xyType === 'x' ? 'top' : 'right', color:'rgba(9,178,215,1)', formatter:(params) => { // console.log(params) if (params.seriesIndex === 2) { return labelResult[params.dataIndex] } else { return "" } } } } }

    因为这个项目是 react 做的,所以我写了一个 echarts 组件。

    这样,我在页面里调用这个组件的时候,就可以根据需要传一些判断用的属性,比如:

          settingData:{
            xyType:'y',
            stackFlag:true,
            color: ['rgba(68,238,224,1)', 'rgba(17,215,255,1)', 'rgba(251,203,73,1)'],
            barWidth:"20%",
            backgroundFlag:false,
            legendFlag:true,
            labelFlag:{
              mode:"parallel"
            },
            grid:{
              top:50,
              left:125
            }
          }

    settingData.labelFlag.mode === "parallel"

    就是我自定义的属性。

    以上。

  • 相关阅读:
    js创建form添加input项目并提交表单
    DataTable 修改列名 删除列 调整列顺序
    文件夹右键出取得管理员所有权选项
    c#多线程
    js用计时器加载大量dom
    c# 将html添加进剪贴板(带格式)
    landa语法
    c# @符号后面对 双引号转义
    asp.net web api CORS
    IIS中发布网站的问题
  • 原文地址:https://www.cnblogs.com/foxcharon/p/11875523.html
Copyright © 2011-2022 走看看