echarts 如何实现图例单个数据项加上背景颜色和饼图中的背景图自适应

echarts 如何实现图例单个数据项加上背景颜色和饼图中的背景图自适应，看了文档不行，百度了很久也没有找到，有会的请帮忙解答一下

img

参考这个试试看
https://blog.csdn.net/A873054267/article/details/118366561

img


你的意思是 这样 让他对应起来吗 ?

jiyugpt
要实现图例单个数据项加上背景颜色，你可以使用 ECharts 的自定义图例功能。以下是一个示例代码，演示如何为图例的单个数据项设置背景颜色：

/

/ 定义图例的数据项
var legendData = ['数据项1', '数据项2', '数据项3'];

// 定义图例的背景颜色，与数据项一一对应
var legendBackgroundColor = ['#ff0000', '#00ff00', '#0000ff'];

// 设置图表的配置项
var option = {
  // 其他配置项...
  legend: {
    data: legendData,
    selectedMode: 'single',
    textStyle: {
      color: '#333'
    },
    backgroundColor: function(params) {
      var dataIndex = legendData.indexOf(params);
      return legendBackgroundColor[dataIndex];
    }
  },
  // 其他配置项...
};

// 使用配置项初始化图表
var chart = echarts.init(document.getElementById('chart-container'));
chart.setOption(option);

上述代码中，legendData数组定义了图例的数据项，legendBackgroundColor数组定义了每个数据项对应的背景颜色。在图例的配置项中，通过backgroundColor属性使用一个函数来设置每个数据项的背景颜色，函数中根据数据项在数组中的索引找到对应的背景颜色。

至于饼图中的背景图自适应，ECharts 默认是没有提供直接设置背景图自适应的功能。你可以尝试使用 CSS 的背景图片属性background-size: cover来实现背景图的自适应，将图表容器的背景样式设置为你想要的背景图，然后通过 CSS 来控制自适应效果。


<style>
  #chart-container {
    background-image: url('your-background-image-url');
    background-size: cover;
  }
</style>

<div id="chart-container"></div>

<script>
  // 初始化图表等代码...
</script>

上述代码中，通过 CSS 设置了图表容器 chart-container 的背景图为你所需的背景图，并将 background-size 设置为 cover，这样可以实现背景图的自适应效果。你可以根据需要调整容器和背景图的样式来适配你的需求。

实现图例单个数据项加上背景颜色：
在 ECharts 中，可以通过配置 legend.itemStyle 属性来为图例项添加背景颜色，具体实现方法如下：

option = {
  legend: {
    data: ['数据项一', '数据项二'],
    itemStyle: {
      borderColor: '#999', // 设置边框颜色
      borderWidth: 1, // 设置边框宽度
      padding: 5, // 设置内边距
      borderRadius: 5, // 设置圆角
      color: function(param) { // 设置背景颜色
        if (param === '数据项一') {
          return '#ff5722'; // 可以根据实际需求灵活设置颜色
        } else if (param === '数据项二') {
          return '#009688';
        }
      }
    }
  },
  ...
};

饼图中的背景图自适应：
在 ECharts 中，可以通过配置 series 下的 backgroundStyle 属性来为饼图添加背景图，并设置自适应宽高。具体实现方法如下：

option = {
  series: [{
    type: 'pie',
    data: [...],
    backgroundStyle: {
      // 设置背景图片
      image: 'background.png',
      // 设置背景重复方式
      repeat: 'repeat'
    },
    ...
    label: {
      show: true,
      formatter: '{b}:\n{d}%'
    }
  }],
  ...
  backgroundColor: 'transparent' // 设置页面背景透明，使饼图中的背景图片不被遮挡
};

在上述代码中，image 参数用于设置背景图片，repeat 参数用于设置背景重复方式。如果需要让背景图片自适应宽高，则可以在 CSS 文件中添加如下样式：

.echarts div[style*="background"] {
  background-size: cover !important;
}

