繁体   English   中英

Apache Echarts 动态系列映射

Apache Echarts dynamic series mapping

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试在 apache echarts 中做一个堆叠设备来版本条形图,但失败得很严重。对我来说。

我一直在使用echartsdemo作为一个点来玩它并在顶部添加我的数据。

似乎您需要将系列数据与类别的顺序相匹配,但它始终对我不起作用..

这是我一直在尝试的代码:

var data = [
  {
    "key": {
      "field1": "Device 1",
      "field2": "Unknown"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 2",
      "field2": "Unknown"
    },
    "doc_count": 4
  },
  {
    "key": {
      "field1": "Device 3",
      "field2": "Unknown"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 4",
      "field2": "1.6.0"
    },
    "doc_count": 1
  },
  {
    "key": {
      "field1": "Device 4",
      "field2": "1.6.1"
    },
    "doc_count": 138
  }
]
var labels = Array.from(new Set(data.map((item) => item.key.field1)));
var series = Array.from(new Set(data.map((item) => item.key.field2)));

var seriesData = [];
data.forEach(version => { 
var added = false;

seriesData.forEach(iSeries => { 
if (iSeries.label == version.key.field2){
added = true;

if (!iSeries["added"].includes(version.key.field1)){
    iSeries["added"].push(version.key.field1);
    iSeries.data.push(version.doc_count);
}
else{
  iSeries.data.push(0);
}
}else{
     iSeries.data.push(0);
}
});

if (!added) {
 var newSeries = {
                  label:version.key.field2,
                  data:[version.doc_count],
                  added:[version.key.field1]
                  }
seriesData.push(newSeries);
}
});

console.log(seriesData);

const chartData = series.map((uniqueSrc) => {
      return {
        label: uniqueSrc,
        data: data.map((obj) => {
          if (obj.key.field1 == uniqueSrc) {
        
            return obj.doc_count;
          } else {
            return 0;
          }
        }),
      };
    });



data.forEach((device) => {


})


option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: labels
  },
  yAxis: {
    type: 'value'
  },
  series: seriesData.map((obj, index) => {
        return {
          name: obj.label,

          type: 'bar', stack: 'total',
          data: obj.data
        };
      })
};

也许有更简单的方法? 我的数据也可以按 field1 或 field2 排序,但我尝试了两种方式,但什么也得不到。

感谢您的任何帮助或见解。

1 个回复

我让它工作了,但似乎有点乱。 我更改了数据源(将设备(类别)嵌套在版本(系列)中):

var data = [
  {
    key: '1.6.1',
    doc_count: 138,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 1',
          doc_count: 138
        }
      ]
    }
  },
  {
    key: 'Unknown',
    doc_count: 6,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 2',
          doc_count: 4
        },
        {
          key: 'Device 3',
          doc_count: 1
        },
        {
          key: 'Device 4',
          doc_count: 1
        }
      ]
    }
  },
  {
    key: '1.6.0',
    doc_count: 1,
    'sterms#deviceType': {
      doc_count_error_upper_bound: 0,
      sum_other_doc_count: 0,
      buckets: [
        {
          key: 'Device 1',
          doc_count: 1
        }
      ]
    }
  }
];

   var categories = [];
    this.deviceVersionChartData.forEach((version) => {
      version['sterms#deviceType'].buckets.forEach((category) => {
        if (!categories.includes(category.key)) {
          categories.push(category.key);
        }
      });
    });

    var seriesData = [];
    this.deviceVersionChartData.forEach((version) => {
      var counts = [];
      var firstRun = true;
      version['sterms#deviceType'].buckets.forEach((category) => {

        categories.forEach((cat) => {
          if (cat == category.key) {
            counts.push(category.doc_count);
          } else {
            if (firstRun) {
              counts.push(0);
            }

          }
          firstRun = false;
        });
      });

      var newSeries = {
        label: version.key,
        data: counts
      };
      seriesData.push(newSeries);
    });

这项工作完美......谁能看到获得相同信息的更好或更清晰的方式?

谢谢,

1 Apache Echarts - 使用循环创建系列

这里的所有示例( https://echarts.apache.org/examples/ )都有硬编码的“系列”对象: 我想动态创建这些。 像这样的东西: 那可能吗? ...

2020-08-17 19:48:20 1 177   echarts
5 Echarts - 系列标签

使用 Apache Echarts,我试图为每个系列获取一组明确定义数据源的标签。 在附图中,我显示了 CO2ppm、排气扇状态和 CO2 阀触发器。 但是当我打开系列标签时,它不使用系列的名称,它只是在我将鼠标悬停在数据点上时显示值。 如何在某处添加一个标签来动态查看系列名称/标题并用线条颜色显示 ...

6 Echarts markLine与堆叠系列

我正在尝试使用markLine选项用两条线系列标记图形的顶部。 这些线系列是堆叠在一起的,但是当我尝试使用选项type: max做markLine时type: max顶部图的markLine显示在图下方,因为该值低于显示的值(我附上图片以使其更清晰)。 如何将markLine放在图表上方 ...

7 Apache echarts地图倾斜

我在Apache Echarts中以扭曲/偏斜方式绘制的geojson地图蜜蜂有问题。 地图的高度和宽度与在Google地图或其他工具上看到的外观不同。 可能导致此情况的一件事是,地图的角度不同(大约偏离30度)。 我尝试将geojson加载到其他几个工具中,然后地图正确显示,并与其他地图对齐。 ...

8 如何使用 Apache Echarts 为多个系列设置工具提示标签?

我正在尝试生成一个折线图,该折线图使用 x 轴和两个不同的 y 轴的日期。 我大部分时间都在工作,但我无法获得工具提示以正确显示第二行的标签。 要查看此内容,请转到ECharts 演示编辑器并输入以下代码: 如您所见,线条和 y 轴都正确呈现,但第二个系列(绿线)的标签为空而不是Sales 。 ...

9 如何使用 Apache ECharts 在同一轴内拟合不同长度的系列?

我正在使用 Javascript ECharts库在我的 Angular 2+ 应用程序中显示一些数据。 我看到所有示例都有如下配置: 但我的数据并不总是为 x 轴中的所有标签提供值。 例如,我需要将这些自定义对象数组放入图表中: 当然,我可以在所有系列中手动插入空值或空值,以便它们都为轴中 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM