Closed alienzhangyw closed 3 years ago
同样的option,使用完整加载时能正常显示,使用typescript的按需加载就不会显示数据。如图: 第一次用echarts,是我的用法有哪里不对吗?
import ReactEChartsCore from 'echarts-for-react/lib/core'; import { LineChart, LineSeriesOption } from 'echarts/charts'; import { DataZoomComponent, DataZoomComponentOption, GridComponent, GridComponentOption, ToolboxComponent, ToolboxComponentOption, TooltipComponent, TooltipComponentOption } from 'echarts/components'; import * as echarts from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; echarts.use([ ToolboxComponent, TooltipComponent, GridComponent, DataZoomComponent, LineChart, CanvasRenderer, ]); type ECOption = echarts.ComposeOption<ToolboxComponentOption | TooltipComponentOption | GridComponentOption | DataZoomComponentOption | LineSeriesOption>; const Page = () => { const DEFAULT_OPTION: ECOption = { tooltip: { }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none', }, restore: {}, saveAsImage: {}, }, }, xAxis: { type: 'time', // boundaryGap: false, }, yAxis: { type: 'value', // boundaryGap: false, }, dataZoom: [{ type: 'inside' }, {}], series: [{ type: 'line', name: '历史值', encode: { x: 'timestamp', y: 'value' }, }], dataset: { source: Array.from({ length: 300 }, (_v, i) => ({ index: i + 1, value: Math.round(Math.random() * 30 + 200), // value: Math.random() > 0.5 ? 'True' : 'False', timestamp: Date.now() - 1500000 + 5000 * i, quality: Math.round(Math.random() * 200), })), }, }; return ( <ReactEChartsCore echarts={echarts} option={DEFAULT_OPTION} style={{ width: '500px', height: '400px' }} /> ); }; export default Page;
在echarts那边翻了很多issue,终于找到原因了,使用dataset还要导入DatasetComponent和DatasetComponentOption
同样的option,使用完整加载时能正常显示,使用typescript的按需加载就不会显示数据。如图: 第一次用echarts,是我的用法有哪里不对吗?