标签: apache-echarts

我做了一个echart折线图。现在，我想为其添加渐变颜色，如下所示：

在这个链接中，它说它支持设置为渐变颜色。但是当我尝试按照给出的代码执行此操作时：

它给出了这个错误：

该怎么办？

提前致谢。

我的 Angular 应用程序中有以下 EChart：

var option = {
  xAxis: {
    type: 'category',
    data: ["A", "B", "C", "D", "E"]
  },
  yAxis: {
    type: 'value',
  },
  tooltip: {
      trigger: 'axis',
         axisPointer: {
           type: 'shadow',
         },
        formatter: (params) => {
          return (
            "Text One" +
            '<br/>' +
        
            params[0].name
          );
        },
      },
  series: [
    {
      data: [1, 2, 3, 4, 5],
      name: 'value',
      stack: 'one',
      type: 'bar',
      tooltip: {
        formatter: (params) => {
          return (
            "Text One" +
            '<br/>' +
        
            params[0].name
          );
        },
      }, …

我搜索了所有类似的问题，但找不到解决方案。

我开发的饼图如下图所示，我想删除该空白区域并强制图表在其容器内伸展。

配置：

{
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  },
  radius: '100%',
}

CSS 应用于：

width: 100%; // It doesn't matter I apply pixel width or percentage, empty space remains
height: 420px;

仅当恰好在栏内单击时才会触发“单击”事件。如果我们有一个宽度或高度较小的条形，这并不方便。当我将鼠标悬停在栏上时，栏周围的一些空间会以完整的图表高度突出显示，并显示工具提示。我想让突出显示的区域可点击，并且条形数据应该在事件中可用。我已经阅读了文档并尝试了 Chart.on('click', 'xAxis.category', function () {...}); 但该功能没有被触发。

在此演示中，仅当我在栏内单击时才会触发警报。如何使周围区域可点击？

https://codesandbox.io/s/cocky-banzai-6j5pg?file=/src/Chart.js

const dataSeries = [{
        "name": "Containerburg"
      },
      {
        "name": "HTCont1"
      },
      {
        "name": "Kranstrom"
      },
      {
        "name": "Wago3"
      },
      {
        "name": "Wago5"
      },
      {
        "name": "Wago2"
      },
      {
        "name": "Heinrich Campus "
      },
      {
        "name": "SubCont1"
      },
      {
        "name": "Heinrich Campus"
      }
    ];

    const seriesLinks = [{
        "source": "Containerburg",
        "target": "HTCont1",
        "value": 20.874000000000024
      },
      {
        "source": "Kranstrom",
        "target": "Wago3",
        "value": 44.253999999999905
      },
      {
        "source": "Containerburg",
        "target": "Wago5",
        "value": 126.2489999999998
      },
      {
        "source": "Kranstrom",
        "target": "Wago2",
        "value": 151.63200000000006
      },
      {
        "source": …

一直在努力寻找这一点，甚至求助于在控制台中记录 echarts 的各种对象的输出来尝试查看发生了什么。当您在数据中指定不同的维度时，视觉映射似乎无法正常工作，因此我一直在尝试为我的线系列编写一个简单的 renderItem 函数。我找不到任何有关渲染线条的细节的文档或示例 - 具体来说，当数据传递到其中时，如何获取线条起点和终点的坐标点？我可以获得该点的值（该数据点将为您提供当前数据点的坐标），但一条线由 2 个点（起点和终点）组成。我在这里缺少什么？

Codepen 示例： https: //codepen.io/WorldWideWebb/pen/JjbJpRJ

VisualMap 不起作用（它改变了点的颜色，而不是线的颜色；点颜色确实改变得很好，但我想给线着色）

    visualMap: {
        dimension: 3,
        seriesIndex: 2,
        show: false,
        pieces: [{
            gt: 0,
            lte: 50,
            color: '#93CE07'
        }, {
            gt: 50,
            lte: 100,
            color: '#FBDB0F'
        }, {
            gt: 100,
            lte: 150,
            color: '#FC7D02'
        }, {
            gt: 150,
            lte: 200,
            color: '#FD0100'
        }, {
            gt: 200,
            lte: 300,
            color: '#AA069F'
        }, {
            gt: 300,
            color: '#AC3B2A'
        }],
        outOfRange: {
            color: '#999'
        }
    },

如果取消注释 codepen 示例中的 VisualMap …