[Bug] Property 'data' does not exist on type 'XAXisOption'.

vipsunwei commented 1 year ago

Version

5.4.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=line-simple&lang=ts&version=5.4.2&theme=dark&code=C4TwDgpgBAyhBOBLCBnA8mYiD2A7KAvFBAMYAWAhvMCgHRxKoZZ4DcAUKJFABoCCPRCgDC2ALZg8EXMGY58RUpWp1-gkeMm5pszPI7Y9eQlADe7KFABGFEgGsA5vGwBXXABNRAG2zwAXFAA5ADEAIzhgQA0FlBOiO4BptbYwMDiAQDMAAxQAL7Rll4QDtIJZjGW7hTAFAEA2oGA0XKAb3JRQYCUdoBlem2BgCw2gPOJgQC6BZZQwBAAHsAwoEWJFWMAZngziABeEAGhAGyjY1Ak2D7-QcFLF5eBi7kx-TFpx1hgCwcoZNgA7gHA8C4QiwA9ICoCt4GJqhNTks3CQWPgABRgKgUMQoACU5QOwLGR1wKGAUDciEJRGR8FRdBQCGQKAAcqjoARmR1ulAAPxBAANgSgAXJlNo1MY9MZhBZfUGHKCYi8vICgWu2JBlngEGALng-AFaKFNNQDLE0AA1EEADxWeCAgB8vNNOrouDFpt5QSg9pRuoAbhQvP93W67UTcCSgSD7pYI1BJnxJkJ6otzAdLFwtkESNVir4QFFFpYKHGUAAZChWCBeRKHY6-BXnC68qMHAtCIuIbSVrxtiCzEDzMxVk614Q7YSjgBiDby-zGzZQABVEPZK-8vgElr7qVO81AqjUE8mxoCAFTRwAu8YAHU0AdsZQI-A7dDG4xEbsGIgWPxqB1RPb1MKn1-iBcwPJ0jQVAYoARWV0SA5NJBQEl5AVIolmAGCDhAiA5ymGY5jTJIjkHM4ri3A9ZxLMsK37AiayI-sSOTFAwE7YBW3bLEDygFdvnGP4IGnA5O20Hs-3w6tTkCeAHBsBEAHYZMiABOUJIlCLJ5KyWgFOgyJxnANNAiqd4IHcBtt0bGdC1YvDOI-bjfn-HTBO7XDK2o8S6yWSdbgOcyk2TX8gn_f40LGDCFS6CCuW07c4IQvAFSQBwyFQ_ioAwrDpmE6y3NrYjzPzSzS3LVyxNyuj8s4piSSs5dbLXDdoAqsiu1q1ceIcqAnKykrCJCPK8kfSxn0sYVaX3MY_PQxkFRaEKUz0hUbHgObrCoAB1eJgDIAIFNSkkIDEbr2IPHKzgAJhkgAhHYABEAA4lWTCrd1qT9t0sY8oBaK8bzvA8Hx86dJtC6bWRWgLAiclaUBAMQrGOGANjTeTt32w6XOO5NTpCPg-AAFjxs6AFZHsB7c30LABJDwpm2VKXvGg9Pq6H7b3vG4ge3MKggGcGFqCKHUphuGEaRgIUYPNGjuBg5seCLIdjurIx1CUmxme6pXq_DioE-gZWb-5MAfVp92FyDh2DbKF1xIaAAFUwF3CBhGUYAAAVPXYtsSHiHQAlwFw4YQOohg4FMDpeNLA7LeAQ7DqBPkzU4A6D2PQ5iMRVjIPh4FOAkkFwBw47Nl88QJIlHczF2qFJCCkm932ZB0iYJB0xOoR0zOZGz3O8gCB2ner6gPYpMRMQIa0vaWCCxBAIfgExYGEUMeFaBjQsoAoFBeAEIRRAkKQZDkPAQ_ROosiGWgXpMLutpz-B48sZejFwPURU37eGFpY_cFP8_L-vkQBu7gdCPwgiveQb9aQf1gPqdAL8_6hAAZrEwLcwBgOfqvUaqAYFfyYAgoYZ8zrIJqCYduCAwGz3nnqXQ8JMHyHRPHW45t2A4kAIRWgB9oyvIAF7NAANpuwakwAFxGlcMABECJx6Tz8mXQkt8e7wBMNrMYgRQiAAhzEKgQzrqOnIEDI2jFiBDxvog4gQibGOUTscxlhAgySsUEO6djAgKUcapFxaiNGhC0Y9dOlgZFQGAToRRqkdLhCyCEsJUBQgZBCXjEJexInyUiUrcJITklQBkhE0IRML7xz8WgoJmTlKRLOiE6JkTYlQDOvEi6Okzp3RCbtJJITElZJ8VWfEhJyEKKIHUVShTMlnUydkGJmSdiZIyakzJClMlpNCBMyJ2S2kuErhMeeCJ664B9iApu4wI5tyTp3LO988iMLNuErIWRGFAA

Steps to Reproduce

import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

var chartDom = document.getElementById('main')!; var myChart = echarts.init(chartDom, 'dark'); var option: EChartsOption;

type SeriesOption = echarts.SeriesOption; type XAXisComponentOption = echarts.XAXisComponentOption; option = { backgroundColor: '#111', grid: { bottom: 30 }, legend: { data: ['事件', '温度', '水量'], textStyle: { fontSize: 16, color: '#ffffff' } }, tooltip: { show: true // formatter: function (params) { // const unit = params.seriesName === '温度' ? '°' : params.seriesName === '水量' ? 'ml' : '' // return params.seriesName + '
' + params.name + ' ' + params.value + ' ' + unit // }, }, xAxis: [ { type: 'category', axisLabel: { color: '#fff' }, axisLine: { lineStyle: { color: '#C6CCCF' } }, axisTick: { show: false }, data: [ / x轴数据 / ] } ],

yAxis: [ { type: 'value', name: '水量 (ml)', position: 'left', nameTextStyle: { color: '#fff' }, axisLabel: { color: '#fff' }, splitLine: { show: true, lineStyle: { color: 'rgba(77,91,107,0.9)', type: 'dashed' } }, axisLine: { show: true, lineStyle: { color: '#fff' } } }, { type: 'value', name: '温度 (°)', position: 'right', nameTextStyle: { color: '#fff' }, axisLabel: { color: '#fff' }, splitLine: { show: false }, axisLine: { show: true, lineStyle: { color: '#fff' } } } ], series: [ { name: '事件', type: 'bar', barWidth: 9, itemStyle: { color: '#27B6D8' }, data: [ / 事件数据 / ] }, { name: '温度', type: 'line', symbolSize: 7, itemStyle: { color: '#AA4425' }, yAxisIndex: 1, data: [ / 温度数据 / ] }, { name: '水量', type: 'line', symbolSize: 7, itemStyle: { color: '#0680F1' }, data: [ / 水量数据 / ] } ] };

interface UpdateChartParam { incident: number[]; temp: number[]; water: number[]; monthArr: string[]; }

option && myChart.setOption(option);

Current Behavior

Property 'data' does not exist on type 'XAXisOption'. Property 'data' does not exist on type 'ValueAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { ...; }'.(2339)

Expected Behavior

I hope that TypeScript checks can pass without errors and the project can be packaged normally

Environment

- OS:macOS 13.3.1 (a) (22E772610a)
- Browser: chrome
- Framework: typescript@5.0.4 echarts@5.4.2 vue@3

Any additional comments?

No response

vipsunwei commented 1 year ago

helgasoft commented 1 year ago

"XAXisOption" is not part of ECharts. The rest works fine. Pretty chart 😁 Demo Code

vipsunwei commented 1 year ago

"XAXisOption" is not part of ECharts. The rest works fine. Pretty chart 😁 Demo Code

When I was writing echarts chart code using TS, a type error was reported. Here is the code. demo code

The location of the error is shown in the screenshot below, marked with a red arrow.

helgasoft commented 1 year ago

oops, sorry, never used TS, now I see it's real. But why is the chart showing the correct xAxis despite the error ? Someone else needs to answer that...

vipsunwei commented 1 year ago

oops, sorry, never used TS, now I see it's real. But why is the chart showing the correct xAxis despite the error ? Someone else needs to answer that...

In my vue@3+vite@4 project, packaging is required when the development is completed for deployment, and when I execute this ["vue-tsc && vite build"] packaging command, vue-tsc checks for this type error and terminates my packaging command

> vue-tsc && vite build

src/components/monitor/ReportIncident.vue:124:50 - error TS2339: Property 'data' does not exist on type 'XAXisOption'.
  Property 'data' does not exist on type 'ValueAxisBaseOption & { gridIndex?: number | undefined; gridId?: string | undefined; position?: CartesianAxisPosition | undefined; offset?: number | undefined; categorySortInfo?: OrdinalSortInfo | undefined; } & { ...; }'.

124     ;(option.xAxis as XAXisComponentOption[])[0].data = monthArr
                                                     ~~~~

Found 1 error in src/components/monitor/ReportIncident.vue:124

 ELIFECYCLE  Command failed with exit code 2.

I created a small reproduction project, here is the GitHub address echarts-typescript-error-demo

steps:

pnpm install
pnpm build

helgasoft commented 1 year ago

Error says "packager" is looking for ValueAxisBaseOption which indeed does not have data property. But xAxis[0] is in fact defined as category, and CategoryAxisBaseOption has data property. That is the problem. Why it happens ? Have no idea.

Workaround is to define xAxis in advance - Demo Code

linghaoSu commented 1 year ago

It looks like the union type is currently used for constraints, not just definitions, so when using it, since it doesn't all have a data field, it's best to bring a keyword that constrains the type, in this case type

demo

helgasoft commented 1 year ago

...but xAxis.data is array already, so I tried only option.xAxis[0].data = monthArr; and it works.

Also curious - why the need to define xAxis after chart initialization? Why not set it in option as in my Demo Code?

sjcobb commented 1 year ago

+1 I've noticed this issue before, also it might be nice to rename the XAXisOption and YAXisOption types as part of this fix to XAxisOption and YAxisOption to fix the typos

Xabsurd commented 1 month ago

使用CategoryAxisBaseOption即可 Just use CategoryAxisBaseOption.

(chartOption.xAxis as CategoryAxisBaseOption).data = ArrayDowngrade(base, 0);

:)

vincerubinetti commented 3 weeks ago

Just to be clear... this is bug with the types, right? You're definitely able to put data on xAxis, as shown in many echarts examples.

If so, the issue probably belongs on the @types/echarts package.

apache / echarts