不支持dataset数据集

[zhaozhenkun]

Confirmation

• [X] I can confirm this is a feature request for the Vue component instead of ECharts itself.

Details

使用dataset数据集无效

[Justineo]

import { use } from 'echarts/core'
import { DatasetComponent } from 'echarts/components'

use([DatasetComponent])

[BenJackGill]

Can you please add this to the documentation page :) I spent a long time trying to debug this.

[Justineo]

@BenJackGill We've released an import code generator to help with this. You can try out here: https://vue-echarts.dev/#codegen

[BenJackGill]

I don't know what this tool is supposed to do?

I tried putting in my options code (the options object I use for chart) and it keeps saying:

/* Unable to parse `option` code */
// Unexpected token ':'

[Justineo]

Can you paste it here?

[BenJackGill]

I have this reactive object I am using for the options:

const lineChartOptions = reactive<ECOption>({
  grid: {
    left: 40,
    top: 30,
    right: 20,
    bottom: 30,
  },
  xAxis: {
    type: "time",
    boundaryGap: ["1%", "1%"],
    offset: 1,
    axisPointer: {
      show: true,
      snap: true,
    },
    axisLabel: {
      formatter: "{d} {MMM} {yy}",
    },
  },
  yAxis: {
    type: "value",
    inverse: true,
    axisLabel: {
      formatter: (value: number): string => {
        return value === 100 ? "100+" : value.toString();
      },
    },
    min: 1,
    max: 100,
  },
  dataset: {
    dimensions: ["x", "y"],
    source: seriesData, // Because we are inside reactive object, we don't need to use .value
  },
  series: [
    {
      type: "line",
      smooth: true,
      lineStyle: {
        width: 5,
      },
    },
  ],
  tooltip: {
    show: true,
  },
  visualMap: {
    show: false,
    type: "continuous",
    min: 1,
    max: 100,
    inRange: {
      color: [greenMediumHex, orangeMediumHex, redMediumHex],
    },
  },
});

And this is just the object part I was pasting:

{
  grid: {
    left: 40,
    top: 30,
    right: 20,
    bottom: 30,
  },
  xAxis: {
    type: "time",
    boundaryGap: ["1%", "1%"],
    offset: 1,
    axisPointer: {
      show: true,
      snap: true,
    },
    axisLabel: {
      formatter: "{d} {MMM} {yy}",
    },
  },
  yAxis: {
    type: "value",
    inverse: true,
    axisLabel: {
      formatter: (value: number): string => {
        return value === 100 ? "100+" : value.toString();
      },
    },
    min: 1,
    max: 100,
  },
  dataset: {
    dimensions: ["x", "y"],
    source: seriesData, // Because we are inside reactive object, we don't need to use .value
  },
  series: [
    {
      type: "line",
      smooth: true,
      lineStyle: {
        width: 5,
      },
    },
  ],
  tooltip: {
    show: true,
  },
  visualMap: {
    show: false,
    type: "continuous",
    min: 1,
    max: 100,
    inRange: {
      color: [greenMediumHex, orangeMediumHex, redMediumHex],
    },
  },
}

[Justineo]

I'm sorry you need to paste in JavaScript literals (which cannot contain type annotations and variables like greenMediumHex).

@@ -21,7 +21,7 @@
     type: "value",
     inverse: true,
     axisLabel: {
-      formatter: (value: number): string => {
+      formatter: (value) => {
         return value === 100 ? "100+" : value.toString();
       },
     },
@@ -30,7 +30,7 @@
   },
   dataset: {
     dimensions: ["x", "y"],
-    source: seriesData, // Because we are inside reactive object, we don't need to use .value
+    source: [], // Because we are inside reactive object, we don't need to use .value
   },
   series: [
     {
@@ -50,7 +50,7 @@
     min: 1,
     max: 100,
     inRange: {
-      color: [greenMediumHex, orangeMediumHex, redMediumHex],
+      color: [],
     },
   },
 }

[Justineo]

Update: codegen now supports TypeScript, but still you need to remove undeclared variables for it to correctly evaluate the option value.

[taozhipeng1990]

此处 可能会遇上一个小问题。 从后端接口获取的json格式数据 对象。直接设置到source上，会报错。 例如:
let res = await Axios.post('url',data).then(res=>res.json); option.dataset.source.push(...res.data.list) 会出错 reactivity.esm-bundler.js:418 Uncaught (in promise) TypeError: obj.hasOwnProperty is not a function

可以打印api.data.list 项。对比初始时设置的source项。

api.data.list 中的对象是 没有hasOwnProperty 的 但在JS中创建的对象 new obj = {a:1} 是存在hasOwnProperty 的

apiRes.data.list.forEach(item => {
    option.value.dataset.source.push(Object.assign({}, item))            
})