search

antvis / data-set

state driven all in one data process for data visualization.
MIT License
248 stars 46 forks source link

离线状态下，无法正常显示图表组件。 #45

Closed 15502573620 closed 6 years ago

15502573620 commented 6 years ago

复现步骤： 已经安装好npm包，使用时也引入了组价，离线状态下，无法显示图表组件。

npm install @antv/data-set;
import DataSet from '@antv/data-set';

这是因为我使用了typescript的原因吗？在线情况下注释掉

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>

也无法使用图表组件，按理说我已经安装了离线包应该不需要再引入在线资源了。

错误日志： [ts]

无法找到模块“@antv/data-set”的声明文件。“c:/Users/william/Documents/sky-data-backend/node_modules/@antv/data-set/build/data-set.js”隐式拥有 "any" 类型。
  Try `npm install @types/antv__data-set` if it exists or add a new declaration (.d.ts) file containing `declare module '@antv/data-set';`
module "c:/Users/william/Documents/sky-data-backend/node_modules/@antv/data-set/build/data-set"

离线状态下一直显示loading。

leungwensen commented 6 years ago

发一下再现的 demo（codepen 等）

15502573620 commented 6 years ago

我就是使用的贵公司的antd pro 2.0版本，基本没有改动，github拉下来的最新版本代码在开发环境下跑，离线状态下分析页（中间有bizchart图表组件）也是不显示的，这是我的配置文件

{
  "name": "ant-design-pro",
  "version": "2.1.0",
  "description": "An out-of-box UI solution for enterprise applications",
  "private": true,
  "scripts": {
    "presite": "node ./scripts/generateMock.js && cd functions && npm install",
    "start": "cross-env APP_TYPE=site umi dev",
    "start:no-mock": "cross-env MOCK=none umi dev",
    "build": "umi build",
    "site": "npm run presite && cross-env APP_TYPE=site npm run build && firebase deploy",
    "analyze": "cross-env ANALYZE=1 umi build",
    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
    "lint": "eslint --ext .js src mock tests && npm run lint:style",
    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js",
    "test": "umi test",
    "test:component": "umi test ./src/components",
    "test:all": "node ./tests/run-tests.js",
    "prettier": "prettier --write ./src/**/**/**/*",
    "docker:dev": "docker-compose -f ./docker/docker-compose.dev.yml up",
    "docker:build": "docker-compose -f ./docker/docker-compose.dev.yml build",
    "docker-prod:dev": "docker-compose -f ./docker/docker-compose.yml up",
    "docker-prod:build": "docker-compose -f ./docker/docker-compose.yml build"
  },
  "dependencies": {
    "@antv/data-set": "^0.9.6",
    "@antv/g2": "^3.3.1",
    "@babel/runtime": "^7.1.2",
    "antd": "^3.10.0",
    "bizcharts": "^3.2.2",
    "bizcharts-plugin-slider": "^2.0.3",
    "classnames": "^2.2.6",
    "dva": "^2.4.0",
    "enquire-js": "^0.2.1",
    "hash.js": "^1.1.5",
    "lodash": "^4.17.10",
    "lodash-decorators": "^6.0.0",
    "memoize-one": "^4.0.0",
    "moment": "^2.22.2",
    "numeral": "^2.0.6",
    "nzh": "^1.0.3",
    "omit.js": "^1.0.0",
    "path-to-regexp": "^2.4.0",
    "prop-types": "^15.5.10",
    "qs": "^6.5.2",
    "rc-animate": "^2.4.4",
    "react": "^16.5.1",
    "react-container-query": "^0.11.0",
    "react-copy-to-clipboard": "^5.0.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.5.1",
    "react-fittext": "^1.0.0",
    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "@types/react": "^16.4.16",
    "@types/react-dom": "^16.0.9",
    "antd-pro-merge-less": "^0.0.9",
    "antd-theme-webpack-plugin": "^1.1.8",
    "babel-eslint": "^10.0.1",
    "cross-env": "^5.1.1",
    "cross-port-killer": "^1.0.1",
    "enzyme": "^3.7.0",
    "eslint": "^5.4.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-prettier": "^3.0.1",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-compat": "^2.6.2",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-markdown": "^1.0.0-beta.6",
    "eslint-plugin-react": "^7.11.1",
    "gh-pages": "^2.0.1",
    "husky": "^1.1.2",
    "lint-staged": "^7.2.0",
    "merge-umi-mock-data": "^0.0.3",
    "mockjs": "^1.0.1-beta3",
    "prettier": "1.14.3",
    "pro-download": "^1.0.1",
    "stylelint": "^9.4.0",
    "stylelint-config-prettier": "^4.0.0",
    "stylelint-config-standard": "^18.0.0",
    "umi": "^2.1.2",
    "umi-plugin-ga": "^1.1.3",
    "umi-plugin-react": "^1.1.1"
  },
  "optionalDependencies": {
    "puppeteer": "^1.9.0"
  },
  "lint-staged": {
    "**/*.{js,jsx,less}": [
      "prettier --write",
      "git add"
    ],
    "**/*.{js,jsx}": "npm run lint-staged:js",
    "**/*.less": "stylelint --syntax less"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  }
}

