数据集组件没有配置图例

问题描述 投票：0回答：1

我正在配置两个图表，图例仅在使用 

series.data
时出现，但当我使用数据集组件（
series.datasetIndex
和 
series.encode
）时不会出现。我尝试过的没有任何效果。这是代码：

   document.addEventListener("DOMContentLoaded", () => {

        // sytem
        const chartSystem = () => {
            return {
                "source": {
                    "first": [
                        ["name", "value"],
                        ["Pressure", 40],
                        ["Temperature", 64],
                        ["Atmosphere", 89]
                    ],
                    "second": [
                        ["name", "value"],
                        ["Label 1", 15],
                        ["Label 2", 68]
                    ]
                }
            }
        }

        // send
        const pullDataset = [];
        const pullData = [];

        const chartSend = () => {
            const { first, second } = chartSystem().source;

            pullDataset.push({
                source: first
                // sourceHeader: true
            });

            pullData.push(
                {
                    data: second.slice(1).map(([name, value]) => ({
                        name,
                        value
                    }))
                }
            );
        };

        chartSend();

        // frames
        const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);

        function chartFrameSwitch0 () {

            const tooltip0 = {
                show: true
            };
            
            const useDataLegend = pullDataset[0].source.slice(1).map(item => item[0]);
            console.log(useDataLegend);

            // legend
            const legend0 = [
                {
                    show: true,
                    data: useDataLegend,
                    borderWidth: 2,
                    borderColor: 'red'
                },
                {
                    show: true,
                    data: pullData[0].data.map(item => item.name),
                    borderWidth: 2,
                    borderColor: 'blue',
                    left: 'center',
                    top: '5%'
                }
            ];

            const grid0 = [
                {
                    top: '30%',
                    left: '5%',
                    width: '38%',
                    height:'30%'
                }
            ];

            const xAxis0 = [
                {
                    gridIndex: 0,
                    type: 'category'
                }
            ];

            const yAxis0 = [
                {
                    gridIndex: 0,
                    type: 'value'
                }
            ];

            const series0 = [
                {
                    type: 'bar',
                    color: ['#49a6de', '#ff7500', '#ff00ff'],
                    colorBy: 'data',
                    datasetIndex: 0,
                    encode: {
                        x: 0,
                        y: 1
                    },
                    xAxisIndex: 0,
                    yAxisIndex: 0
                },
                {
                    type: 'pie',
                    legendIndex: 0,
                    center: ['70%', '50%'],
                    data: pullData[0].data
                }
            ];

            const option = {
                dataset: [pullDataset[0]],
                legend: legend0, // Keep both legends in the array
                tooltip: tooltip0,
                grid: grid0,
                xAxis: xAxis0,
                yAxis: yAxis0,
                series: series0
            };

            chartUse.setOption(option);
        }

        chartFrameSwitch0();

    })
<head>
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js'></script>
</head>
    
<div class='chart' style='width: 100%; height: 100vh;'></div>

查看

useDataLegend
的console.log：

[
  "Pressure",
  "Temperature",
  "Atmosphere"
]

这是我尝试设置的手动方式

legend.data: [...]
。我尝试使用
series.encode
，但它似乎不支持设置图例。

javascript echarts
1个回答
0
投票

该问题与数据来源无关，同样 发生在栏有 

data
条目而不是 
encoding
时。

问题实际上在于条形图的图例如何工作 - 在条形图（以及许多其他类型的图表）中，您只需 不能为每个数据项都有一个图例条目，但只能有一个图例 每个数据集的条目。当然，情况并非如此 饼图，其中每个数据项（切片）都有其图例条目。

这就是这篇文章的主题 即使从那时起 echarts 已经更新了很多，但这似乎并不 已经改变了。

还有一个重要的点是关于

legend.data
的含义； 虽然 
legend.data
上的文档有点令人困惑，但事情 在
legend.data.name
文档中进行了澄清： 您不能在其中输入任何名称来更改显示的名称 为了传奇。字符串（或者 
name
属性的值，如果它是 对象）应该是默认出现的实际名称之一 在图例中，这是条形图系列的 
name
和 饼图数据项的 
name
。一个简单的实验将证明 那：替换你的代码：

