hustcc / echarts-for-react

⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
https://git.hust.cc/echarts-for-react
MIT License
4.56k stars 633 forks source link

按需加载时图形数据不显示 #419

Closed alienzhangyw closed 3 years ago

alienzhangyw commented 3 years ago

同样的option,使用完整加载时能正常显示,使用typescript的按需加载就不会显示数据。如图: image 第一次用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;
alienzhangyw commented 3 years ago

在echarts那边翻了很多issue,终于找到原因了,使用dataset还要导入DatasetComponent和DatasetComponentOption image