这样就可以让背景图片自适应饼图的宽高了。需要注意的是，在使用背景图片时，为了避免图片过大导致加载缓慢，建议使用尺寸合适的图片，并压缩图片大小。

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7781525
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：页面多个echarts图表切换，出现无法加载完全问题，自适应图表问题解决办法
  • 除此之外, 这篇博客: 【echarts实用技巧】echarts图表常用功能总结，折线图柱状图折柱混合【持续更新中】中的 10，节点数值默认显示 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • series: [
          {
            name: "检测数量",
            type: "bar",
            data: [220, 229,234],
            //加一个这个label就可以了。按这个设置。
            label: {
              show: true,
              formatter: function (data) {
                return data.value;
              },
            },
          },]
  • 您还可以看一下 童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的 【part03-Echarts十大常见组件详解】气泡图（bubble）详解小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    针对第一个问题：如何在Echarts中为单个数据项添加背景颜色？

    可以使用Echarts的itemStyle属性来为单个数据项添加背景颜色。具体步骤如下：

    1. 找到需要添加背景色的数据项，给该数据项添加一个itemStyle属性，并在其中设置backgroundColor属性，例如：
    series: [{
  data: [{
    value: 50,
    itemStyle: {
      backgroundColor: 'rgba(255, 0, 0, 0.5)' //设置背景颜色
    }
  },
  ...
  ]
}]
    1. 除了直接指定颜色值，也可以使用回调函数根据数据值动态生成颜色，例如：
    series: [{
  data: [{
    value: 50,
    itemStyle: {
      color: function(params) {
        var value = params.value;
        if (value > 70) {
          return 'red';
        } else {
          return 'green';
        }
      }
    }
  },
  ...
  ]
}]
    1. 如果需要设置不同类型数据项的不同颜色，可以在series中设置type属性，然后在itemStyle中为不同类型数据项设置不同的颜色，例如：
    series: [{
  type: 'bar',
  data: [{
    value: 50,
    itemStyle: {
      color: 'red'
    }
  },
  ...
  ]
},
{
  type: 'line',
  data: [{
    value: 30,
    itemStyle: {
      color: 'blue'
    }
  },
  ...
  ]
}]

    针对第二个问题：如何实现饼图背景图的自适应？

    可以使用Echarts的graphic组件来实现饼图背景图的自适应。具体步骤如下：

    1. 首先需要通过setOption方法配置一个表格的基本参数，例如：
    let option = {
  ...
  graphic: [{
    type: 'image',
    id: 'circle',
    z: -10,
    left: '0%',
    top: '0%',
    style: {
      image: 'https://path/to/image.png',
      width: '100%',
      height: '100%'
    }
  }],
  series: [{
    type: 'pie',
    radius: [0, '50%'],
    ...
  }]
};
myChart.setOption(option);

    其中graphic对象包含了通过'type'属性设置的不同的组件，本例子需要设置一个'image'组件来加载背景图片。在id中设置组件的唯一标识，在left和top中设置图片的默认位置。在style中设置图片的路径，以及大小（这里使用了'100%'，让图片自适应大小）。

    1. 接下来需要监听窗口变化，动态改变背景图片的大小。这个可以通过window对象的resize事件来实现，例如：
    function resize() {
  let chart = myChart;
  // 获取当前div的宽高
  let height = chart.getDom().clientHeight;
  let width = chart.getDom().clientWidth;
  // 使用getBoundingRect方法获取image对象，修改其大小
  chart.setOption({
    graphic: [{
      id: 'circle',
      style: {
        height: height,
        width: width
      }
    }]
  });
}
window.addEventListener("resize", resize);

    这里定义了一个resize函数，用来监听窗口变化事件。在此事件中，首先获取图表div的宽高，然后使用getBoundingRect方法获取'image'组件，最后修改其大小为div的宽高。

    需要注意的是，如果图表使用了动态数据，需要在数据更新完成后再调用resize函数，保证图片大小与图表数据相适应。

    以上是解决问题的具体步骤和代码示例。

img

  1. 图例单个数据项加上背景颜色

可以使用ECharts中的formatter，自定义图例文本样式。实现方式如下：

1） 在legend.data中添加formatter属性；

2） 在tooltip.formatter中通过回调函数，获取到相应数据的seriesName和color属性（series.itemStyle.color），自定义数据项背景色；

3） 将自定义的数据项背景色添加到legend的formatter属性中。

下面是实现代码示例：

option = {
    // 其他配置项...

    legend: {
        data: [{
            name: '数据项1',
            icon: 'circle',
            formatter: function(name){
                // 定义数据项背景色
                var bgColor = '#ccc';

                // 获取数据项颜色
                var color = '';
                chart.series.forEach(function(s){
                    if(s.name === name) color = s.itemStyle.color;
                });

                // 构造数据项样式
                return '<span style="background-color:' + bgColor + ';padding: 5px 10px;border-radius: 15px;margin-right: 10px;"></span> ' + name;
            }
        }, '数据项2', '数据项3', '数据项4'],
        bottom: 0   // 图例位于底部
    },

    // 其他配置项...
};
  1. 饼图中的背景图自适应

如果要在饼图中添加背景图，并且让其自适应容器大小，可以直接在图表容器的CSS样式中设置background-image属性：

#pie-chart {
    background-image: url('path_to_your_bg_image');
    background-repeat: no-repeat;
    background-size: contain;
}

其中，#pie-chart是ECharts图表容器的ID。

需要注意的是，当图表容器大小发生变化时，背景图片的大小也会跟着变化，但是当图表容器宽高比例不一致时，背景图片可能会被拉伸或缩放，导致变形。解决这个问题的方法就是在CSS样式中使用background-position和background-size等属性，设置背景图片的位置和大小，让背景图填满容器但不变形。

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

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

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

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

原图：

img

demo图：

img

核心代
码：


        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>