{
   show: true,
   data: pullData[0].data.map(item => item.name),
   borderWidth: 2,
   borderColor: 'blue',
   left: 'center',
   top: '5%'
}


data
更改了名称，例如 

   data: pullData[0].data.map(item => item.name + 'x'),

我们看到饼图例也消失了（jsfiddle）。

因此，

data
中的名称的目的只是为了选择 图例项，例如，如果缺少系列名称，则 不会有图例条目。

所以，为了显示一些东西，在酒吧

legend
我们有 首先向条形系列添加 
name
：

const series0 = [
   {
      type: 'bar',
      name: 'barbar',
      color: ['#49a6de', '#ff7500', '#ff00ff'],
      colorBy: 'data',
      ...............

并在相应的legend.data中添加

相同的
名称：

const legend0 = [
   {
      show: true,
      data: ['barbar'], // or data: [{name: 'barbar'],
      borderWidth: 2,
      borderColor: 'red'
   },
   {
      show: true,
      data: pullData[0].data.map(item => item.name),
      borderWidth: 2,
      borderColor: 'blue',
      left: 'center',
      top: '10%'
   }
]

这只会将一项放在红色边框图例中，对于 唯一的酒吧系列，jsFiddle.

通过选择两个图例显示的项目很重要 

data
；如果缺少，两个图例的默认值是 显示所有三个可用项目，即酒吧系列的项目和 两个用于饼图数据项，(fiddle)。

为了实现你最初想要的，我们必须使用技巧 在答案中提出 到上面链接的帖子，即将每个栏放在自己的类别中：

const chartSystem = () => {
   return {
      "source": {
         "first": [
            ["name", "value"],
            ["Pressure", 40],
            ["Temperature", 64],
            ["Atmosphere", 89]
         ],
         "second": [
            ["name", "value"],
            ["Label 1", 15],
            ["Label 2", 68]
         ]
      }
   }
}

// send
const pullDataset = [];
const pullData = [];
const header = [];
const chartSend = () => {
   const { first, second } = chartSystem().source;

   header.push(...first.slice(1).map(item => item[0]));
   pullDataset.push({
      source: [['name', ...header],
         ...Array.from({length: first.length - 1}, (_, i) =>
            [header[i], ...Array.from({length: first.length - 1}, (_, j) => i === j ? first[i+1][1] : 0)])
      ]
   });

   pullData.push(
      {
         data: second.slice(1).map(([name, value]) => ({
            name,
            value
         }))
      }
   );

};

chartSend();

// frames
const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);

function chartFrameSwitch0 () {

   const tooltip0 = {
      show: true
   };

   const useDataLegend = pullDataset[0].source[0];

   // legend
   const legend0 = [
      {
         show: true,
         borderWidth: 2,
         data: header,
         borderColor: 'red'
      },
      {
         show: true,
         data: pullData[0].data.map(item => item.name),
         borderWidth: 2,
         borderColor: 'blue',
         left: 'center',
         top: '10%'
      }
   ];

   const grid0 = [
      {
         top: '30%',
         left: '5%',
         width: '38%',
         height:'30%'
      }
   ];

   const xAxis0 = [
      {
         gridIndex: 0,
         type: 'category',
         //data: header
      }
   ];

   const yAxis0 = [
      {
         gridIndex: 0,
         type: 'value'
      }
   ];

   const colors = ['#49a6de', '#ff7500', '#ff00ff'];
   const series0 = pullDataset[0].source.slice(1).map((item, idx) => ({
      type: 'bar',
      name: header[idx],
      color: colors[idx],
      stack: 'stack',
      encode: {
         x: 0,
         y: idx+1
      },
      xAxisIndex: 0,
      yAxisIndex: 0
   })).concat([{
      type: 'pie',
      center: ['70%', '50%'],
      data: pullData[0].data
   }]);

   const option = {
      dataset: pullDataset[0],
      legend: legend0, // Keep both legends in the array
      tooltip: tooltip0,
      grid: grid0,
      xAxis: xAxis0,
      yAxis: yAxis0,
      series: series0
   };

   chartUse.setOption(option);
}

chartFrameSwitch0();
<div class='chart' style='height: 300px'></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

（或作为 jsFiddle）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.