echart 图列自写

干活的程序打工人

已于 2023-05-17 15:54:14 修改

阅读量53

点赞数

文章标签：前端 javascript html

于 2023-05-11 15:04:38 首次发布

本文链接：https://blog.csdn.net/qq_45823368/article/details/130622407

版权

echart 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

  const legend = () => (
    <div style={{display:'flex', alignItems:'center', justifyContent:'center', marginTop:'-20px'}}>
      {
        legendData.map((t)=>(
          <div style={{marginLeft: '8px', fontSize:'12px'}}>
            <span style={{display:'inline-block', width: '8px', height: '8px', background: colorShow(t) }}></span>
            <div style={{display:'inline-block', marginLeft: '4px'}}>{t}</div>
          </div>
        ))
      }
    </div>
  );

  const colorShow = (params) => {
    const colorList =
      theme === 'dark'
        ? [
          '#18397C',
          '#3A4B6A',
          '#7899E1',
        ]
        : [
          '#E3CEBD',
          '#F3A572',
          '#6A9CCF',
        ];
    return params === '其他'
      ? '#8EA1C2'
      : params === '高'
        ? '#6998F6'
        : params === '中高'
          ? '#858EEF'
          : params === '中等'
            ? '#6A9CCF'
            : params === '一般'
              ? '#F3A572'
                : params === '不建议'
                  ? '#EB7979'
                  : colorList[params?.dataIndex]
  }