主要就是离线不能用的问题，有联网的情况下是正常的

leungwensen commented 6 years ago

发一下 webpack 配置（或者 bigfish 的配置）

leungwensen commented 6 years ago

应该是你使用了 external 的方式引入 dataset 了，这个是构建问题，不是库本身的问题

15502573620 commented 6 years ago

我上面发的就是webpage配置信息....详细的在这里 "dependencies": { "@antv/data-set": "^0.9.6", "@babel/runtime": "^7.1.2", "antd": "^3.10.3", "bizcharts": "^3.2.2", "bizcharts-plugin-slider": "^2.0.3", "classnames": "^2.2.6", "dva": "^2.4.0", "enquire-js": "^0.2.1", "hash.js": "^1.1.5", "lodash": "^4.17.10", "lodash-decorators": "^6.0.0", "memoize-one": "^4.0.0", "moment": "^2.22.2", "numeral": "^2.0.6", "nzh": "^1.0.3", "omit.js": "^1.0.0", "path-to-regexp": "^2.4.0", "prop-types": "^15.5.10", "qs": "^6.5.2", "rc-animate": "^2.4.4", "react": "^16.5.1", "react-container-query": "^0.11.0", "react-copy-to-clipboard": "^5.0.1", "react-document-title": "^2.0.3", "react-dom": "^16.5.1", "react-fittext": "^1.0.0", "react-magic": "^0.2.3", "react-router-dom": "^4.3.1" },

我的自定义组件 ` import React from 'react'; import { Chart, Tooltip, Geom } from 'bizcharts'; import DataSet from '@antv/data-set'; import autoHeight from '../autoHeight'; import styles from '../index.less';

@autoHeight() class GroupMiniBar extends React.Component { render() { const { height, forceFit = true, color = ['green', 'yellow'], data = [] } = this.props;

const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
  type: 'fold',
  fields: ['series1', 'series2'],
  // 展开字段集
  key: 'type',
  // key字段
  value: 'value', // value字段
});

const padding = [36, 5, 18, 5];

const tooltip = [
  'type*value',
  (x, y) => ({
    name: x,
    value: y,
  }),
];

const cols = {
  key: {
    type: 'cat',
    tickInterval: 0,
  },
};

// for tooltip not to be hide
const chartHeight = height + 64;

return (
  <div className={styles.miniChart} style={{ height }}>
    <div className={styles.chartContent}>
      <Chart scale={cols} height={chartHeight} forceFit={forceFit} data={dv} padding={padding}>
        <Tooltip crosshairs={false} />
        <Geom
          type="interval"
          size="19"
          position="label*value"
          color={['type', color]}
          tooltip={tooltip}
          adjust={[
            {
              type: 'dodge',
              marginRatio: 7 / 13,
            },
          ]}
        />
      </Chart>
    </div>
  </div>
);

} } export default GroupMiniBar; `

ts文件：

`import * as React from 'react'; export interface IGroupMiniBarProps { color?: string; height: number; data: Array<{ x: number | string; y: number; }>; style?: React.CSSProperties; }

export default class GroupMiniBar extends React.Component<IGroupMiniBarProps, any> {} ` Analysis组件内使用

<GroupMiniBar data={visitData3} color={['#5DCF43', '#FF492B']} />

确实有通过引用外部，在document.ejs中： `<!DOCTYPE html>

后台管理系统

`

但是注销掉外部引用也没有用，而我本地是按照官网文档引入的，请问有啥错误么？ 麻烦指点一下。

leungwensen commented 6 years ago

我是说 webpack 配置。。。离线不能使用是因为用了在线的 CDN 版本，构建的时候 require('@antv/data-set') 其实拿的是 window.DataSet，而没有把 dataset 的源码合进最终的代码里。这个是和 dataset 无关的问题，你问问 antd-pro 怎么解决吧。