主页 / coding / 问题

问题[echarts](coding)

Martin Hope
Steven Magana-Zook
Asked: 2025-01-07 07:44:26 +0800 CST
  • 4

我有一个热图，其中有针对特定 x 值的垂直标记线。现在，垂直线出现在我指定的 x 轴索引的中间。这会将热图单元格一分为二，并且会让寻找特定项目之间边界的用户感到困惑。是否可以使用内置选项让该垂直线出现在指定 x 轴索引的右侧边界上？

带有每个类别 x 值标记线的热图

以下是我的 eChart 选项 JavaScript 的相关部分：

series: [
                {
                    type: 'heatmap',
                    data: mutation_map_data,
                    color: colorPalette,                    
                    markLine: {
                        silent: true,
                        data: position_boundaries,
                        lineStyle: {
                            width: 5,
                            color: "white",
                        }
                    },
                    ...
]

其中变量 position_boundaries 是以下形式的项目数组：

{"symbol": "none", "xAxis": index, "name": current_position}
echarts
Martin Hope
Jlv
Asked: 2024-11-25 00:19:50 +0800 CST
  • 6

我正在学习如何使用 eCharts 并尝试不同的类型。我剪切并粘贴了两种 eChart 条形类型，一种带有向下钻取 (id = main2)，一种带有负值的水平 (id = main1)；它们排列在单个表格行中。

两者都能正确呈现，向下钻取功能也运行良好；后退按钮按预期工作并显示正确的初始条形图；只不过返回后它在图表的顶层仍然可见。刷新页面会将其删除。

<head>
    <meta charset='utf-8' />


    
  </head>

<body>
  <table class="container-drilldown" >
    <thead>
        
    </thead>
    <tbody>
        <tr>  
          <td class='drilldown' class ='center' id='main2' style='width: 30vw; height:45vh' >
            <script type='text/javascript'>
    
              var chartDom = document.getElementById('main2');
              var myChart = echarts.init(chartDom);
              var option = {
                xAxis: {
                  data: ['Animals', 'Fruits', 'Cars']
                },
                yAxis: {},
                dataGroupId: '',
                animationDurationUpdate: 500,
                series: {
                  type: 'bar',
                  id: 'sales',
                  data: [
                    {
                      value: 5,
                      groupId: 'animals'
                    },
                    {
                      value: 2,
                      groupId: 'fruits'
                    },
                    {
                      value: 4,
                      groupId: 'cars'
                    }
                  ],
                  universalTransition: {
                    enabled: true,
                    divideShape: 'clone'
                  }
                }
              };
              const drilldownData = [
                {
                  dataGroupId: 'animals',
                  data: [
                    ['Cats', 4],
                    ['Dogs', 2],
                    ['Cows', 1],
                    ['Sheep', 2],
                    ['Pigs', 1]
                  ]
                },
                {
                  dataGroupId: 'fruits',
                  data: [
                    ['Apples', 4],
                    ['Oranges', 2]
                  ]
                },
                {
                  dataGroupId: 'cars',
                  data: [
                    ['Toyota', 4],
                    ['Opel', 2],
                    ['Volkswagen', 2]
                  ]
                }
              ];
              myChart.on('click', function (event) {
                if (event.data) {
                  var subData = drilldownData.find(function (data) {
                    return data.dataGroupId === event.data.groupId;
                  });
                  if (!subData) {
                    return;
                  }
                  myChart.setOption({
                    xAxis: {
                      data: subData.data.map(function (item) {
                        return item[0];
                      })
                    },
                    series: {
                      type: 'bar',
                      id: 'sales',
                      dataGroupId: subData.dataGroupId,
                      data: subData.data.map(function (item) {
                        return item[1];
                      }),
                      universalTransition: {
                        enabled: true,
                        divideShape: 'clone'
                      }
                    },
                    graphic: [
                      {
                        type: 'text',
                        left: 50,
                        top: 20,
                        style: {
                          text: 'Back',
                          fontSize: 18
                        },
                        onclick: function () {
                          myChart.setOption(option);
                        }
                      }
                    ]
                  });
                }
              });
              
              option && myChart.setOption(option);
              
            
          </script>
        </td>
         

        <td class='drilldown' class ='center' id='main1' style='width: 30vw; height:45vh' >
          <script type='text/javascript'>
            var chartDom1 = document.getElementById('main1');
            var myChart1 = echarts.init(chartDom1);

            var option1 = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {
                data: ['Profit', 'Expenses', 'Income']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'value'
                }
              ],
              yAxis: [
                {
                  type: 'category',
                  axisTick: {
                    show: false
                  },
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                }
              ],
              series: [
                {
                  name: 'Profit',
                  type: 'bar',
                  label: {
                    show: true,
                    position: 'inside'
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [200, 170, 240, 244, 200, 220, 210]
                },
                {
                  name: 'Income',
                  type: 'bar',
                  stack: 'Total',
                  label: {
                    show: true
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [320, 302, 341, 374, 390, 450, 420]
                },
                {
                  name: 'Expenses',
                  type: 'bar',
                  stack: 'Total',
                  label: {
                    show: true,
                    position: 'left'
                  },
                  emphasis: {
                    focus: 'series'
                  },
                  data: [-120, -132, -101, -134, -190, -230, -210]
                }
              ]
            };

            option && myChart1.setOption(option1);
          </script>
      </td>

  </tr>
echarts
Martin Hope
Jlv
Asked: 2024-11-13 00:21:01 +0800 CST
  • 5

有没有办法在 Apache eChart 中创建边框？我查看了文档，尝试了各种组合，但似乎无法在图表周围添加边框。

我将它们放在表格中并可以通过这种方式添加边框，但如果能够将它们添加到图表而不是表格中就更好了。

echarts
Martin Hope
Josh Garrison
Asked: 2024-09-27 05:10:20 +0800 CST
  • 6

这是令我感到困扰的一张图表。

Echart示例

问题是，如果您更改任何数据值，漏斗图上的标签就会消失。我的目标是即使我更改数据值，标签仍保留在屏幕右侧。

无需重新加载图表即可动态更新任何值。

data: [
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' }
      ]

我需要将标签放在屏幕右侧，而我知道的唯一方法是使用 labelLayout 选项。问题是，当包含该选项时，就会出现问题。

我曾尝试查看有关 echarts 的文档和其他问题，但一无所获。

我正在开展一个 Angular 17 项目，但您可以在上面的示例中使用 echarts 网站看到此问题。

echarts
Martin Hope
Strike
Asked: 2023-08-17 22:09:23 +0800 CST
  • 5

我试图用我的平均值（每年和过去 13 周）创建两条标记线，第一个标记线将是我的每年平均值，并在 1 月份左右有一个小工具提示位置。我的第二个数据将是我过去 13 周的平均数据，在 7 月左右持有少量仓位。下面的屏幕截图是我所拥有的。

在此输入图像描述

这是小工具提示的屏幕截图。也必须是一个标记线。

在此输入图像描述

这是我的选择。MarkLine根本没有出现。

     xAxis: [
        {
          type: "category",
          data: Object.keys(resultObject),
          show: false,
        },
        {
          position: "bottom",
          type: "category",
          data: categories.map((category) => category.charAt(0)),
          xAxisIndex: 2,
          show: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      yAxis: {
        show: false,
        type: "value",
      },
      series: [
        {
          data: Object.values(resultObject),
          type: "bar",
          itemStyle: {
            color: (seriesIndex) =>
              seriesIndex.dataIndex > 39 ? "#FF5630" : "#A19D9A",
          },
          markLine: {
            data: {
              name: "Horizontal line with Y value at 100",
              yAxis: 100,
            },
          },
        },
      ],
echarts