[Bug] Property 'data' does not exist on type 'XAXisOption'.
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### 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[];
}
const updateChart = ({ incident, temp, water, monthArr }: UpdateChartParam) => {
if (myChart) {
(option.xAxis as XAXisComponentOption[])[0].data = monthArr;
(option.series as SeriesOption[])[0].data = incident;
(option.series as SeriesOption[])[1].data = temp;
(option.series as SeriesOption[])[2].data = water;
myChart.setOption(option);
}
};
// 模拟数据更新
setTimeout(() => {
const monthArr = [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月'
];
const incident = [10, 110, 10, 13, 14, 16, 17, 180, 10, 180, 70, 150];
const temp = [10, 11, 12, 13, 14, 26, 27, 28, 19, 18, 17, 15];
const water = [100, 110, 120, 130, 140, 160, 170, 180, 190, 180, 170, 150];
updateChart({ incident, temp, water, monthArr });
}, 1000);
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
```markdown
- 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_
Contributor guide
Assessment
This issue has not been assessed yet.