首页 前端知识 echarts legend单项数据添加背景色|背景图

echarts legend单项数据添加背景色|背景图

2024-03-05 09:03:06 前端知识 前端哥 338 430 我要收藏

把legend图例设置背景色或者背景图

  1. 把legend设置成Arr,在每个legend对象里面背景颜色设置图片或者颜色值,backgroudColor:{image:(background.png)}。

  2. 设置完成后,legend会重叠在一起,使用top设置距离顶部的高度,把重叠的legend分开显示。

  3. 关于文字的显示,使用自定义富文本样式textStyle.rich,通过padding设置文本左右显示,经测试文本字数不能超过7个字,超过就视觉上宽度是不一样的。

原图:
在这里插入图片描述

demo图:

le

核心代
码:


        top: `${90 - (i + 1) * 10}%`,
        data: [
         https://img-mid.csdnimg.cn/release/static/image/mid/ask/439372854686186.png "#left")
 {
            name: item.name,
            icon: 'rect',
            borderWidth: 0
          }
        ],
        backgroundColor:{
          image: './legend_bg.png'
        } ,

完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 150px;
      background-color: #0e1842;
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    }

    #echarts01 {
      background-size: cover;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.common.js"></script>
</head>

<body>
  <div id="echarts01" style="width: 800px;height: 400px;background-color: #0e1842;"></div>
  <script>
    var myChart = echarts.init(document.getElementById('echarts01'));
    const data = [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union Ads' },
      { value: 300, name: 'Video Ads' }
    ]
    const colorArr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272']
   
    const legendArr = []
    data.forEach((item, i) => {
      legendArr.push({
        selectedMode: false,
        type: 'plain',
        orient: 'vertical',
        right: 10,
        itemGap: 12,
        itemWidth: 10,
        itemHeight: 10,
        top: `${90 - (i + 1) * 10}%`,
        data: [
          {
            name: item.name,
            icon: 'rect',
            borderWidth: 0
          }
        ],
        padding: [2, 2, 0, 2],
        backgroundColor:{
          image: './legend_bg.png'
        } ,
        formatter: (name) => {
          console.log(data[i].value);
          name = name.length>6? name.substring(0,6)+'...':name
          return `{name|${name}} {bfb|${data[i].value}%}`
        },
        textStyle: {
          color: '#545659',
          fontSize: 14,
          fontFamily: '微软雅黑',
          rich: {
            name: {
              padding: [4, 4],
              color: '#fff',
              align: 'left',
              backgroundColor: 'transparent'
            },
            bfb: {
              fontSize: 12,
              padding: [4, -100, 0, 0],
              align: 'right',
              color: '#fff',
              backgroundColor: 'transparent'
            }
          }
        },
  
      })
    })

    option = {
      title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: legendArr,
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    myChart.setOption(option);
  </script>
</body>

</html>


转载请注明出处或者链接地址:https://www.qianduange.cn//article/3276.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!