├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── CHANGELOG_CN.md ├── CONTRIBUTING.md ├── CONTRIBUTING_CN.md ├── LICENSE ├── README.md ├── README_CN.md ├── build ├── config.js ├── rollup.config.js └── webpack.config.js ├── docs ├── .nojekyll ├── CNAME ├── bar.md ├── bmap.md ├── candle.md ├── data.md ├── en │ ├── README.md │ ├── bar.md │ ├── bmap.md │ ├── candle.md │ ├── data.md │ ├── event.md │ ├── funnel.md │ ├── gauge.md │ ├── heatmap.md │ ├── histogram.md │ ├── line.md │ ├── liquidfill.md │ ├── map.md │ ├── navbar.md │ ├── pie.md │ ├── props-demo1.md │ ├── props-demo2.md │ ├── props.md │ ├── radar.md │ ├── ring.md │ ├── sankey.md │ ├── scatter.md │ ├── sidebar.md │ ├── skill-demo.md │ ├── start.md │ ├── tree.md │ ├── waterfall.md │ └── wordcloud.md ├── event.md ├── favicon.ico ├── funnel.md ├── gauge.md ├── heatmap.md ├── histogram.md ├── index.html ├── install.md ├── line.md ├── liquidfill.md ├── map.md ├── navbar.md ├── pie.md ├── props-demo1.md ├── props-demo2.md ├── props.md ├── radar.md ├── ring.md ├── sankey.md ├── scatter.md ├── sidebar.md ├── skill-demo.md ├── start.md ├── style.css ├── toggle.md ├── tree.md ├── waterfall.md └── wordcloud.md ├── examples ├── App.vue ├── components │ ├── code-section.vue │ └── sidebar.vue ├── data │ ├── bar.js │ ├── candle.js │ ├── chart.js │ ├── funnel.js │ ├── gauge.js │ ├── global.js │ ├── heatmap.js │ ├── histogram.js │ ├── index.js │ ├── line.js │ ├── liquidfill.js │ ├── map.js │ ├── pie.js │ ├── radar.js │ ├── ring.js │ ├── sankey.js │ ├── scatter.js │ ├── tree-data.js │ ├── tree.js │ ├── waterfall.js │ └── wordcloud.js ├── favicon.ico ├── index.html ├── main.js ├── pages │ ├── amap.vue │ ├── bmap.vue │ ├── chart.vue │ ├── install.vue │ └── test.vue ├── router.js ├── static │ └── logo.png └── test │ ├── columns-rows.vue │ ├── custom-props.vue │ ├── data-zoom.vue │ ├── data.js │ ├── events.vue │ ├── extend.vue │ ├── hook.vue │ ├── init.vue │ ├── judge-width.vue │ ├── load.vue │ ├── loading-empty.vue │ ├── mark.vue │ ├── number-format.vue │ ├── resize.vue │ └── set-option.vue ├── package-lock.json ├── package.json ├── src ├── component-list.js ├── components │ ├── data-empty.vue │ └── loading.vue ├── constants.js ├── core.js ├── index.es.js ├── modules │ ├── animation.js │ ├── extend.js │ └── mark.js ├── packages │ ├── amap │ │ ├── index.js │ │ └── main.js │ ├── bar │ │ ├── index.js │ │ └── main.js │ ├── bmap │ │ ├── index.js │ │ └── main.js │ ├── candle │ │ ├── index.js │ │ └── main.js │ ├── chart │ │ └── index.js │ ├── funnel │ │ ├── index.js │ │ └── main.js │ ├── gauge │ │ ├── index.js │ │ └── main.js │ ├── heatmap │ │ ├── index.js │ │ └── main.js │ ├── histogram │ │ └── index.js │ ├── index │ │ └── index.js │ ├── line │ │ ├── index.js │ │ └── main.js │ ├── liquidfill │ │ ├── index.js │ │ └── main.js │ ├── map │ │ ├── index.js │ │ └── main.js │ ├── pie │ │ ├── index.js │ │ └── main.js │ ├── radar │ │ ├── index.js │ │ └── main.js │ ├── ring │ │ └── index.js │ ├── sankey │ │ ├── index.js │ │ └── main.js │ ├── scatter │ │ ├── index.js │ │ └── main.js │ ├── tree │ │ ├── index.js │ │ └── main.js │ ├── waterfall │ │ ├── index.js │ │ └── main.js │ └── wordcloud │ │ ├── index.js │ │ └── main.js └── utils.js └── test ├── index.js ├── karma.conf.js └── load ├── cdn ├── all │ └── index.html ├── bmap │ └── index.html ├── candle │ └── index.html ├── gauge │ └── index.html ├── heatmap │ └── index.html └── line │ └── index.html └── webpack ├── all ├── App.vue ├── index.js └── webpack.config.js ├── candle ├── App.vue ├── index.js └── webpack.config.js ├── css-part ├── App.vue ├── index.js └── webpack.config.js ├── esm ├── App.vue ├── index.js └── webpack.config.js ├── gauge ├── App.vue ├── index.js └── webpack.config.js ├── heatmap ├── App.vue ├── index.js └── webpack.config.js ├── index.html ├── line ├── App.vue ├── index.js └── webpack.config.js ├── scatter ├── App.vue ├── index.js └── webpack.config.js └── svg ├── App.vue ├── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false, 7 | "targets": { 8 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 9 | } 10 | } 11 | ], 12 | "stage-2" 13 | ], 14 | "plugins": [ 15 | "transform-object-assign" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib/* 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | extends: 'standard', 13 | plugins: [ 14 | 'html' 15 | ], 16 | rules: { 17 | 'no-mixed-operators': 'off' 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | ### Summary 简述 3 | 4 | 5 | 6 | ### Expect 期望结果 7 | 8 | 9 | 10 | ### Reproduce 重现示例 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | #### Check List 2 | - [ ] Every Commit message is meaningful 3 | - [ ] Synchronized with the master branch 4 | - [ ] CI passed 5 | 6 | #### What Changed 7 | 8 | 9 | #### Breaking Change 10 | - [ ] Yes 11 | - [ ] No 12 | 13 | #### Document Update 14 | - [ ] Yes 15 | - [ ] No 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | npm-debug.log 4 | yarn-error.log 5 | lib 6 | docs/index.min.js 7 | docs/style.min.css 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build 2 | examples 3 | docs 4 | .babelrc 5 | .eslintrc.js 6 | .travis.yml 7 | yarn.lock 8 | node_modules 9 | yarn-error.log 10 | npm-debug.log 11 | dist 12 | test 13 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | branches: 5 | only: 6 | - master 7 | install: 8 | - npm i 9 | script: 10 | - npm run build 11 | - npm run test 12 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | # [1.19.0](https://github.com/ElemeFE/v-charts/compare/v1.18.0...v1.19.0) (2018-11-02) 3 | 4 | 5 | ### Bug Fixes 6 | 7 | * **pie:** support multi pie item ([0a99bd2](https://github.com/ElemeFE/v-charts/commit/0a99bd2)) 8 | 9 | 10 | 11 | 12 | # [1.18.0](https://github.com/ElemeFE/v-charts/compare/v1.17.10...v1.18.0) (2018-10-15) 13 | 14 | 15 | ### Features 16 | 17 | * **core:** add log prop to comp ([7abca27](https://github.com/ElemeFE/v-charts/commit/7abca27)) 18 | * Improve the configuration of the seriesMap and wave in the configuration settings of the water polo map ([3e82c6f](https://github.com/ElemeFE/v-charts/commit/3e82c6f)) 19 | * add wordcloud chart ([30ddf30](https://github.com/ElemeFE/v-charts/commit/30ddf30)) 20 | * add liquidfill chart ([391d62d](https://github.com/ElemeFE/v-charts/commit/391d62d)) 21 | 22 | 23 | 24 | 25 | ## [1.17.10](https://github.com/ElemeFE/v-charts/compare/v1.17.9...v1.17.10) (2018-08-10) 26 | 27 | 28 | ### Features 29 | 30 | * **map:** hide map of no value part ([b2b0f39](https://github.com/ElemeFE/v-charts/commit/b2b0f39)) 31 | 32 | 33 | 34 | 35 | ## [1.17.9](https://github.com/ElemeFE/v-charts/compare/v1.17.8...v1.17.9) (2018-07-30) 36 | 37 | 38 | ### Bug Fixes 39 | 40 | * **core:** load error while change data ([3517aa5](https://github.com/ElemeFE/v-charts/commit/3517aa5)) 41 | 42 | 43 | 44 | 45 | ## [1.17.8](https://github.com/ElemeFE/v-charts/compare/v1.17.7...v1.17.8) (2018-07-11) 46 | 47 | 48 | ### Features 49 | 50 | * **core:** add hooks params of options and Echarts ([e4ef7bd](https://github.com/ElemeFE/v-charts/commit/e4ef7bd)) 51 | 52 | 53 | 54 | 55 | ## [1.17.7](https://github.com/ElemeFE/v-charts/compare/v1.17.6...v1.17.7) (2018-07-10) 56 | 57 | 58 | ### Bug Fixes 59 | 60 | * **heatmap:** display error while data us empty ([9e6b16a](https://github.com/ElemeFE/v-charts/commit/9e6b16a)) 61 | 62 | 63 | 64 | 65 | ## [1.17.6](https://github.com/ElemeFE/v-charts/compare/v1.17.5...v1.17.6) (2018-06-26) 66 | 67 | 68 | ### Features 69 | 70 | * **core:** add notSetUnchange prop ([48d4346](https://github.com/ElemeFE/v-charts/commit/48d4346)) 71 | 72 | 73 | 74 | 75 | ## [1.17.5](https://github.com/ElemeFE/v-charts/compare/v1.17.4...v1.17.5) (2018-06-25) 76 | 77 | 78 | ### Bug Fixes 79 | 80 | * **line:** line display error while use dataZoom ([6cdf155](https://github.com/ElemeFE/v-charts/commit/6cdf155)), closes [#394](https://github.com/ElemeFE/v-charts/issues/394) [#387](https://github.com/ElemeFE/v-charts/issues/387) 81 | 82 | 83 | 84 | 85 | ## [1.17.4](https://github.com/ElemeFE/v-charts/compare/v1.17.3...v1.17.4) (2018-06-22) 86 | 87 | 88 | ### Features 89 | 90 | * **core:** add resize checker ([5f8196d](https://github.com/ElemeFE/v-charts/commit/5f8196d)) 91 | * **style:** change mask status opacity and add blur ([7063c4a](https://github.com/ElemeFE/v-charts/commit/7063c4a)) 92 | 93 | 94 | 95 | 96 | ## [1.17.3](https://github.com/ElemeFE/v-charts/compare/v1.17.2...v1.17.3) (2018-06-19) 97 | 98 | 99 | ### Features 100 | 101 | * **funnel:** add `filterZero` and `useDefaultOrder` attribute in settings ([#373](https://github.com/ElemeFE/v-charts/issues/373)) ([687491d](https://github.com/ElemeFE/v-charts/commit/687491d)) 102 | -------------------------------------------------------------------------------- /CHANGELOG_CN.md: -------------------------------------------------------------------------------- 1 | 2 | # [1.19.0](https://github.com/ElemeFE/v-charts/compare/v1.18.0...v1.19.0) (2018-11-02) 3 | 4 | 5 | ### Bug Fixes 6 | 7 | * **pie:** support multi pie item ([0a99bd2](https://github.com/ElemeFE/v-charts/commit/0a99bd2)) 8 | 9 | 10 | 11 | 12 | # [1.18.0](https://github.com/ElemeFE/v-charts/compare/v1.17.10...v1.18.0) (2018-10-15) 13 | 14 | 15 | ### Features 16 | 17 | * **core:** add log prop to comp ([7abca27](https://github.com/ElemeFE/v-charts/commit/7abca27)) 18 | * 完善水球图的配置settings中关于seriesMap和wave的配置项 ([3e82c6f](https://github.com/ElemeFE/v-charts/commit/3e82c6f)) 19 | * 增加词云图的封装 ([30ddf30](https://github.com/ElemeFE/v-charts/commit/30ddf30)) 20 | * 增加水球图 ([391d62d](https://github.com/ElemeFE/v-charts/commit/391d62d)) 21 | 22 | 23 | 24 | 25 | ## [1.17.10](https://github.com/ElemeFE/v-charts/compare/v1.17.9...v1.17.10) (2018-08-10) 26 | 27 | 28 | ### Features 29 | 30 | * **map:** 隐藏地图中无数据部分的提示 ([b2b0f39](https://github.com/ElemeFE/v-charts/commit/b2b0f39)) 31 | 32 | 33 | 34 | 35 | ## [1.17.9](https://github.com/ElemeFE/v-charts/compare/v1.17.8...v1.17.9) (2018-07-30) 36 | 37 | 38 | ### Bug Fixes 39 | 40 | * **core:** 修复在组件被销毁时改编数据触发的报错 ([3517aa5](https://github.com/ElemeFE/v-charts/commit/3517aa5)) 41 | 42 | 43 | 44 | 45 | ## [1.17.8](https://github.com/ElemeFE/v-charts/compare/v1.17.7...v1.17.8) (2018-07-11) 46 | 47 | 48 | ### Features 49 | 50 | * **core:** 增加 options and Echarts 到钩子函数中 ([e4ef7bd](https://github.com/ElemeFE/v-charts/commit/e4ef7bd)) 51 | 52 | 53 | 54 | 55 | ## [1.17.7](https://github.com/ElemeFE/v-charts/compare/v1.17.6...v1.17.7) (2018-07-10) 56 | 57 | 58 | ### Bug Fixes 59 | 60 | * **heatmap:** 修复地图热力图在数据为空时的报错 ([9e6b16a](https://github.com/ElemeFE/v-charts/commit/9e6b16a)) 61 | 62 | 63 | 64 | 65 | ## [1.17.6](https://github.com/ElemeFE/v-charts/compare/v1.17.5...v1.17.6) (2018-06-26) 66 | 67 | 68 | ### Features 69 | 70 | * **core:** 增加 notSetUnchange 属性 ([48d4346](https://github.com/ElemeFE/v-charts/commit/48d4346)) 71 | 72 | 73 | 74 | 75 | ## [1.17.5](https://github.com/ElemeFE/v-charts/compare/v1.17.4...v1.17.5) (2018-06-25) 76 | 77 | 78 | ### Bug Fixes 79 | 80 | * **line:** 修复折线图与缩放组件同时使用时的样式问题 ([6cdf155](https://github.com/ElemeFE/v-charts/commit/6cdf155)), closes [#394](https://github.com/ElemeFE/v-charts/issues/394) [#387](https://github.com/ElemeFE/v-charts/issues/387) 81 | 82 | 83 | 84 | 85 | ## [1.17.4](https://github.com/ElemeFE/v-charts/compare/v1.17.3...v1.17.4) (2018-06-22) 86 | 87 | 88 | ### Features 89 | 90 | * **core:** 增加 resize 时的容器检测 ([5f8196d](https://github.com/ElemeFE/v-charts/commit/5f8196d)) 91 | * **style:** 修改 loading 和 data-empty 样式 ([7063c4a](https://github.com/ElemeFE/v-charts/commit/7063c4a)) 92 | 93 | 94 | 95 | 96 | ## [1.17.3](https://github.com/ElemeFE/v-charts/compare/v1.17.2...v1.17.3) (2018-06-19) 97 | 98 | 99 | ### Features 100 | 101 | * **funnel:** 增加 `filterZero` 和 `useDefaultOrder` 配置 ([#373](https://github.com/ElemeFE/v-charts/issues/373)) ([687491d](https://github.com/ElemeFE/v-charts/commit/687491d)) 102 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # v-charts Contributing Guide 2 | 3 | v-charts is a Vue2.x package-based Echarts chart component that provides developers with services to quickly generate charts. 4 | The growth of v-charts is inseparable from everyone's support. If you would like to contribute code for v-charts, please read the following: 5 | 6 | ## Development principles 7 | 8 | The core principle of v-charts is that developers can **simplify configuration items**. Based on this principle, v-charts has the following conventions: 9 | 10 | 1. The data needs to use the form of metrics dimension. For details, 11 | please refer to [document](https://v-charts.js.org/#/en/data). 12 | 2. The setting of metrics dimensions, data types, simplified configuration items, 13 | data aliases, etc. are achieved through the addition of attributes in settings. 14 | 3. In addition to introducing the dependency (eg: line) of the corresponding 15 | module, the component tries not to introduce plug-in dependencies (eg: visualMap). 16 | 17 | ## Setting up the env 18 | 19 | - Installation dependencies `npm install` 20 | - Run development `npm run dev` 21 | - Generate components `npm run build` 22 | - Run the document `npm run docs` 23 | - Run the test `npm run test` 24 | 25 | ## Component development 26 | 27 | To develop a new chart component, first add the corresponding chart under 28 | `src/packages`, then add the corresponding data under `examples/data` and 29 | import it in `index.js`, and finally add corresponding components in 30 | `src/index.es.js`, `src/component-list` and `src/index/index.js`. After development, 31 | you need to add docs in `docs` folder and add it to sidebar. 32 | 33 | ## Code Style 34 | 35 | Follow [standard](https://standardjs.com/). 36 | -------------------------------------------------------------------------------- /CONTRIBUTING_CN.md: -------------------------------------------------------------------------------- 1 | # v-charts 贡献指南 2 | 3 | v-charts 是一套基于 Vue2.x 封装的 Echarts 图表组件，用于为开发者提供快速生成图表的服务。 4 | v-charts 的成长离不开大家的支持，如果你愿意为 v-charts 贡献代码，请阅读以下内容: 5 | 6 | ## 开发原则 7 | 8 | v-charts 的核心原则是**为开发者简化配置项**，基于此原则，v-charts 有如下约定： 9 | 10 | 1. 数据需要*尽量*使用指标维度的形式，具体可以参考[文档](https://v-charts.js.org/#/data)。 11 | 2. 指标维度的设置、数据类型、简化的配置项、数据别名 等通过在 settings 中增加的属性实现。 12 | 3. 组件除引入相应模块的依赖(eg: line)外，*尽量*不引入插件的依赖(eg: visualMap)。 13 | 14 | ## 环境搭建 15 | 16 | - 安装依赖 `npm install` 17 | - 运行开发 `npm run dev` 18 | - 生成组件 `npm run build` 19 | - 运行文档 `npm run docs` 20 | - 运行测试 `npm run test` 21 | 22 | ## 组件开发 23 | 24 | 开发新的图表组件，需要首先在 `src/packages` 下增加对应图表，然后在 `examples/data` 25 | 下增加对应数据并在 `index.js` 中引入，最后在 `src/component-list`、`src/index.es.js`、 26 | `src/index/index.js` 中增加对应的组件即可。开发完成后，需要在 `docs` 文件夹下， 27 | 增加相应文档，并将文档加到侧边栏中。 28 | 29 | ## 代码规范 30 | 31 | 遵循 [standard](https://standardjs.com/) 即可。 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017-2018 xiguaxigua 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | mark text 3 |

4 | 5 |

v-charts

6 | 7 |

8 | 9 | Build Status 10 | 11 | 12 | NPM downloads 13 | 14 | 15 | Npm package 16 | 17 | 18 | Language 19 | 20 | 21 | License 22 | 23 | 24 | Join the chat 25 | 26 |

27 | 28 |

29 | 30 | Document 31 | 32 | | 33 | 34 | Sample Project 35 | 36 | | 37 | 38 | English 39 | 40 | | 41 | 42 | 中文 43 | 44 |

45 | 46 | > Chart components based on Vue2.x and Echarts 47 | 48 | ## Features 49 | - **Uniform data format:** Use an uniform data format that both convient for frontend and backend, and also easy to create and edit. 50 | - **Simplified configuration:** With simplified configuration items, complex requirements can be easily implemented. 51 | - **Simple customization:** Provide a variety of custom Echarts way, you can easily set the chart options. 52 | 53 | ## Support 54 | 55 | Modern browsers and Internet Explorer 10+, include pc and mobile browser. 56 | 57 | ## Install 58 | 59 | ``` 60 | npm i v-charts echarts -S 61 | ``` 62 | 63 | ## Start 64 | 65 | ```html 66 | 71 | 72 | 93 | ``` 94 | 95 | ## Changelog 96 | 97 | Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/v-charts/releases) or [ChangeLog](./CHANGELOG.md). 98 | 99 | ## Contribution 100 | 101 | Please make sure to read the [Contributing Guide](./CONTRIBUTING.md) before making a pull request. 102 | 103 | ## License 104 | 105 | [MIT](http://opensource.org/licenses/MIT) 106 | -------------------------------------------------------------------------------- /README_CN.md: -------------------------------------------------------------------------------- 1 |

2 | mark text 3 |

4 | 5 |

v-charts

6 | 7 |

8 | 9 | Build Status 10 | 11 | 12 | NPM downloads 13 | 14 | 15 | Npm package 16 | 17 | 18 | Language 19 | 20 | 21 | License 22 | 23 | 24 | Join the chat 25 | 26 |

27 | 28 |

29 | 30 | 文档 31 | 32 | | 33 | 34 | 示例项目 35 | 36 | | 37 | 38 | English 39 | 40 | | 41 | 42 | 中文 43 | 44 |

45 | 46 | > 基于 Vue2.x 封装的 Echarts 图表组件 47 | 48 | ## 特性 49 | 50 | - **统一的数据格式：** 使用对前后端都友好的数据格式，方便生成和修改。 51 | - **简化的配置项：** 通过简化的配置项，可以轻松实现复杂需求。 52 | - **定制简单：** 提供多种自定义 Echarts 方式，可以方便的设置图表配置项。 53 | 54 | ## 支持性 55 | 56 | 支持所有现代浏览器及 IE10+ ，包括 pc 端和移动端。 57 | 58 | ## 安装 59 | 60 | ``` 61 | npm i v-charts echarts -S 62 | ``` 63 | 64 | ## 快速上手 65 | 66 | ```html 67 | 72 | 73 | 94 | ``` 95 | 96 | ## 更新日志 97 | 98 | 每个版本的详细修改可以参考 [release notes](https://github.com/ElemeFE/v-charts/releases) 或者 [ChangeLog](./CHANGELOG_CN.md)。 99 | 100 | ## 贡献 101 | 102 | 在发起一个 pull request 之前，请先阅读[贡献指南](./CONTRIBUTING_CN.md)。 103 | 104 | ## License 105 | 106 | [MIT](http://opensource.org/licenses/MIT) 107 | -------------------------------------------------------------------------------- /build/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pkgTypeList: [ 3 | { type: 'cjs', min: false, suffix: '.common.js' }, 4 | { type: 'cjs', min: true, suffix: '.common.min.js' }, 5 | { type: 'umd', min: false, suffix: '.js' }, 6 | { type: 'umd', min: true, suffix: '.min.js' } 7 | ], 8 | addons: [ 9 | { 10 | min: false, 11 | type: 'es', 12 | suffix: '.esm.js', 13 | globalName: '', 14 | src: 'src/index.es.js', 15 | dist: 'lib/index' 16 | }, 17 | { 18 | min: false, 19 | type: 'cjs', 20 | suffix: '.js', 21 | globalName: '', 22 | src: 'src/core.js', 23 | dist: 'lib/core' 24 | }, 25 | { 26 | min: false, 27 | type: 'cjs', 28 | suffix: '.js', 29 | globalName: '', 30 | src: 'src/utils.js', 31 | dist: 'lib/utils' 32 | }, 33 | { 34 | min: false, 35 | type: 'cjs', 36 | suffix: '.js', 37 | globalName: '', 38 | src: 'src/constants.js', 39 | dist: 'lib/constants' 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /build/rollup.config.js: -------------------------------------------------------------------------------- 1 | const rollup = require('rollup') 2 | const vue = require('rollup-plugin-vue') 3 | const resolve = require('rollup-plugin-node-resolve') 4 | const babel = require('rollup-plugin-babel') 5 | const eslint = require('rollup-plugin-eslint') 6 | const minify = require('uglify-es').minify 7 | const componentInfo = require('../src/component-list') 8 | const uglify = require('rollup-plugin-uglify').uglify 9 | const autoprefixer = require('autoprefixer') 10 | const cssnano = require('cssnano') 11 | const path = require('path') 12 | const fs = require('fs') 13 | const { pkgTypeList, addons } = require('./config') 14 | 15 | let pkg = [] 16 | 17 | pkgTypeList.forEach(({ type, min, suffix }) => { 18 | Object.keys(componentInfo).forEach(name => { 19 | const { src, dist } = componentInfo[name] 20 | pkg.push({ min, type, suffix, globalName: name, src, dist }) 21 | }) 22 | }) 23 | 24 | pkg = pkg.concat(addons) 25 | 26 | pkg.forEach(item => { rollupFn(item) }) 27 | 28 | fs.mkdirSync(path.resolve(__dirname, '../lib')) 29 | 30 | async function rollupFn (item) { 31 | const { min, dist, suffix, src: input, type: format, globalName: name } = item 32 | const vueSettings = min 33 | ? { css: 'lib/style.min.css', postcss: [autoprefixer, cssnano] } 34 | : { css: 'lib/style.css', postcss: [autoprefixer] } 35 | const plugins = [ 36 | eslint(), 37 | vue(vueSettings), 38 | resolve({ extensions: ['.js', '.vue'] }), 39 | babel({ plugins: ['external-helpers'] }) 40 | ] 41 | if (min) plugins.push(uglify({}, minify)) 42 | 43 | const distPath = '../' + dist + suffix 44 | const isCommonjs = format === 'cjs' 45 | let reg = isCommonjs 46 | ? /(^(echarts|numerify|utils-lite)|(\/core|\/utils|\/constants)$)/ 47 | : /^(echarts)/ 48 | const external = id => reg.test(id) 49 | const globals = { 'echarts/lib/echarts': 'echarts' } 50 | 51 | const bundle = await rollup.rollup({ input, external, plugins }) 52 | let { code } = await bundle.generate({ format, name, globals }) 53 | if (isCommonjs) { 54 | code = code.replace( 55 | /require\(['"](..?\/)+(utils|core|constants)['"]\)/g, 56 | 'require(\'./$2\')' 57 | ) 58 | } 59 | fs.writeFileSync(path.resolve(__dirname, distPath), code) 60 | } 61 | -------------------------------------------------------------------------------- /build/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: './examples/main.js', 12 | mode: 'development', 13 | devtool: 'source-map', 14 | output: { 15 | path: path.resolve(__dirname, '../dist'), 16 | filename: 'index.js' 17 | }, 18 | resolve: { 19 | extensions: ['.js', '.vue'], 20 | alias: { 21 | 'vue$': 'vue/dist/vue.esm.js' 22 | } 23 | }, 24 | devServer: { 25 | port: '8099', 26 | hot: true, 27 | contentBase: path.join(__dirname, 'dist'), 28 | stats: 'errors-only', 29 | open: true 30 | }, 31 | module: { 32 | rules: [ 33 | { 34 | test: /\.(js|vue)$/, 35 | loader: 'eslint-loader', 36 | enforce: 'pre', 37 | include: [resolve('examples'), resolve('src')], 38 | options: { 39 | formatter: require('eslint-friendly-formatter') 40 | } 41 | }, 42 | { 43 | test: /\.vue$/, 44 | loader: 'vue-loader' 45 | }, 46 | { 47 | test: /\.less$/, 48 | use: [ 49 | 'vue-style-loader', 50 | 'css-loader', 51 | 'less-loader' 52 | ] 53 | }, 54 | { 55 | test: /\.js$/, 56 | loader: 'babel-loader', 57 | exclude: [resolve('node_modules')] 58 | }, 59 | { 60 | test: /\.css$/, 61 | use: [ 'style-loader', 'css-loader' ] 62 | } 63 | ] 64 | }, 65 | plugins: [ 66 | new webpack.HotModuleReplacementPlugin(), 67 | new HtmlWebpackPlugin({ 68 | filename: 'index.html', 69 | template: resolve('./examples/index.html'), 70 | inject: true 71 | }), 72 | new VueLoaderPlugin() 73 | ] 74 | } 75 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/v-charts/f3c31e0cc0bc85e2685caaaf8e2fe658030f744c/docs/.nojekyll -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | v-charts.js.org 2 | -------------------------------------------------------------------------------- /docs/bmap.md: -------------------------------------------------------------------------------- 1 | # 百度/高德地图 2 | 3 | 为了使在echarts上更简单的使用百度/高德地图，v-charts封装了一个百度/高德地图的‘壳子’，在settings中添加关于图表的配置（key,bmap,amap），在组件上直接设置 series, tooltip 等，便可生成以百度/高德地图为坐标系的 Echarts 图表。 4 | 5 | #### 百度地图 6 | 7 | 8 | 9 | 45 | 46 | 47 | #### 高德地图 48 | 49 | 50 | 51 | 87 | 88 | 89 | #### 获取地图实例 90 | 91 | 92 | 93 | 136 | 137 | 138 | #### settings 配置项 139 | 140 | | 配置项 | 简介 | 类型 | 备注 | 141 | | --- | --- | --- | --- | 142 | | key | 百度/高德地图 access_key | string | 可[由此](http://lbsyun.baidu.com/apiconsole/key)获取 | 143 | | v | 百度/高德地图版本 | string | 默认2.0(百度)/1.4.3(高德) | 144 | | bmap | 百度地图配置项 | object | 参考[文档](https://github.com/ecomfe/echarts/tree/master/extension/bmap#使用)配置 | 145 | | amap | 高德地图配置项 | object | 参考高德地图文档配置 | 146 | | useOuterMap | 使用全局的地图依赖 | boolean | - | 147 | 148 | > 1. 百度/高德地图在与其他地图搭配使用时，需要额外引入相应的 echarts 模块，例如使用热力图，则需要`import 'echarts/lib/chart/heatmap'`。 149 | > 2. 使用 script 引入百度地图或高德地图后，配置 useOuterMap 可以阻止组件对地图资源的引用
150 | > 百度地图 ``
151 | > 高德地图 `` 152 | -------------------------------------------------------------------------------- /docs/en/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Introduction 3 | 4 | When using [echarts](http://echarts.baidu.com) to generate charts, we often need to do cumbersome data scheme conversion, modify complex configuration items, v-charts precisely to solve this. v-charts is based on Vue2.x and echarts, just need to provide a friendly data scheme and set simple configuration items, you can easily generate common charts. 5 | 6 | ### npm 7 | 8 | ``` 9 | npm i v-charts echarts -S 10 | ``` 11 | 12 | ### cdn 13 | 14 | ```html 15 | 16 | 17 | 18 | 19 | ``` 20 | 21 | > when using bmap or amap need to add additional modules 22 | >
`` 23 | >
`` 24 | 25 | 26 | #### Example 27 | 28 | [online demo](https://jsfiddle.net/vue_echarts/hc4xhyva) 29 | 30 | ```html 31 | 32 | 33 | 34 | v-charts 35 | 36 | 37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 | 64 | 65 | 66 | ``` 67 | 68 | #### Use a single chart component 69 | 70 | [online demo](https://jsfiddle.net/vue_echarts/6h15xnxx) 71 | 72 | ```html 73 | 74 | 75 | 76 | v-charts 77 | 78 | 79 |
80 | 81 |
82 | 83 | 84 | 85 | 86 | 87 | 108 | 109 | 110 | ``` 111 | -------------------------------------------------------------------------------- /docs/en/event.md: -------------------------------------------------------------------------------- 1 | # Event 2 | 3 | The binding event is implemented by passing an event name and an object corresponding to the callback function. The argument in the callback function is the echarts module, which can be handled accordingly. 4 | 5 | #### Example 6 | 7 | 8 | 9 | 52 | 53 | -------------------------------------------------------------------------------- /docs/en/navbar.md: -------------------------------------------------------------------------------- 1 | - [Sample Project](https://codesandbox.io/s/z69myovqzx) 2 | - 语言 3 | - [:cn: 中文](/) 4 | - [:uk: English](/en/) 5 | -------------------------------------------------------------------------------- /docs/en/sankey.md: -------------------------------------------------------------------------------- 1 | # Sankey 2 | 3 | #### Example 4 | 5 | 6 | 7 | 42 | 43 | 44 | #### set type of data 45 | 46 | 47 | 48 | 84 | 85 | 86 | 87 | #### settings 88 | 89 | | attribute | description | type | remark | 90 | | --- | --- | --- | --- | 91 | | dimension | dimension of chart | string | default `columns[0]` | 92 | | metrics | metrics of chart | string | defaut `columns[1]` | 93 | | dataType | data type of metrics | array | array[0] is type of sankey item, array[1] is type of sankey link line, support `'KMB'`, `'normal'`, `'percent'` | 94 | | links | links data between nodes | array | content reference [docs](http://ecomfe.github.io/echarts-doc/public/en/option.html#series-sankey.links) | 95 | | digit | digit of percent type data | number | default `2` | 96 | | label | label style of node | object | content reference [docs](http://ecomfe.github.io/echarts-doc/public/en/option.html#series-sankey.label) | 97 | | itemStyle | style of node rectangle in sankey graphs | object | content reference [docs](http://ecomfe.github.io/echarts-doc/public/en/option.html#series-sankey.itemStyle) | 98 | | lineStyle | line style of sankey graph | object | content reference [docs](http://ecomfe.github.io/echarts-doc/public/en/option.html#series-sankey.lineStyle) | 99 | -------------------------------------------------------------------------------- /docs/en/sidebar.md: -------------------------------------------------------------------------------- 1 | - Guide 2 | - [Introduction](/en/README) 3 | - [Quick Start](/en/start) 4 | - [Attributes](/en/props) 5 | - [Data](/en/data) 6 | - Components 7 | - [Line](/en/line) 8 | - [Histogram](/en/histogram) 9 | - [Bar](/en/bar) 10 | - [Pie](/en/pie) 11 | - [Ring](/en/ring) 12 | - [Waterfall](/en/waterfall) 13 | - [Funnel](/en/funnel) 14 | - [Radar](/en/radar) 15 | - [Map](/en/map) 16 | - [Sankey](/en/sankey) 17 | - [Heatmap](/en/heatmap) 18 | - [Scatter](/en/scatter) 19 | - [Candle](/en/candle) 20 | - [Gauge](/en/gauge) 21 | - [Tree](/en/tree) 22 | - [Bmap/Amap](/en/bmap) 23 | - [Liquidfill](/en/liquidfill) 24 | - [Wordcloud](/en/wordcloud) 25 | - Other 26 | - [Event](/en/event) 27 | - [Attribute demos(1)](/en/props-demo1) 28 | - [Attribute demos(2)](/en/props-demo2) 29 | - [FAQ](/en/skill-demo) 30 | -------------------------------------------------------------------------------- /docs/en/skill-demo.md: -------------------------------------------------------------------------------- 1 | # FAQ 2 | 3 | #### The initial width of the container is unknown 4 | 5 | Drawing a chart in an unknown initial width of the container, because can not get the width, so the chart will fail to draw, the solution is when the container width is known, 6 | call the echarts resize function. 7 | 8 | 9 | 10 | 57 | 58 | 59 | #### Decimal display accuracy 60 | 61 | By default, v-charts retain two significant digits when working with data types, but when the number is small and is set as a percentage type, this can cause display issues such as 62 | 63 | 64 | 65 | 91 | 92 | 93 | Each chart has digit configuration items, set this attribute, so the smaller the value can be displayed normally 94 | 95 | 96 | 97 | 124 | 125 | -------------------------------------------------------------------------------- /docs/en/start.md: -------------------------------------------------------------------------------- 1 | # Quick Start 2 | 3 | ### Fully import 4 | ----- 5 | 6 | ```js 7 | // main.js 8 | import Vue from 'vue' 9 | import VCharts from 'v-charts' 10 | import App from './App.vue' 11 | 12 | Vue.use(VCharts) 13 | 14 | new Vue({ 15 | el: '#app', 16 | render: h => h(App) 17 | }) 18 | ``` 19 | 20 | ### On demand 21 | ----- 22 | 23 | Each chart component of v-charts is individually packaged under the lib folder 24 | 25 | ``` 26 | |- lib/ 27 | |- line.common.js -------------- Line Chart 28 | |- bar.common.js --------------- Bar Chart 29 | |- histogram.common.js --------- Histogram Chart 30 | |- pie.common.js --------------- Pie Chart 31 | |- ring.common.js -------------- Ring Chart 32 | |- funnel.common.js ------------ Funnel Chart 33 | |- waterfall.common.js --------- Waterfall Chart 34 | |- radar.common.js ------------- Radar Chart 35 | |- map.common.js --------------- Map Chart 36 | |- sankey.common.js ------------ Sankey Chart 37 | |- heatmap.common.js ----------- Heatmap Chart 38 | |- scatter.common.js ----------- Scatter Chart 39 | |- candle.common.js ------------ Candle Chart 40 | |- gauge.common.js ------------- Gauge Chart 41 | |- tree.common.js -------------- Tree Chart 42 | |- bmap.common.js -------------- Baidu map 43 | |- amap.common.js -------------- Amap 44 | ``` 45 | 46 | When used, a single chart component can be directly import into the project. 47 | 48 | ```js 49 | import Vue from 'vue' 50 | import VeLine from 'v-charts/lib/line.common' 51 | import App from './App.vue' 52 | 53 | Vue.component(VeLine.name, VeLine) 54 | 55 | new Vue({ 56 | el: '#app', 57 | render: h => h(App) 58 | }) 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/event.md: -------------------------------------------------------------------------------- 1 | # 事件监听 2 | 3 | 绑定事件通过传递一个事件名称和对应回调函数的对象实现，回调函数内的参数是 echarts 模块，可以据此做相应的处理。 4 | 5 | #### 示例 6 | 7 | 8 | 9 | 52 | 53 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/v-charts/f3c31e0cc0bc85e2685caaaf8e2fe658030f744c/docs/favicon.ico -------------------------------------------------------------------------------- /docs/install.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | 在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 4 | 5 | ### npm安装 6 | 7 | ``` 8 | npm i v-charts echarts -S 9 | ``` 10 | 11 | ### cdn 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | ``` 19 | 20 | > 使用百度地图或高德地图时需要额外引入相应的模块 21 | >
`` 22 | >
`` 23 | 24 | ### cdn示例 25 | 26 | #### 全部引入 27 | 28 | [在线示例](https://jsfiddle.net/vue_echarts/aa7ojxyt) 29 | 30 | ```html 31 | 32 | 33 | 34 | v-charts 35 | 36 | 37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 | 64 | 65 | 66 | ``` 67 | 68 | #### 单独引入某个图 69 | 70 | [在线示例](https://jsfiddle.net/vue_echarts/jtvhj7jg) 71 | 72 | ```html 73 | 74 | 75 | 76 | v-charts 77 | 78 | 79 |
80 | 81 |
82 | 83 | 84 | 85 | 86 | 87 | 108 | 109 | 110 | ``` 111 | -------------------------------------------------------------------------------- /docs/navbar.md: -------------------------------------------------------------------------------- 1 | - [示例项目](https://codesandbox.io/s/z69myovqzx) 2 | - Translations 3 | - [:cn: 中文](/) 4 | - [:uk: English](/en/) 5 | -------------------------------------------------------------------------------- /docs/props.md: -------------------------------------------------------------------------------- 1 | # 图表属性 2 | 3 | ## 自有属性 4 | 5 | 图表自身的属性，例如用于设置数据类型的 `yAxisType`, 是否展示为面积图的 `area`，这样的属性被置于 6 | `settings` 内，每种图表的自有属性不完全相同，具体参数请参考下述图表文档中的配置项。 7 | 8 | ## 公有属性 9 | 10 | 所有图表都具有的属性，例如 `width`, `events` 等。 11 | 12 | ```vue 13 | 14 | ``` 15 | 16 | #### 基本属性 17 | | 配置项 | 简介 | 类型 | 默认值 | 18 | | ----- | --- |:----:| --- | 19 | | data | 数据，[参考文档](/data) | object | - | 20 | | settings | 配置项 | object | - | 21 | | width | 宽度 | string | auto | 22 | | height | 高度 | string | 400px | 23 | | events | 事件绑定，[参考文档](/event) | object | - | 24 | | init-options | init 附加参数，[参考文档](http://echarts.baidu.com/api.html#echarts.init) | object | - | 25 | | tooltip-visible | 是否显示提示框 | boolean | true | 26 | | legend-visible | 是否显示图例 | boolean | true | 27 | | theme | 自定义主题 | object | - | 28 | | theme-name | 自定义主题名称 | string | - | 29 | | judge-width | 是否处理生成图表时的宽度问题 | boolean | false | 30 | | width-change-delay | 容器宽度变化的延迟 | number | 300 | 31 | | resizeable | 是否处理窗口 resize 事件 | boolean | true | 32 | | cancel-resize-check | 是否禁用 resize 时的容器检测 | boolean | false | 33 | | resize-delay | 窗口 resize 事件回调的延迟 | number | 200 | 34 | | change-delay | 属性修改触发图表重绘回调的延迟 | number | 0 | 35 | | set-option-opts | echarts setOption 的第二个参数, [参考文档](http://echarts.baidu.com/api.html#echartsInstance.setOption) | boolean
object | true | 36 | | not-set-unchange | 未发生变化时不参加 setOption 的属性 | array | - | 37 | | log | 在控制台打印内部生成的echarts options | boolean | false | 38 | 39 | ?> 在使用 dataZoom 组件时，数据发生改变会引起 dataZoom 的重置，在组件上设置 `:not-set-unchange="['dataZoom']"` 即可解决这个问题。 40 | 41 | #### 增加标识元素的属性 42 | 43 | 标识元素包括：markLine、markArea、markPoint，每个种类的图对应的使用方式略有不同， 44 | 可以参考 echarts 文档中实现。需要注意的是，设置的标识元素会被增加到每一个指标上，例如一个 45 | 单维度多指标折线图，两条线都会显示对应的标识元素，如果设置只在一个指标线上显示，可以使用 `extend` 46 | 属性，直接为 series 设置 mark* 来自由配置。 47 | 48 | | 配置项 | 简介 | 类型 | 49 | | ----- | --- |:----:| 50 | | mark-line | 标线 | object | 51 | | mark-area | 标点 | object | 52 | | mark-point | 标志区域 | object | 53 | 54 | ?> **使用时需先引入对应的组件** 55 |
markLine -> `echarts/lib/component/markLine` 56 |
markPoint -> `echarts/lib/component/markPoint` 57 |
markArea -> `echarts/lib/component/markArea` 58 | 59 | 60 | #### 状态属性 61 | 62 | 加载状态和暂无数据状态可以在父组件中通过切换下面两种属性实现。 63 | 64 | | 配置项 | 简介 | 类型 | 默认值 | 65 | | ----- | --- |:----:| --- | 66 | | loading | 加载状态 | boolean | false | 67 | | data-empty | 暂无数据状态 | boolean | false | 68 | ?> **使用时需先引入样式** 69 |
`import 'v-charts/lib/style.css'` 70 | 71 | 72 | #### 钩子函数 73 | 74 | 共有属性中的钩子函数用于在配置项生成过程中进行调整以及获取实例。 75 | 76 | | 配置项 | 说明 | 参数 | 77 | | ----- | --- | --- | 78 | | before-config | 对数据提前进行额外的处理，
在数据转化为配置项开始前触发 | 参数为 data，返回值为表格数据 | 79 | | after-config | 对生成好的echarts配置进行额外的处理，
在数据转化为配置项结束后触发 | 参数为 options，返回值为 echarts 配置 | 80 | | after-set-option | 生成图之后获取echarts实例 | 参数为echarts实例 | 81 | | after-set-option-once | 生成图后获取echarts实例
（只执行一次） | 参数为echarts实例 | 82 | 83 | #### extend 属性 84 | 85 | 为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置， 86 | extend为对象类型，对象内的属性可以是函数，也可以对象，也可以是其他类型的值 87 | 88 | - 当属性为函数时，设置的是函数的返回值 89 | - 当属性为对象时，如果在options中对应的属性为对象(eg: tooltip)或包含对象的数组(eg: series)， 90 | 对应的配置会被合并，否则将直接覆盖对应的配置 91 | 92 | 具体使用方法可以参考属性配置[示例](/props-demo2) 93 | 94 | #### echarts options 属性 95 | 96 | 与echarts配置项对应的属性也被加到了组件上，用于直接**覆盖**options原有的对应属性，使用方式可参考[文档](http://echarts.baidu.com/option.html) 97 | 98 | ```yaml 99 | grid: [object, array], 100 | colors: array, 101 | visualMap: [object, array], 102 | dataZoom: [object, array], 103 | toolbox: [object, array], 104 | title: object, 105 | legend: [object, array], 106 | xAxis: [object, array], 107 | yAxis: [object, array], 108 | radar: object, 109 | tooltip: object, 110 | axisPointer: object, 111 | brush: [object, array], 112 | geo: object, 113 | timeline: [object, array], 114 | graphic: [object, array], 115 | series: [object, array], 116 | backgroundColor: [object, string], 117 | textStyle: object, 118 | animation: object 119 | ``` 120 | 121 | !> 如果某属性加上去之后没有生效，很可能是没有引入相应的模块，模块的位置可以参考此[文件](https://github.com/ecomfe/echarts/blob/master/index.js) 122 | 123 | ## 事件 124 | 125 | 渲染成功后会通过事件传递给父组件。 126 | 127 | | 方法名 | 说明 | 128 | | ----- | --- | 129 | | ready | 图表渲染完成后触发，每次渲染都会触发一次 | 130 | | ready-once | 只会在首次渲染完成后触发 | 131 | -------------------------------------------------------------------------------- /docs/radar.md: -------------------------------------------------------------------------------- 1 | # 雷达图 2 | 3 | #### 示例 4 | 5 | 6 | 7 | 31 | 32 | 33 | #### 设置显示的指标维度 34 | 35 | 36 | 37 | 66 | 67 | 68 | #### 修改指标名称 69 | 70 | 71 | 72 | 104 | 105 | 106 | #### settings 配置项 107 | 108 | | 配置项 | 简介 | 类型 | 备注 | 109 | | --- | --- | --- | --- | 110 | | dimension | 维度 | string | 默认columns第一项为维度 | 111 | | metrics | 指标 | array | 默认columns第二项起为指标 | 112 | | dataType | 数据类型 | object | 可选值: KMB, normal, percent | 113 | | digit | 设置数据类型为percent时保留的位数 | number | 默认为2 | 114 | | label | 图形上的文本标签 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-radar.label) | 115 | | itemStyle | 折线拐点标志的样式 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-radar.itemStyle) | 116 | | lineStyle | 线条样式 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-radar.lineStyle) | 117 | | areaStyle | 区域填充样式 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-radar.areaStyle) | 118 | 119 | 120 | > 备注：dataType中直接设置对应维度的数据类型，例如示例的`{ '占比': 'percent' }`，即将占比数据设置为百分比类型 121 | -------------------------------------------------------------------------------- /docs/sankey.md: -------------------------------------------------------------------------------- 1 | # 桑基图 2 | 3 | #### 示例 4 | 5 | 6 | 7 | 42 | 43 | 44 | #### 设置数据类型 45 | 46 | 47 | 48 | 84 | 85 | 86 | 87 | 88 | #### settings 配置项 89 | 90 | | 配置项 | 简介 | 类型 | 备注 | 91 | | --- | --- | --- | --- | 92 | | dimension | 维度 | string | 默认columns第一项为维度 | 93 | | metrics | 指标 | string | 默认columns第二项为指标 | 94 | | dataType | 数据类型 | array | 数组的第一项为item的数据类型，
第二项为line的数据类型，
可选值: KMB, normal, percent | 95 | | links | 节点间的关系数据 | array | 内容参考[文档](http://echarts.baidu.com/option.html#series-sankey.links) | 96 | | digit | 设置数据类型为percent时保留的位数 | number | 默认为2 | 97 | | label | 每个矩形节点中文本标签的样式 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-sankey.label) | 98 | | itemStyle | 节点矩形的样式 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-sankey.itemStyle) | 99 | | lineStyle | 桑基图边的样式 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-sankey.lineStyle) | 100 | -------------------------------------------------------------------------------- /docs/sidebar.md: -------------------------------------------------------------------------------- 1 | - 指南 2 | - [介绍](/) 3 | - [开始使用](/start) 4 | - [图表属性](/props) 5 | - [数据](/data) 6 | - 图表 7 | - [折线图](/line) 8 | - [柱状图](/histogram) 9 | - [条形图](/bar) 10 | - [饼图](/pie) 11 | - [环图](/ring) 12 | - [瀑布图](/waterfall) 13 | - [漏斗图](/funnel) 14 | - [雷达图](/radar) 15 | - [地图](/map) 16 | - [桑基图](/sankey) 17 | - [热力图](/heatmap) 18 | - [散点图](/scatter) 19 | - [K线图](/candle) 20 | - [仪表盘](/gauge) 21 | - [树图](/tree) 22 | - [水球图](/liquidfill) 23 | - [词云图](/wordcloud) 24 | - 其他 25 | - [事件监听](/event) 26 | - [图表切换](/toggle) 27 | - [百度/高德地图](/bmap) 28 | - [属性配置示例(1)](/props-demo1) 29 | - [属性配置示例(2)](/props-demo2) 30 | - [常见问题示例](/skill-demo) 31 | -------------------------------------------------------------------------------- /docs/skill-demo.md: -------------------------------------------------------------------------------- 1 | # 常见问题示例 2 | 3 | #### 容器的初始宽度未知 4 | 5 | 在一个初始宽度未知的容器内绘制图表时，因为无法获取宽度，所以图表会绘制失败，解决的办法是在容器宽度已知后， 6 | 调用echarts的resize方法。 7 | 8 | 9 | 10 | 55 | 56 | 57 | #### 小数显示精度 58 | 59 | v-charts处理数据类型时默认保留两位有效数字，但是当数字较小并设置为百分比类型时，这种方式会导致显示上的问题，例如 60 | 61 | 62 | 63 | 91 | 92 | 93 | 每个图表内都有digit配置项，设置此属性，保证设置类型后，数值较小也能够正常显示 94 | 95 | 96 | 97 | 126 | 127 | -------------------------------------------------------------------------------- /docs/start.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 开始使用 4 | 5 | ### 完整引入 6 | ----- 7 | 8 | ```js 9 | // main.js 10 | import Vue from 'vue' 11 | import VCharts from 'v-charts' 12 | import App from './App.vue' 13 | 14 | Vue.use(VCharts) 15 | 16 | new Vue({ 17 | el: '#app', 18 | render: h => h(App) 19 | }) 20 | ``` 21 | 22 | ### 按需引入 23 | ----- 24 | 25 | v-charts的每种图表组件，都已经单独打包到lib文件夹下了 26 | ``` 27 | |- lib/ 28 | |- line.common.js -------------- 折线图 29 | |- bar.common.js --------------- 条形图 30 | |- histogram.common.js --------- 柱状图 31 | |- pie.common.js --------------- 饼图 32 | |- ring.common.js -------------- 环图 33 | |- funnel.common.js ------------ 漏斗图 34 | |- waterfall.common.js --------- 瀑布图 35 | |- radar.common.js ------------- 雷达图 36 | |- map.common.js --------------- 地图 37 | |- sankey.common.js ------------ 桑基图 38 | |- heatmap.common.js ----------- 热力图 39 | |- scatter.common.js ----------- 散点图 40 | |- candle.common.js ------------ k线图 41 | |- gauge.common.js ------------- 仪表盘 42 | |- tree.common.js -------------- 树图 43 | |- bmap.common.js -------------- 百度地图 44 | |- amap.common.js -------------- 高德地图 45 | ``` 46 | 使用时，可以直接将单个图表引入到项目中 47 | ```js 48 | import Vue from 'vue' 49 | import VeLine from 'v-charts/lib/line.common' 50 | import App from './App.vue' 51 | 52 | Vue.component(VeLine.name, VeLine) 53 | 54 | new Vue({ 55 | el: '#app', 56 | render: h => h(App) 57 | }) 58 | ``` 59 | -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | iframe { 2 | border: 2px solid #eee; 3 | } 4 | 5 | th:first-child { 6 | min-width: 140px; 7 | } 8 | 9 | .vuep { 10 | height: 460px; 11 | } 12 | 13 | .cm-error { 14 | color: rgba(255, 83, 112, 1) !important; 15 | background-color: inherit !important; 16 | } 17 | 18 | .data-empty { 19 | position: absolute; 20 | left: 0; 21 | right: 0; 22 | top: 0; 23 | bottom: 0; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | background-color: rgba(255, 255, 255, .7); 28 | color: #888; 29 | font-size: 14px; 30 | } 31 | 32 | .app-nav ul ul { 33 | min-width: 90px; 34 | } 35 | 36 | .markdown-section > div:first-child { 37 | position: absolute; 38 | width: 100%; 39 | right: 20px; 40 | } 41 | 42 | .markdown-section > div:first-child p { 43 | margin: 0; 44 | } 45 | 46 | @media (min-width: 1300px) { 47 | .markdown-section { 48 | max-width: 900px; 49 | } 50 | } 51 | 52 | @media (min-width: 1500px) { 53 | .markdown-section { 54 | max-width: 1100px; 55 | } 56 | } 57 | 58 | @media (min-width: 1700px) { 59 | .markdown-section { 60 | max-width: 1300px; 61 | } 62 | } 63 | 64 | @media (min-width: 1900px) { 65 | .markdown-section { 66 | max-width: 1200px; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /docs/toggle.md: -------------------------------------------------------------------------------- 1 | # 图表切换 2 | 3 | 为了方便使用一份数据即可生成不同的表格，可以使用``组件，切换图表类型则只需要改变settings即可 4 | 5 | #### 示例 6 | 7 | 8 | 9 | 46 | 47 | -------------------------------------------------------------------------------- /docs/waterfall.md: -------------------------------------------------------------------------------- 1 | # 瀑布图 2 | 3 | #### 示例 4 | 5 | 6 | 7 | 28 | 29 | 30 | #### 设置指标维度 31 | 32 | 33 | 34 | 59 | 60 | 61 | #### 设置数据类型 62 | 63 | 64 | 65 | 89 | 90 | 91 | #### 修改指标名称 92 | 93 | 94 | 95 | 121 | 122 | 123 | #### 设置 总计、剩余 的名称 124 | 125 | 126 | 127 | 153 | 154 | 155 | #### settings 配置项 156 | 157 | | 配置项 | 简介 | 类型 | 备注 | 158 | | --- | --- | --- | --- | 159 | | dimension | 维度 | string | 默认columns第一项为维度 | 160 | | metrics | 指标 | string | 默认columns第二项为指标 | 161 | | dataType | 数据类型 | string | 可选值: KMB, normal, percent | 162 | | totalNum | 总量 | number | 默认瀑布图总量为所有数据的和 | 163 | | totalName | 总量的显示文案 | string | 默认显示总计 | 164 | | remainName | 剩余的显示文案 | string | 默认显示其他 | 165 | | digit | 设置数据类型为percent时保留的位数 | number | 默认为2 | 166 | -------------------------------------------------------------------------------- /examples/App.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 28 | 96 | -------------------------------------------------------------------------------- /examples/components/code-section.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 32 | 33 | 39 | -------------------------------------------------------------------------------- /examples/components/sidebar.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 43 | 44 | 91 | -------------------------------------------------------------------------------- /examples/data/bar.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '条形图', 3 | type: 'bar', 4 | data: [ 5 | { 6 | name: '简单条形图', 7 | data: { 8 | columns: ['日期', '余额', '年龄'], 9 | rows: [ 10 | { '日期': '1-1', '余额': 123, '年龄': 3 }, 11 | { '日期': '1-2', '余额': 1223, '年龄': 6 }, 12 | { '日期': '1-3', '余额': 2123, '年龄': 9 }, 13 | { '日期': '1-4', '余额': 4123, '年龄': 12 }, 14 | { '日期': '1-5', '余额': 3123, '年龄': 15 }, 15 | { '日期': '1-6', '余额': 7123, '年龄': 20 } 16 | ] 17 | }, 18 | settings: {} 19 | }, 20 | { 21 | name: '排序条形图', 22 | data: { 23 | columns: ['日期', '余额', '年龄'], 24 | rows: [ 25 | { '日期': '1-1', '余额': 123, '年龄': 3 }, 26 | { '日期': '1-2', '余额': 1223, '年龄': 6 }, 27 | { '日期': '1-3', '余额': 2123, '年龄': 90 }, 28 | { '日期': '1-4', '余额': 4123, '年龄': 12 }, 29 | { '日期': '1-5', '余额': 3123, '年龄': 15 }, 30 | { '日期': '1-6', '余额': 7123, '年龄': 20 } 31 | ] 32 | }, 33 | settings: { 34 | metrics: ['年龄'], 35 | dataOrder: { 36 | label: '年龄', 37 | order: 'desc' 38 | } 39 | } 40 | }, 41 | { 42 | name: '带有较小百分比数值', 43 | data: { 44 | columns: ['日期', '比率'], 45 | rows: [ 46 | { '日期': '1-1', '余额': 123, '比率': 0.00001 }, 47 | { '日期': '1-2', '余额': 1223, '比率': 0.00002 }, 48 | { '日期': '1-3', '余额': 2123, '比率': 0.00003 }, 49 | { '日期': '1-4', '余额': 4123, '比率': 0.00007 }, 50 | { '日期': '1-5', '余额': 3123, '比率': 0.00001 }, 51 | { '日期': '1-6', '余额': 7123, '比率': 0.00003 } 52 | ] 53 | }, 54 | settings: { 55 | xAxisType: ['percent'], 56 | digit: 4 57 | } 58 | }, 59 | { 60 | name: '坐标轴配置', 61 | data: { 62 | columns: ['日期', '余额', '年龄'], 63 | rows: [ 64 | { '日期': '1-1', '余额': 123, '年龄': 3 }, 65 | { '日期': '1-2', '余额': 1223, '年龄': 6 }, 66 | { '日期': '1-3', '余额': 2123, '年龄': 9 }, 67 | { '日期': '1-4', '余额': 4123, '年龄': 12 }, 68 | { '日期': '1-5', '余额': 3123, '年龄': 15 }, 69 | { '日期': '1-6', '余额': 7123, '年龄': 20 } 70 | ] 71 | }, 72 | settings: { 73 | xAxisType: ['KMB', 'percent'], 74 | xAxisName: ['余额', '年龄'], 75 | axisSite: { 76 | top: ['年龄'] 77 | } 78 | } 79 | }, 80 | { 81 | name: '复杂坐标轴配置', 82 | data: { 83 | columns: ['日期', 'a', 'b', 'c'], 84 | rows: [ 85 | { '日期': '1-1', 'a': 123, 'b': 3, c: 1 }, 86 | { '日期': '1-2', 'a': 1223, 'b': 6, c: 1 }, 87 | { '日期': '1-3', 'a': 2123, 'b': 9, c: 1 }, 88 | { '日期': '1-4', 'a': 4123, 'b': 12, c: 1 }, 89 | { '日期': '1-5', 'a': 3123, 'b': 15, c: 1 }, 90 | { '日期': '1-6', 'a': 7123, 'b': 20, c: 1 } 91 | ] 92 | }, 93 | settings: { 94 | axisSite: { 95 | top: ['a'], 96 | bottom: ['b'] 97 | } 98 | } 99 | }, 100 | { 101 | name: '指标维度配置', 102 | data: { 103 | columns: ['日期', '余额', '年龄'], 104 | rows: [ 105 | { '日期': '1-1', '余额': 123, '年龄': 3 }, 106 | { '日期': '1-2', '余额': 1223, '年龄': 6 }, 107 | { '日期': '1-3', '余额': 2123, '年龄': 9 }, 108 | { '日期': '1-4', '余额': 4123, '年龄': 12 }, 109 | { '日期': '1-5', '余额': 3123, '年龄': 15 }, 110 | { '日期': '1-6', '余额': 7123, '年龄': 20 } 111 | ] 112 | }, 113 | settings: { 114 | dimension: ['余额'], 115 | metrics: ['年龄'] 116 | } 117 | }, 118 | { 119 | name: '堆叠条形图', 120 | data: { 121 | columns: ['日期', '余额', '年龄'], 122 | rows: [ 123 | { '日期': '1-1', '余额': 123, '年龄': 3 }, 124 | { '日期': '1-2', '余额': 1223, '年龄': 6 }, 125 | { '日期': '1-3', '余额': 2123, '年龄': 9 }, 126 | { '日期': '1-4', '余额': 4123, '年龄': 12 }, 127 | { '日期': '1-5', '余额': 3123, '年龄': 15 }, 128 | { '日期': '1-6', '余额': 7123, '年龄': 20 } 129 | ] 130 | }, 131 | settings: { 132 | stack: { 133 | 'xxx': ['余额', '年龄'] 134 | } 135 | } 136 | } 137 | ] 138 | } 139 | -------------------------------------------------------------------------------- /examples/data/chart.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '图', 3 | type: 'chart', 4 | data: [ 5 | { 6 | name: '折线图', 7 | data: { 8 | columns: ['日期', '余额', '年龄'], 9 | rows: [ 10 | { '日期': 1, '余额': 123, '年龄': 3 }, 11 | { '日期': 2, '余额': 1223, '年龄': 6 }, 12 | { '日期': 3, '余额': 2123, '年龄': 9 }, 13 | { '日期': 4, '余额': 4123, '年龄': 12 }, 14 | { '日期': 5, '余额': 3123, '年龄': 15 }, 15 | { '日期': 6, '余额': 7123, '年龄': 20 } 16 | ] 17 | }, 18 | settings: { 19 | type: 'line' 20 | } 21 | }, 22 | { 23 | name: '柱状图', 24 | data: { 25 | columns: ['日期', '余额', '年龄'], 26 | rows: [ 27 | { '日期': 1, '余额': 123, '年龄': 3 }, 28 | { '日期': 2, '余额': 1223, '年龄': 6 }, 29 | { '日期': 3, '余额': 2123, '年龄': 9 }, 30 | { '日期': 4, '余额': 4123, '年龄': 12 }, 31 | { '日期': 5, '余额': 3123, '年龄': 15 }, 32 | { '日期': 6, '余额': 7123, '年龄': 20 } 33 | ] 34 | }, 35 | settings: { 36 | type: 'histogram' 37 | } 38 | }, 39 | { 40 | name: '饼图', 41 | data: { 42 | columns: ['日期', '余额', '年龄'], 43 | rows: [ 44 | { '日期': 1, '余额': 123, '年龄': 3 }, 45 | { '日期': 2, '余额': 1223, '年龄': 6 }, 46 | { '日期': 3, '余额': 2123, '年龄': 9 }, 47 | { '日期': 4, '余额': 4123, '年龄': 12 }, 48 | { '日期': 5, '余额': 3123, '年龄': 15 }, 49 | { '日期': 6, '余额': 7123, '年龄': 20 } 50 | ] 51 | }, 52 | settings: { 53 | type: 'pie' 54 | } 55 | } 56 | ] 57 | } 58 | -------------------------------------------------------------------------------- /examples/data/funnel.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '漏斗图', 3 | type: 'funnel', 4 | data: [ 5 | { 6 | name: '简单漏斗图', 7 | data: { 8 | columns: ['状态', '数值'], 9 | rows: [ 10 | { '状态': '展示', '数值': 900 }, 11 | { '状态': '访问', '数值': 600 }, 12 | { '状态': '点击', '数值': 300 }, 13 | { '状态': '订单', '数值': 100 } 14 | ] 15 | }, 16 | settings: {} 17 | }, 18 | { 19 | name: '使用默认顺序', 20 | data: { 21 | columns: ['状态', '数值'], 22 | rows: [ 23 | { '状态': '展示', '数值': 900 }, 24 | { '状态': '访问', '数值': 100 }, 25 | { '状态': '零', '数值': 0 }, 26 | { '状态': '点击', '数值': 300 }, 27 | { '状态': '订单', '数值': 200 } 28 | ] 29 | }, 30 | settings: { 31 | useDefaultOrder: true, 32 | filterZero: true 33 | } 34 | }, 35 | { 36 | name: '定制维度顺序', 37 | data: { 38 | columns: ['状态', '数值'], 39 | rows: [ 40 | { '状态': '展示', '数值': 900 }, 41 | { '状态': '访问', '数值': 600 }, 42 | { '状态': '点击', '数值': 300 }, 43 | { '状态': '订单', '数值': 100 } 44 | ] 45 | }, 46 | settings: { 47 | sequence: ['订单', '点击', '访问', '展示'] 48 | } 49 | }, 50 | { 51 | name: '数据类型配置', 52 | data: { 53 | columns: ['状态', '数值'], 54 | rows: [ 55 | { '状态': '展示', '数值': 0.9 }, 56 | { '状态': '访问', '数值': 0.6 }, 57 | { '状态': '点击', '数值': 0.3 }, 58 | { '状态': '订单', '数值': 0.00001 } 59 | ] 60 | }, 61 | settings: { 62 | dataType: 'percent', 63 | digit: 4 64 | } 65 | }, 66 | { 67 | name: '金字塔', 68 | data: { 69 | columns: ['状态', '数值'], 70 | rows: [ 71 | { '状态': '展示', '数值': 900 }, 72 | { '状态': '访问', '数值': 600 }, 73 | { '状态': '点击', '数值': 300 }, 74 | { '状态': '订单', '数值': 100 } 75 | ] 76 | }, 77 | settings: { 78 | ascending: true 79 | } 80 | }, 81 | { 82 | name: '指标维度配置', 83 | data: { 84 | columns: ['状态', '状态1', '数值'], 85 | rows: [ 86 | { '状态': '展示', '状态1': '展示1', '数值': 900 }, 87 | { '状态': '访问', '状态1': '访问1', '数值': 600 }, 88 | { '状态': '点击', '状态1': '点击1', '数值': 300 }, 89 | { '状态': '订单', '状态1': '订单1', '数值': 100 } 90 | ] 91 | }, 92 | settings: { 93 | dimension: '状态1', 94 | metrics: '数值' 95 | } 96 | }, 97 | { 98 | name: '样式配置', 99 | data: { 100 | columns: ['状态', '状态1', '数值'], 101 | rows: [ 102 | { '状态': '展示', '状态1': '展示1', '数值': 900 }, 103 | { '状态': '访问', '状态1': '访问1', '数值': 600 }, 104 | { '状态': '点击', '状态1': '点击1', '数值': 300 }, 105 | { '状态': '订单', '状态1': '订单1', '数值': 100 } 106 | ] 107 | }, 108 | settings: { 109 | dimension: '状态1', 110 | metrics: '数值', 111 | label: { 112 | normal: { 113 | show: true, 114 | color: '#00f' 115 | } 116 | } 117 | } 118 | }, 119 | { 120 | name: '设置legend别名漏斗图', 121 | data: { 122 | columns: ['状态', '数值'], 123 | rows: [ 124 | { '状态': '展示', '数值': 0.9 }, 125 | { '状态': '访问', '数值': 0.6 }, 126 | { '状态': '点击', '数值': 0.3 }, 127 | { '状态': '订单', '数值': 0.00001 } 128 | ] 129 | }, 130 | settings: { 131 | legendName: { 132 | '订单': '订单biubiu～' 133 | } 134 | } 135 | } 136 | ] 137 | } 138 | -------------------------------------------------------------------------------- /examples/data/gauge.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '仪表盘', 3 | type: 'gauge', 4 | data: [ 5 | { 6 | name: '简单仪表盘', 7 | data: { 8 | columns: ['type', 'value'], 9 | rows: [ 10 | { type: '油量', value: 123 } 11 | ] 12 | }, 13 | settings: {} 14 | }, 15 | { 16 | name: '设置指标维度', 17 | data: { 18 | columns: ['a', 'b', 'type', 'value'], 19 | rows: [ 20 | { type: '油量', value: 123, a: 1, b: 2 } 21 | ] 22 | }, 23 | settings: { 24 | dimension: 'type', 25 | metrics: 'value' 26 | } 27 | }, 28 | { 29 | name: '设置数据类型', 30 | data: { 31 | columns: ['type', 'value'], 32 | rows: [ 33 | { type: '油量', value: 0.12 } 34 | ] 35 | }, 36 | settings: { 37 | dataType: { 38 | '油量': 'percent' 39 | }, 40 | seriesMap: { 41 | '油量': { 42 | min: 0, 43 | max: 1 44 | } 45 | } 46 | } 47 | }, 48 | { 49 | name: '设置别名', 50 | data: { 51 | columns: ['type', 'value'], 52 | rows: [ 53 | { type: 'speed', value: 123 } 54 | ] 55 | }, 56 | settings: { 57 | labelMap: { 58 | speed: '速度' 59 | }, 60 | dataName: { 61 | speed: 'km/h' 62 | } 63 | } 64 | }, 65 | { 66 | name: '多个仪表盘', 67 | data: { 68 | columns: ['type', 'value'], 69 | rows: [ 70 | { type: '油量', value: 2343 }, 71 | { type: '速度', value: 123 } 72 | ] 73 | }, 74 | settings: { 75 | seriesMap: { 76 | '油量': { 77 | radius: 90, 78 | center: ['25%', '55%'], 79 | min: 0, 80 | max: 10000 81 | }, 82 | '速度': { 83 | radius: 90, 84 | center: ['75%', '55%'] 85 | } 86 | } 87 | } 88 | } 89 | ] 90 | } 91 | -------------------------------------------------------------------------------- /examples/data/global.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data: { 3 | columns: ['日期', '余额', '年龄'], 4 | rows: [ 5 | { '日期': '1-1', '余额': 123, '年龄': 3 }, 6 | { '日期': '1-2', '余额': 1223, '年龄': 6 }, 7 | { '日期': '1-3', '余额': 2123, '年龄': 9 }, 8 | { '日期': '1-4', '余额': 4123, '年龄': 12 }, 9 | { '日期': '1-5', '余额': 3123, '年龄': 15 }, 10 | { '日期': '1-6', '余额': 7123, '年龄': 20 } 11 | ] 12 | }, 13 | grid: { left: 20, right: 20, top: 20, bottom: 20 }, 14 | colors: ['#eee', '#222', '#333', '#444'], 15 | scale: { x: true, y: true } 16 | } 17 | -------------------------------------------------------------------------------- /examples/data/heatmap.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '热力图', 3 | type: 'heatmap', 4 | data: [ 5 | { 6 | name: '简单热力图', 7 | data: { 8 | columns: ['时间', '地点', '人数', 'GDP', '气温'], 9 | rows: [ 10 | { '时间': '星期一', '地点': '北京', '人数': 1000, 'GDP': 100, '气温': 20 }, 11 | { '时间': '星期二', '地点': '上海', '人数': 400, 'GDP': 130, '气温': 21 }, 12 | { '时间': '星期三', '地点': '杭州', '人数': 800, 'GDP': 200, '气温': 22 }, 13 | { '时间': '星期二', '地点': '深圳', '人数': 200, 'GDP': 240, '气温': 23 }, 14 | { '时间': '星期三', '地点': '长春', '人数': 100, 'GDP': 300, '气温': 24 }, 15 | { '时间': '星期五', '地点': '南京', '人数': 300, 'GDP': 100, '气温': 25 }, 16 | { '时间': '星期四', '地点': '江苏', '人数': 800, 'GDP': 160, '气温': 26 }, 17 | { '时间': '星期一', '地点': '北京', '人数': 700, 'GDP': 190, '气温': 27 }, 18 | { '时间': '星期三', '地点': '上海', '人数': 300, 'GDP': 200, '气温': 28 }, 19 | { '时间': '星期二', '地点': '杭州', '人数': 500, 'GDP': 500, '气温': 29 } 20 | ] 21 | } 22 | }, 23 | { 24 | name: '配置坐标轴显示内容', 25 | data: { 26 | columns: ['时间', '地点', '人数'], 27 | rows: [ 28 | { '时间': '星期一', '地点': '北京', '人数': 1000 }, 29 | { '时间': '星期二', '地点': '上海', '人数': 400 }, 30 | { '时间': '星期三', '地点': '杭州', '人数': 800 }, 31 | { '时间': '星期二', '地点': '深圳', '人数': 200 }, 32 | { '时间': '星期三', '地点': '长春', '人数': 100 }, 33 | { '时间': '星期五', '地点': '南京', '人数': 300 }, 34 | { '时间': '星期四', '地点': '江苏', '人数': 800 }, 35 | { '时间': '星期三', '地点': '北京', '人数': 700 }, 36 | { '时间': '星期三', '地点': '上海', '人数': 300 }, 37 | { '时间': '星期二', '地点': '杭州', '人数': 500 } 38 | ] 39 | }, 40 | settings: { 41 | xAxisList: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 42 | yAxisList: ['北京', '上海', '杭州', '深圳', '长春', '南京', '江苏'] 43 | } 44 | }, 45 | { 46 | name: '地图+热力图', 47 | data: { 48 | columns: ['lat', 'lng', '人数'], 49 | rows: [ 50 | { 'lat': 115.892151, 'lng': 28.676493, '人数': 1000 }, 51 | { 'lat': 117.000923, 'lng': 36.675807, '人数': 400 }, 52 | { 'lat': 113.665412, 'lng': 34.757975, '人数': 800 }, 53 | { 'lat': 114.298572, 'lng': 30.584355, '人数': 200 }, 54 | { 'lat': 112.982279, 'lng': 28.19409, '人数': 100 }, 55 | { 'lat': 113.280637, 'lng': 23.125178, '人数': 300 }, 56 | { 'lat': 110.33119, 'lng': 20.031971, '人数': 800 }, 57 | { 'lat': 104.065735, 'lng': 30.659462, '人数': 700 }, 58 | { 'lat': 108.948024, 'lng': 34.263161, '人数': 300 }, 59 | { 'lat': 103.823557, 'lng': 36.058039, '人数': 500 } 60 | ] 61 | }, 62 | settings: { 63 | position: 'china', 64 | type: 'map', 65 | geo: { 66 | label: { 67 | emphasis: { 68 | show: false 69 | } 70 | }, 71 | itemStyle: { 72 | normal: { 73 | areaColor: '#323c48', 74 | borderColor: '#111' 75 | }, 76 | emphasis: { 77 | areaColor: '#2a333d' 78 | } 79 | } 80 | } 81 | } 82 | }, 83 | { 84 | name: '百度地图+热力图', 85 | data: { 86 | columns: ['lat', 'lng'], 87 | rows: [ 88 | { 'lat': 120.14322240845, 'lng': 30.236064370321 }, 89 | { 'lat': 120.14301682797, 'lng': 30.236035316745 }, 90 | { 'lat': 120.14138577045, 'lng': 30.236113748704 }, 91 | { 'lat': 120.1400398833, 'lng': 30.235973050702 }, 92 | { 'lat': 120.13893453465, 'lng': 30.23517220446 }, 93 | { 'lat': 120.1382899739, 'lng': 30.234062922977 }, 94 | { 'lat': 120.13265960629, 'lng': 30.231641351722 }, 95 | { 'lat': 120.13170681763, 'lng': 30.229925745619 }, 96 | { 'lat': 120.13119614803, 'lng': 30.228996846637 }, 97 | { 'lat': 120.13023980134, 'lng': 30.228226570416 } 98 | ] 99 | }, 100 | settings: { 101 | key: 'oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK', 102 | bmap: { 103 | center: [120.14322240845, 30.236064370321], 104 | zoom: 14, 105 | roam: true 106 | }, 107 | type: 'bmap' 108 | } 109 | } 110 | ] 111 | } 112 | -------------------------------------------------------------------------------- /examples/data/index.js: -------------------------------------------------------------------------------- 1 | import bar from './bar' 2 | import histogram from './histogram' 3 | import line from './line' 4 | import pie from './pie' 5 | import ring from './ring' 6 | import waterfall from './waterfall' 7 | import funnel from './funnel' 8 | import radar from './radar' 9 | import chart from './chart' 10 | import map from './map' 11 | import sankey from './sankey' 12 | import heatmap from './heatmap' 13 | import scatter from './scatter' 14 | import candle from './candle' 15 | import gauge from './gauge' 16 | import tree from './tree' 17 | import liquidfill from './liquidfill' 18 | import wordcloud from './wordcloud' 19 | 20 | export default { 21 | bar, 22 | histogram, 23 | line, 24 | pie, 25 | ring, 26 | waterfall, 27 | funnel, 28 | radar, 29 | chart, 30 | map, 31 | sankey, 32 | heatmap, 33 | scatter, 34 | candle, 35 | gauge, 36 | tree, 37 | liquidfill, 38 | wordcloud 39 | } 40 | -------------------------------------------------------------------------------- /examples/data/liquidfill.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '水球图', 3 | type: 'liquidfill', 4 | data: [ 5 | { 6 | name: '简单水球图', 7 | data: { 8 | columns: ['city', 'percent'], 9 | rows: [{ 10 | city: '上海', 11 | percent: 0.633333 12 | }] 13 | }, 14 | settings: {} 15 | }, 16 | { 17 | name: '分层水球图', 18 | data: { 19 | columns: ['city', 'percent'], 20 | rows: [{ 21 | city: '上海', 22 | percent: 0.7 23 | }] 24 | }, 25 | settings: { 26 | wave: [0.5, 0.3, 0.1], 27 | seriesMap: { 28 | '上海': { 29 | color: ['red', 'green', 'yellow'] 30 | } 31 | } 32 | } 33 | }, 34 | { 35 | name: '多个水球图', 36 | data: { 37 | columns: ['city', 'percent'], 38 | rows: [{ 39 | city: '上海', 40 | percent: 0.6 41 | }, { 42 | city: '广州', 43 | percent: 0.4 44 | }, { 45 | city: '成都', 46 | percent: 0.9 47 | }] 48 | }, 49 | settings: { 50 | wave: [[0.5, 0.3, 0.1], [0.3, 0.2], []], 51 | seriesMap: [ 52 | { 53 | color: ['red', 'green', 'yellow'], 54 | label: { 55 | formatter (options) { 56 | const { 57 | seriesName, 58 | data: { 59 | value 60 | } 61 | } = options 62 | return `${seriesName}\n${value}` 63 | }, 64 | fontSize: 30 65 | }, 66 | center: ['18%', '50%'], 67 | radius: '50%' 68 | }, 69 | { 70 | label: { 71 | formatter (options) { 72 | return `${options.seriesName}\n${options.data.value}` 73 | }, 74 | fontSize: 30 75 | }, 76 | center: ['50%', '50%'], 77 | radius: '50%' 78 | }, 79 | { 80 | label: { 81 | fontSize: 30 82 | }, 83 | center: ['80%', '50%'], 84 | radius: '50%' 85 | } 86 | ] 87 | } 88 | }, 89 | { 90 | name: '水球图的形状', 91 | data: { 92 | columns: ['city', 'percent'], 93 | rows: [{ 94 | city: '上海', 95 | percent: 0.6 96 | }] 97 | }, 98 | settings: { 99 | seriesMap: { 100 | '上海': { 101 | shape: 'rect' 102 | } 103 | } 104 | } 105 | }, 106 | { 107 | name: '水球图文字标签及样式设置', 108 | data: { 109 | columns: ['city', 'percent'], 110 | rows: [{ 111 | city: '上海', 112 | percent: 0.6, 113 | val: 0.8 114 | }] 115 | }, 116 | settings: { 117 | dimension: 'city', 118 | metrics: 'val', 119 | seriesMap: { 120 | '上海': { 121 | color: ['red'], 122 | itemStyle: { 123 | opacity: 0.2 124 | }, 125 | emphasis: { 126 | itemStyle: { 127 | opacity: 0.8 128 | } 129 | }, 130 | backgroundStyle: { 131 | color: 'yellow' 132 | }, 133 | label: { 134 | formatter (options) { 135 | const { 136 | seriesName, 137 | value 138 | } = options 139 | return `${seriesName}\n${value * 100}%` 140 | }, 141 | fontSize: 40, 142 | color: 'green', 143 | insideColor: 'red' 144 | } 145 | } 146 | } 147 | } 148 | } 149 | ] 150 | } 151 | -------------------------------------------------------------------------------- /examples/data/radar.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '雷达图', 3 | type: 'radar', 4 | data: [ 5 | { 6 | name: '简单雷达图', 7 | data: { 8 | columns: ['城市', '房价', '收入', '人口比例'], 9 | rows: [ 10 | { '房价': 10000, '收入': 4000, '人口比例': 0.4, '城市': '北京' }, 11 | { '房价': 20000, '收入': 6000, '人口比例': 0.6, '城市': '上海' }, 12 | { '房价': 30000, '收入': 8000, '人口比例': 0.2, '城市': '广州' } 13 | ] 14 | }, 15 | settings: { 16 | dataType: { 17 | '人口比例': 'percent' 18 | } 19 | } 20 | }, 21 | { 22 | name: '指标维度配置', 23 | data: { 24 | columns: ['城市', '房价', '收入', '人口比例'], 25 | rows: [ 26 | { '房价': 10000, '收入': 4000, '人口比例': 0.4, '城市': '北京' }, 27 | { '房价': 20000, '收入': 6000, '人口比例': 0.6, '城市': '上海' }, 28 | { '房价': 30000, '收入': 8000, '人口比例': 0.2, '城市': '广州' } 29 | ] 30 | }, 31 | settings: { 32 | dataType: { 33 | '人口比例': 'percent' 34 | }, 35 | dimension: '城市', 36 | metrics: ['收入', '人口比例', '房价'] 37 | } 38 | }, 39 | { 40 | name: '样式配置', 41 | data: { 42 | columns: ['城市', '房价', '收入', '人口比例'], 43 | rows: [ 44 | { '房价': 10000, '收入': 4000, '人口比例': 0.4, '城市': '北京' }, 45 | { '房价': 20000, '收入': 6000, '人口比例': 0.6, '城市': '上海' }, 46 | { '房价': 30000, '收入': 8000, '人口比例': 0.2, '城市': '广州' } 47 | ] 48 | }, 49 | settings: { 50 | label: { 51 | normal: { 52 | color: 'red', 53 | show: true 54 | } 55 | } 56 | } 57 | }, 58 | { 59 | name: '雷达图配置labelMap', 60 | data: { 61 | columns: ['city', 'housePrices', 'income', 'proportion'], 62 | rows: [ 63 | { 'housePrices': 10000, 'income': 4000, 'proportion': 0.4, 'city': '北京' }, 64 | { 'housePrices': 20000, 'income': 6000, 'proportion': 0.6, 'city': '上海' }, 65 | { 'housePrices': 30000, 'income': 8000, 'proportion': 0.2, 'city': '广州' } 66 | ] 67 | }, 68 | settings: { 69 | labelMap: { 70 | 'city': '城市', 71 | 'housePrices': '房价', 72 | 'income': '收入', 73 | 'proportion': '人口比例' 74 | } 75 | } 76 | }, 77 | { 78 | name: '雷达图配置legendName', 79 | data: { 80 | columns: ['城市', '房价', '收入', '人口比例'], 81 | rows: [ 82 | { '房价': 10000, '收入': 4000, '人口比例': 0.4, '城市': '北京' }, 83 | { '房价': 20000, '收入': 6000, '人口比例': 0.6, '城市': '上海' }, 84 | { '房价': 30000, '收入': 8000, '人口比例': 0.2, '城市': '广州' } 85 | ] 86 | }, 87 | settings: { 88 | legendName: { 89 | '北京': 'BeiJing' 90 | } 91 | } 92 | } 93 | ] 94 | } 95 | -------------------------------------------------------------------------------- /examples/data/sankey.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '桑基图', 3 | type: 'sankey', 4 | data: [ 5 | { 6 | name: '简单桑基图', 7 | data: { 8 | columns: ['页面', '访问量'], 9 | rows: [ 10 | { '页面': '首页', '访问量': 1000 }, 11 | { '页面': '列表页a', '访问量': 200 }, 12 | { '页面': '列表页b', '访问量': 800 }, 13 | { '页面': '内容页a-1', '访问量': 100 }, 14 | { '页面': '内容页a-2', '访问量': 100 }, 15 | { '页面': '内容页b-1', '访问量': 600 }, 16 | { '页面': '内容页b-2', '访问量': 200 } 17 | ] 18 | }, 19 | settings: { 20 | links: [ 21 | { source: '首页', target: '列表页a' }, 22 | { source: '首页', target: '列表页b' }, 23 | { source: '列表页a', target: '内容页a-1' }, 24 | { source: '列表页a', target: '内容页a-2' }, 25 | { source: '列表页b', target: '内容页b-1' }, 26 | { source: '列表页b', target: '内容页b-2' } 27 | ] 28 | } 29 | }, 30 | { 31 | name: '强制设置使用 rows 中的数据', 32 | data: { 33 | columns: ['页面', '访问量'], 34 | rows: [ 35 | { '页面': '首页', '访问量': 1000 }, 36 | { '页面': '列表页a', '访问量': 200 }, 37 | { '页面': '列表页b', '访问量': 800 }, 38 | { '页面': '内容页a-1', '访问量': 100 }, 39 | { '页面': '内容页a-2', '访问量': 100 }, 40 | { '页面': '内容页b-1', '访问量': 600 }, 41 | { '页面': '内容页b-2', '访问量': 200 } 42 | ] 43 | }, 44 | settings: { 45 | links: [ 46 | { source: '首页', target: '列表页a', value: '' }, 47 | { source: '首页', target: '列表页b', value: '' }, 48 | { source: '列表页a', target: '内容页a-1', value: '' }, 49 | { source: '列表页a', target: '内容页a-2', value: '' }, 50 | { source: '列表页b', target: '内容页b-1', value: '' }, 51 | { source: '列表页b', target: '内容页b-2', value: '' } 52 | ], 53 | useDataValue: true 54 | } 55 | }, 56 | { 57 | name: '设置数据类型', 58 | data: { 59 | columns: ['页面', '访问量'], 60 | rows: [ 61 | { '页面': '首页', '访问量': 100000 }, 62 | { '页面': '列表页a', '访问量': 20000 }, 63 | { '页面': '列表页b', '访问量': 80000 }, 64 | { '页面': '内容页a-1', '访问量': 10000 }, 65 | { '页面': '内容页a-2', '访问量': 10000 }, 66 | { '页面': '内容页b-1', '访问量': 60000 }, 67 | { '页面': '内容页b-2', '访问量': 20000 } 68 | ] 69 | }, 70 | settings: { 71 | links: [ 72 | { source: '首页', target: '列表页a', value: 0.1 }, 73 | { source: '首页', target: '列表页b', value: 0.1 }, 74 | { source: '列表页a', target: '内容页a-1', value: 0.1 }, 75 | { source: '列表页a', target: '内容页a-2', value: 0.1 }, 76 | { source: '列表页b', target: '内容页b-1', value: 0.1 }, 77 | { source: '列表页b', target: '内容页b-2', value: 0.1 } 78 | ], 79 | dataType: ['KMB', 'percent'] 80 | } 81 | }, 82 | { 83 | name: '样式设置', 84 | data: { 85 | columns: ['页面', '访问量'], 86 | rows: [ 87 | { '页面': '首页', '访问量': 100000 }, 88 | { '页面': '列表页a', '访问量': 20000 }, 89 | { '页面': '列表页b', '访问量': 80000 }, 90 | { '页面': '内容页a-1', '访问量': 10000 }, 91 | { '页面': '内容页a-2', '访问量': 10000 }, 92 | { '页面': '内容页b-1', '访问量': 60000 }, 93 | { '页面': '内容页b-2', '访问量': 20000 } 94 | ] 95 | }, 96 | settings: { 97 | links: [ 98 | { source: '首页', target: '列表页a', value: 0.1 }, 99 | { source: '首页', target: '列表页b', value: 0.1 }, 100 | { source: '列表页a', target: '内容页a-1', value: 0.1 }, 101 | { source: '列表页a', target: '内容页a-2', value: 0.1 }, 102 | { source: '列表页b', target: '内容页b-1', value: 0.1 }, 103 | { source: '列表页b', target: '内容页b-2', value: 0.1 } 104 | ], 105 | label: { 106 | normal: { 107 | show: true, 108 | color: '#00f' 109 | } 110 | } 111 | } 112 | } 113 | ] 114 | } 115 | -------------------------------------------------------------------------------- /examples/data/tree.js: -------------------------------------------------------------------------------- 1 | import { BASIC_DATA, SIMPLE_DATA } from './tree-data' 2 | 3 | export default { 4 | name: '树图', 5 | type: 'tree', 6 | data: [ 7 | { 8 | name: '简单树图', 9 | data: { 10 | columns: ['name', 'value'], 11 | rows: [ 12 | { 13 | name: 'tree1', 14 | value: [SIMPLE_DATA] 15 | } 16 | ] 17 | } 18 | }, 19 | { 20 | name: '多树图', 21 | data: { 22 | columns: ['name', 'value'], 23 | rows: [ 24 | { 25 | name: 'tree1', 26 | value: [BASIC_DATA] 27 | }, 28 | { 29 | name: 'tree2', 30 | value: [BASIC_DATA] 31 | } 32 | ] 33 | }, 34 | settings: { 35 | seriesMap: { 36 | tree1: { 37 | top: '5%', 38 | left: '7%', 39 | bottom: '2%', 40 | right: '60%' 41 | }, 42 | tree2: { 43 | top: '20%', 44 | left: '60%', 45 | bottom: '22%', 46 | right: '18%' 47 | } 48 | } 49 | } 50 | }, 51 | { 52 | name: '径向树图', 53 | data: { 54 | columns: ['name', 'value'], 55 | rows: [ 56 | { 57 | name: 'tree1', 58 | value: [BASIC_DATA] 59 | } 60 | ] 61 | }, 62 | settings: { 63 | seriesMap: { 64 | tree1: { 65 | layout: 'radial' 66 | } 67 | } 68 | } 69 | }, 70 | { 71 | name: '纵向树图', 72 | data: { 73 | columns: ['name', 'value'], 74 | rows: [ 75 | { 76 | name: 'tree1', 77 | value: [BASIC_DATA] 78 | } 79 | ] 80 | }, 81 | settings: { 82 | seriesMap: { 83 | tree1: { 84 | orient: 'vertical' 85 | } 86 | } 87 | } 88 | } 89 | ] 90 | } 91 | -------------------------------------------------------------------------------- /examples/data/waterfall.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: '瀑布图', 3 | type: 'waterfall', 4 | data: [ 5 | { 6 | name: '简单瀑布图', 7 | data: { 8 | columns: ['活动', '时间'], 9 | rows: [ 10 | { '活动': '吃饭', '时间': 4 }, 11 | { '活动': '睡觉', '时间': 10 }, 12 | { '活动': '打豆豆', '时间': 5 } 13 | ] 14 | }, 15 | settings: {} 16 | }, 17 | { 18 | name: '设定总量', 19 | data: { 20 | columns: ['活动', '时间'], 21 | rows: [ 22 | { '活动': '吃饭', '时间': 4 }, 23 | { '活动': '睡觉', '时间': 10 }, 24 | { '活动': '打豆豆', '时间': 5 } 25 | ] 26 | }, 27 | settings: { 28 | totalNum: 24 29 | } 30 | }, 31 | { 32 | name: '设定总量并且子项超标', 33 | data: { 34 | columns: ['活动', '时间'], 35 | rows: [ 36 | { '活动': '吃饭', '时间': 4 }, 37 | { '活动': '睡觉', '时间': 20 }, 38 | { '活动': '打豆豆', '时间': 5 } 39 | ] 40 | }, 41 | settings: { 42 | totalNum: 24 43 | } 44 | }, 45 | { 46 | name: '设定数据类型', 47 | data: { 48 | columns: ['活动', '时间'], 49 | rows: [ 50 | { '活动': '吃饭', '时间': 0.1 }, 51 | { '活动': '睡觉', '时间': 0.2 }, 52 | { '活动': '打豆豆', '时间': 0.3 } 53 | ] 54 | }, 55 | settings: { 56 | totalNum: 1, 57 | dataType: 'percent' 58 | } 59 | }, 60 | { 61 | name: '设定总量及其他名称', 62 | data: { 63 | columns: ['活动', '时间'], 64 | rows: [ 65 | { '活动': '吃饭', '时间': 4 }, 66 | { '活动': '睡觉', '时间': 10 }, 67 | { '活动': '打豆豆', '时间': 5 } 68 | ] 69 | }, 70 | settings: { 71 | totalNum: 24, 72 | totalName: '总时间', 73 | remainName: '剩余时间' 74 | } 75 | }, 76 | { 77 | name: '设定数据别名瀑布图', 78 | data: { 79 | columns: ['活动', '时间'], 80 | rows: [ 81 | { '活动': '吃饭', '时间': 4 }, 82 | { '活动': '睡觉', '时间': 10 }, 83 | { '活动': '打豆豆', '时间': 5 } 84 | ] 85 | }, 86 | settings: { 87 | labelMap: { 88 | '时间': 'time' 89 | } 90 | } 91 | } 92 | ] 93 | } 94 | -------------------------------------------------------------------------------- /examples/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/v-charts/f3c31e0cc0bc85e2685caaaf8e2fe658030f744c/examples/favicon.ico -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | v-charts 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | import App from './App' 2 | import Vue from 'vue' 3 | import router from './router' 4 | 5 | import CodeSection from './components/code-section' 6 | 7 | Vue.component(CodeSection.name, CodeSection) 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | template: '', 13 | router, 14 | components: { App } 15 | }) 16 | -------------------------------------------------------------------------------- /examples/pages/amap.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 48 | -------------------------------------------------------------------------------- /examples/pages/bmap.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 59 | -------------------------------------------------------------------------------- /examples/pages/chart.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 96 | 97 | 122 | -------------------------------------------------------------------------------- /examples/pages/install.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /examples/pages/test.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /examples/router.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable comma-dangle */ 2 | import Vue from 'vue' 3 | import Router from 'vue-router' 4 | 5 | Vue.use(Router) 6 | 7 | export const TEST_ROUTES = [ 8 | { path: '/columns-rows', name: 'data', component: () => import('./test/columns-rows.vue') }, 9 | { path: '/load', name: 'load', component: () => import('./test/load.vue') }, 10 | { path: '/custom-props', name: 'options', component: () => import('./test/custom-props.vue') }, 11 | { path: '/events', name: 'events', component: () => import('./test/events.vue') }, 12 | { path: '/extend', name: 'extend', component: () => import('./test/extend.vue') }, 13 | { path: '/hook', name: 'hook', component: () => import('./test/hook.vue') }, 14 | { path: '/init', name: 'init', component: () => import('./test/init.vue') }, 15 | { path: '/judge-width', name: 'judge-width', component: () => import('./test/judge-width.vue') }, 16 | { path: '/loading-empty', name: 'loading-empty', component: () => import('./test/loading-empty.vue') }, 17 | { path: '/mark', name: 'mark', component: () => import('./test/mark.vue') }, 18 | { path: '/resize', name: 'resize', component: () => import('./test/resize.vue') }, 19 | { path: '/set-option', name: 'set-option', component: () => import('./test/set-option.vue') }, 20 | { path: '/number-format', name: 'number', component: () => import('./test/number-format.vue') }, 21 | { path: '/data-zoom', name: 'data-zoom', component: () => import('./test/data-zoom.vue') }, 22 | ] 23 | 24 | export default new Router({ 25 | routes: [ 26 | { path: '/', name: '安装', component: () => import('./pages/install') }, 27 | { path: '/chart/:type', name: '图表', component: () => import('./pages/chart') }, 28 | { path: '/bmap', name: '百度地图', component: () => import('./pages/bmap') }, 29 | { path: '/amap', name: '高德地图', component: () => import('./pages/amap') }, 30 | ].concat(TEST_ROUTES) 31 | }) 32 | -------------------------------------------------------------------------------- /examples/static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElemeFE/v-charts/f3c31e0cc0bc85e2685caaaf8e2fe658030f744c/examples/static/logo.png -------------------------------------------------------------------------------- /examples/test/columns-rows.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 59 | -------------------------------------------------------------------------------- /examples/test/custom-props.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 123 | 124 | -------------------------------------------------------------------------------- /examples/test/data-zoom.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 41 | -------------------------------------------------------------------------------- /examples/test/data.js: -------------------------------------------------------------------------------- 1 | export const LINE_DATA = { 2 | columns: ['日期', '访问用户', '下单用户'], 3 | rows: [ 4 | { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 }, 5 | { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 }, 6 | { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 }, 7 | { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 }, 8 | { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 }, 9 | { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 } 10 | ] 11 | } 12 | 13 | export const LINE_DATA1 = { 14 | columns: ['日期', '访问用户', '下单用户'], 15 | rows: [ 16 | { '日期': '1/1', '访问用户': 393, '下单用户': 193, '下单率': 0.32 }, 17 | { '日期': '1/2', '访问用户': 530, '下单用户': 230, '下单率': 0.26 }, 18 | { '日期': '1/3', '访问用户': 923, '下单用户': 623, '下单率': 0.76 }, 19 | { '日期': '1/4', '访问用户': 723, '下单用户': 423, '下单率': 0.49 }, 20 | { '日期': '1/5', '访问用户': 792, '下单用户': 492, '下单率': 0.323 }, 21 | { '日期': '1/6', '访问用户': 593, '下单用户': 293, '下单率': 0.78 } 22 | ] 23 | } 24 | 25 | export const SIMPLE_LINE_DATA = { 26 | columns: ['日期', '访问用户', '下单用户'], 27 | rows: [ 28 | ['1/1', 1393, 1093], 29 | ['1/2', 3530, 3230], 30 | ['1/3', 2923, 2623], 31 | ['1/4', 1723, 1423], 32 | ['1/5', 3792, 3492], 33 | ['1/6', 4593, 4293] 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /examples/test/events.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 27 | -------------------------------------------------------------------------------- /examples/test/extend.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 44 | -------------------------------------------------------------------------------- /examples/test/hook.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 60 | -------------------------------------------------------------------------------- /examples/test/init.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 46 | -------------------------------------------------------------------------------- /examples/test/judge-width.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 30 | -------------------------------------------------------------------------------- /examples/test/load.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 27 | -------------------------------------------------------------------------------- /examples/test/loading-empty.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 28 | -------------------------------------------------------------------------------- /examples/test/mark.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 70 | -------------------------------------------------------------------------------- /examples/test/number-format.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /examples/test/resize.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 43 | -------------------------------------------------------------------------------- /examples/test/set-option.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v-charts", 3 | "version": "1.19.0", 4 | "description": "Vue Echarts Components", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --progress --config ./build/webpack.config.js", 8 | "build": "rm -f -r lib && node build/rollup.config.js && cp -f lib/index.min.js lib/style.min.css docs/", 9 | "buildOnly": "rm -f -r lib && node build/rollup.config.js", 10 | "prepublishOnly": "npm run build", 11 | "test": "karma start ./test/karma.conf.js", 12 | "docs": "docsify serve docs", 13 | "deploy": "gh-pages -d docs", 14 | "version": "conventional-changelog -p angular -i CHANGELOG.md -s && conventional-changelog -p angular -i CHANGELOG_CN.md -s && git add CHANGELOG.md CHANGELOG_CN.md" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/ElemeFE/v-charts.git" 19 | }, 20 | "keywords": [ 21 | "vue", 22 | "echarts" 23 | ], 24 | "author": "xiguaxigua", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/ElemeFE/v-charts/issues" 28 | }, 29 | "homepage": "https://v-charts.js.org", 30 | "peerDependencies": { 31 | "echarts": ">3.0.0", 32 | "vue": ">2.0.0" 33 | }, 34 | "dependencies": { 35 | "echarts-amap": "1.0.0-rc.6", 36 | "echarts-liquidfill": "^2.0.2", 37 | "echarts-wordcloud": "^1.1.3", 38 | "numerify": "1.2.9", 39 | "utils-lite": "0.1.10" 40 | }, 41 | "devDependencies": { 42 | "autoprefixer": "^8.6.3", 43 | "babel-core": "^6.26.3", 44 | "babel-eslint": "^8.2.3", 45 | "babel-loader": "^7.1.4", 46 | "babel-plugin-external-helpers": "^6.22.0", 47 | "babel-plugin-transform-object-assign": "^6.22.0", 48 | "babel-polyfill": "^6.26.0", 49 | "babel-preset-env": "^1.7.0", 50 | "babel-preset-stage-2": "^6.24.1", 51 | "conventional-changelog-cli": "^2.0.1", 52 | "css-loader": "^0.28.11", 53 | "cssnano": "^3.10.0", 54 | "docsify-cli": "^4.2.1", 55 | "echarts": "^4.1.0", 56 | "es6-promise": "^4.2.4", 57 | "eslint": "^4.19.1", 58 | "eslint-config-standard": "^11.0.0", 59 | "eslint-friendly-formatter": "^4.0.1", 60 | "eslint-loader": "^2.0.0", 61 | "eslint-plugin-html": "^4.0.3", 62 | "eslint-plugin-import": "^2.12.0", 63 | "eslint-plugin-node": "^6.0.1", 64 | "eslint-plugin-promise": "^3.8.0", 65 | "eslint-plugin-standard": "^3.1.0", 66 | "gh-pages": "^1.2.0", 67 | "html-webpack-plugin": "^3.2.0", 68 | "jasmine-core": "^3.1.0", 69 | "karma": "^2.0.3", 70 | "karma-babel-preprocessor": "^7.0.0", 71 | "karma-chrome-launcher": "^2.2.0", 72 | "karma-commonjs": "^1.0.0", 73 | "karma-jasmine": "^1.1.2", 74 | "karma-phantomjs-launcher": "^1.0.4", 75 | "karma-spec-reporter": "^0.0.32", 76 | "karma-webpack": "^3.0.0", 77 | "less": "^3.0.4", 78 | "less-loader": "^4.1.0", 79 | "phantomjs-prebuilt": "^2.1.16", 80 | "prismjs": "^1.15.0", 81 | "rollup": "^0.60.1", 82 | "rollup-plugin-babel": "^3.0.4", 83 | "rollup-plugin-commonjs": "^9.1.3", 84 | "rollup-plugin-eslint": "^4.0.0", 85 | "rollup-plugin-node-resolve": "^3.3.0", 86 | "rollup-plugin-uglify": "^4.0.0", 87 | "rollup-plugin-vue": "2.5.2", 88 | "style-loader": "^0.21.0", 89 | "uglify-es": "^3.3.9", 90 | "vue": "^2.5.16", 91 | "vue-loader": "^15.2.4", 92 | "vue-router": "^3.0.1", 93 | "vue-style-loader": "^4.1.0", 94 | "vue-template-compiler": "^2.5.16", 95 | "webpack": "^4.11.1", 96 | "webpack-cli": "^3.0.8", 97 | "webpack-dev-server": "^3.1.4" 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/component-list.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable comma-dangle */ 2 | module.exports = { 3 | VeBar: { src: 'src/packages/bar/index.js', dist: 'lib/bar' }, 4 | VeHistogram: { src: 'src/packages/histogram/index.js', dist: 'lib/histogram' }, 5 | VeFunnel: { src: 'src/packages/funnel/index.js', dist: 'lib/funnel' }, 6 | VeLine: { src: 'src/packages/line/index.js', dist: 'lib/line' }, 7 | VePie: { src: 'src/packages/pie/index.js', dist: 'lib/pie' }, 8 | VeRing: { src: 'src/packages/ring/index.js', dist: 'lib/ring' }, 9 | VeRadar: { src: 'src/packages/radar/index.js', dist: 'lib/radar' }, 10 | VeWaterfall: { src: 'src/packages/waterfall/index.js', dist: 'lib/waterfall' }, 11 | VeIndex: { src: 'src/packages/index/index.js', dist: 'lib/index' }, 12 | VeChart: { src: 'src/packages/chart/index.js', dist: 'lib/chart' }, 13 | VeMap: { src: 'src/packages/map/index.js', dist: 'lib/map' }, 14 | VeBmap: { src: 'src/packages/bmap/index.js', dist: 'lib/bmap' }, 15 | VeAmap: { src: 'src/packages/amap/index.js', dist: 'lib/amap' }, 16 | VeSankey: { src: 'src/packages/sankey/index.js', dist: 'lib/sankey' }, 17 | Veheatmap: { src: 'src/packages/heatmap/index.js', dist: 'lib/heatmap' }, 18 | VeScatter: { src: 'src/packages/scatter/index.js', dist: 'lib/scatter' }, 19 | VeCandle: { src: 'src/packages/candle/index.js', dist: 'lib/candle' }, 20 | VeGauge: { src: 'src/packages/gauge/index.js', dist: 'lib/gauge' }, 21 | VeTree: { src: 'src/packages/tree/index.js', dist: 'lib/tree' }, 22 | VeLiquidfill: { src: 'src/packages/liquidfill/index.js', dist: 'lib/liquidfill' }, 23 | VeWordcloud: { src: 'src/packages/wordcloud/index.js', dist: 'lib/wordcloud' } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/data-empty.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | -------------------------------------------------------------------------------- /src/components/loading.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 66 | -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const DEFAULT_THEME = { 2 | categoryAxis: { 3 | axisLine: { show: false }, 4 | axisTick: { show: false }, 5 | splitLine: { show: false } 6 | }, 7 | valueAxis: { 8 | axisLine: { show: false } 9 | }, 10 | line: { 11 | smooth: true 12 | }, 13 | grid: { 14 | containLabel: true, 15 | left: 10, 16 | right: 10 17 | } 18 | } 19 | 20 | export const DEFAULT_COLORS = [ 21 | '#19d4ae', '#5ab1ef', '#fa6e86', 22 | '#ffb980', '#0067a6', '#c4b4e4', 23 | '#d87a80', '#9cbbff', '#d9d0c7', 24 | '#87a997', '#d49ea2', '#5b4947', 25 | '#7ba3a8' 26 | ] 27 | 28 | export const HEAT_MAP_COLOR = [ 29 | '#313695', '#4575b4', '#74add1', 30 | '#abd9e9', '#e0f3f8', '#ffffbf', 31 | '#fee090', '#fdae61', '#f46d43', 32 | '#d73027', '#a50026' 33 | ] 34 | 35 | export const HEAT_BMAP_COLOR = [ 36 | 'blue', 'blue', 'green', 37 | 'yellow', 'red' 38 | ] 39 | 40 | export const itemPoint = (color) => { 41 | return [ 42 | '' 50 | ].join('') 51 | } 52 | 53 | export const STATIC_PROPS = [ 54 | 'initOptions', 'loading', 'dataEmpty', 55 | 'judgeWidth', 'widthChangeDelay' 56 | ] 57 | 58 | export const ECHARTS_SETTINGS = [ 59 | 'grid', 'dataZoom', 'visualMap', 60 | 'toolbox', 'title', 'legend', 61 | 'xAxis', 'yAxis', 'radar', 62 | 'tooltip', 'axisPointer', 'brush', 63 | 'geo', 'timeline', 'graphic', 64 | 'series', 'backgroundColor', 'textStyle' 65 | ] 66 | -------------------------------------------------------------------------------- /src/index.es.js: -------------------------------------------------------------------------------- 1 | import VeBar from './packages/bar' 2 | import VeHistogram from './packages/histogram' 3 | import VeLine from './packages/line' 4 | import VePie from './packages/pie' 5 | import VeRing from './packages/ring' 6 | import VeWaterfall from './packages/waterfall' 7 | import VeFunnel from './packages/funnel' 8 | import VeRadar from './packages/radar' 9 | import VeChart from './packages/chart' 10 | import VeMap from './packages/map' 11 | import VeBmap from './packages/bmap' 12 | import VeAmap from './packages/amap' 13 | import VeSankey from './packages/sankey' 14 | import VeHeatmap from './packages/heatmap' 15 | import VeScatter from './packages/scatter' 16 | import VeCandle from './packages/candle' 17 | import VeGauge from './packages/gauge' 18 | import VeTree from './packages/tree' 19 | import VeLiquidfill from './packages/liquidfill' 20 | import VeWordcloud from './packages/wordcloud' 21 | 22 | const components = [ 23 | VeBar, 24 | VeHistogram, 25 | VeLine, 26 | VePie, 27 | VeRing, 28 | VeWaterfall, 29 | VeFunnel, 30 | VeRadar, 31 | VeChart, 32 | VeMap, 33 | VeBmap, 34 | VeAmap, 35 | VeSankey, 36 | VeHeatmap, 37 | VeScatter, 38 | VeCandle, 39 | VeGauge, 40 | VeTree, 41 | VeLiquidfill, 42 | VeWordcloud 43 | ] 44 | 45 | function install (Vue, _) { 46 | components.forEach(component => { 47 | Vue.component(component.name, component) 48 | }) 49 | } 50 | 51 | export { 52 | VeBar, 53 | VeHistogram, 54 | VeRing, 55 | VeLine, 56 | VePie, 57 | VeWaterfall, 58 | VeFunnel, 59 | VeRadar, 60 | VeChart, 61 | VeMap, 62 | VeBmap, 63 | VeAmap, 64 | VeSankey, 65 | VeHeatmap, 66 | VeScatter, 67 | VeCandle, 68 | VeGauge, 69 | VeTree, 70 | VeLiquidfill, 71 | VeWordcloud, 72 | install 73 | } 74 | -------------------------------------------------------------------------------- /src/modules/animation.js: -------------------------------------------------------------------------------- 1 | export default function (options, animation) { 2 | Object.keys(animation).forEach(key => { 3 | options[key] = animation[key] 4 | }) 5 | } 6 | -------------------------------------------------------------------------------- /src/modules/extend.js: -------------------------------------------------------------------------------- 1 | import { set, isArray, isObject } from 'utils-lite' 2 | 3 | export default function (options, extend) { 4 | Object.keys(extend).forEach(attr => { 5 | const value = extend[attr] 6 | if (~attr.indexOf('.')) { 7 | // eg: a.b.c a.1.b 8 | set(options, attr, value) 9 | } else if (typeof value === 'function') { 10 | // get callback value 11 | options[attr] = value(options[attr]) 12 | } else { 13 | // mixin extend value 14 | if (isArray(options[attr]) && isObject(options[attr][0])) { 15 | // eg: [{ xx: 1 }, { xx: 2 }] 16 | options[attr].forEach((option, index) => { 17 | options[attr][index] = Object.assign({}, option, value) 18 | }) 19 | } else if (isObject(options[attr])) { 20 | // eg: { xx: 1, yy: 2 } 21 | options[attr] = Object.assign({}, options[attr], value) 22 | } else { 23 | options[attr] = value 24 | } 25 | } 26 | }) 27 | } 28 | -------------------------------------------------------------------------------- /src/modules/mark.js: -------------------------------------------------------------------------------- 1 | export default function (seriesItem, marks) { 2 | Object.keys(marks).forEach(key => { 3 | if (marks[key]) seriesItem[key] = marks[key] 4 | }) 5 | } 6 | -------------------------------------------------------------------------------- /src/packages/amap/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts-amap' 2 | import { amap } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeAmap', 6 | data () { 7 | this.chartHandler = amap 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/amap/main.js: -------------------------------------------------------------------------------- 1 | import { getAmap } from '../../utils' 2 | 3 | export const amap = (_, __, settings, extra) => { 4 | const { 5 | key, 6 | v, 7 | amap, 8 | useOuterMap 9 | } = settings 10 | const { _once } = extra 11 | const registerSign = 'amap_register' 12 | if (!key && !useOuterMap) console.warn('settings.key must be a string.') 13 | if (_once[registerSign]) return {} 14 | _once[registerSign] = true 15 | if (useOuterMap) return { amap } 16 | return getAmap(key, v).then(_ => { 17 | return { amap } 18 | }) 19 | } 20 | -------------------------------------------------------------------------------- /src/packages/bar/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/bar' 2 | import { bar } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeBar', 6 | data () { 7 | this.chartHandler = bar 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/bmap/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/extension/bmap/bmap' 2 | import { bmap } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeBmap', 6 | data () { 7 | this.chartHandler = bmap 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/bmap/main.js: -------------------------------------------------------------------------------- 1 | import { getBmap } from '../../utils' 2 | 3 | export const bmap = (_, __, settings, extra) => { 4 | const { 5 | key, 6 | v, 7 | bmap, 8 | useOuterMap 9 | } = settings 10 | const { _once } = extra 11 | const registerSign = 'bmap_register' 12 | if (!key && !useOuterMap) console.warn('settings.key must be a string.') 13 | if (_once[registerSign]) return {} 14 | _once[registerSign] = true 15 | if (useOuterMap) return { bmap } 16 | return getBmap(key, v).then(_ => { 17 | return { bmap } 18 | }) 19 | } 20 | -------------------------------------------------------------------------------- /src/packages/candle/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/bar' 2 | import 'echarts/lib/chart/line' 3 | import 'echarts/lib/chart/candlestick' 4 | import 'echarts/lib/component/visualMap' 5 | import 'echarts/lib/component/dataZoom' 6 | import { candle } from './main' 7 | import Core from '../../core' 8 | export default Object.assign({}, Core, { 9 | name: 'VeCandle', 10 | data () { 11 | this.chartHandler = candle 12 | return {} 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /src/packages/chart/index.js: -------------------------------------------------------------------------------- 1 | import { bar, histogram } from '../bar/main' 2 | import { line } from '../line/main' 3 | import { pie, ring } from '../pie/main' 4 | import { funnel } from '../funnel/main' 5 | import { radar } from '../radar/main' 6 | import { waterfall } from '../waterfall/main' 7 | import Core from '../../core' 8 | export default Object.assign({}, Core, { 9 | name: 'VeChart', 10 | data () { 11 | this.chartLib = { 12 | bar, 13 | histogram, 14 | line, 15 | pie, 16 | ring, 17 | funnel, 18 | radar, 19 | waterfall 20 | } 21 | this.chartHandler = this.chartLib[this.settings.type] 22 | return {} 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /src/packages/funnel/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/funnel' 2 | import { funnel } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeFunnel', 6 | data () { 7 | this.chartHandler = funnel 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/funnel/main.js: -------------------------------------------------------------------------------- 1 | import { itemPoint } from '../../constants' 2 | import { getFormated } from '../../utils' 3 | 4 | function getFunnelTooltip (dataType, digit) { 5 | return { 6 | trigger: 'item', 7 | formatter (item) { 8 | let tpl = [] 9 | tpl.push(itemPoint(item.color)) 10 | tpl.push(`${item.name}: ${getFormated(item.data.realValue, dataType, digit)}`) 11 | return tpl.join('') 12 | } 13 | } 14 | } 15 | 16 | function getFunnelLegend (args) { 17 | const { data, legendName } = args 18 | return { 19 | data, 20 | formatter (name) { 21 | return legendName[name] != null ? legendName[name] : name 22 | } 23 | } 24 | } 25 | 26 | function getFunnelSeries (args) { 27 | const { 28 | dimension, 29 | metrics, 30 | rows, 31 | sequence, 32 | ascending, 33 | label, 34 | labelLine, 35 | itemStyle, 36 | filterZero, 37 | useDefaultOrder 38 | } = args 39 | let series = { type: 'funnel' } 40 | let innerRows = rows.sort((a, b) => { 41 | return sequence.indexOf(a[dimension]) - sequence.indexOf(b[dimension]) 42 | }) 43 | 44 | if (filterZero) { 45 | innerRows = innerRows.filter(row => { 46 | return row[metrics] 47 | }) 48 | } 49 | 50 | let falseFunnel = false 51 | innerRows.some((row, index) => { 52 | if (index && row[metrics] > innerRows[index - 1][metrics]) { 53 | falseFunnel = true 54 | return true 55 | } 56 | }) 57 | 58 | const step = 100 / innerRows.length 59 | 60 | if (falseFunnel && !useDefaultOrder) { 61 | series.data = innerRows.slice().reverse().map((row, index) => ({ 62 | name: row[dimension], 63 | value: (index + 1) * step, 64 | realValue: row[metrics] 65 | })) 66 | } else { 67 | series.data = innerRows.map(row => ({ 68 | name: row[dimension], 69 | value: row[metrics], 70 | realValue: row[metrics] 71 | })) 72 | } 73 | 74 | if (ascending) series.sort = 'ascending' 75 | if (label) series.label = label 76 | if (labelLine) series.labelLine = labelLine 77 | if (itemStyle) series.itemStyle = itemStyle 78 | return series 79 | } 80 | 81 | export const funnel = (outerColumns, outerRows, settings, extra) => { 82 | const columns = outerColumns.slice() 83 | const rows = outerRows.slice() 84 | const { 85 | dataType = 'normal', 86 | dimension = columns[0], 87 | sequence = rows.map(row => row[dimension]), 88 | digit = 2, 89 | ascending, 90 | label, 91 | labelLine, 92 | legendName = {}, 93 | itemStyle, 94 | filterZero, 95 | useDefaultOrder 96 | } = settings 97 | const { tooltipVisible, legendVisible } = extra 98 | let metrics 99 | if (settings.metrics) { 100 | metrics = settings.metrics 101 | } else { 102 | let metricsTemp = columns.slice() 103 | metricsTemp.splice(columns.indexOf(dimension), 1) 104 | metrics = metricsTemp[0] 105 | } 106 | 107 | const tooltip = tooltipVisible && getFunnelTooltip(dataType, digit) 108 | const legend = legendVisible && getFunnelLegend({ data: sequence, legendName }) 109 | const series = getFunnelSeries({ 110 | dimension, 111 | metrics, 112 | rows, 113 | sequence, 114 | ascending, 115 | label, 116 | labelLine, 117 | itemStyle, 118 | filterZero, 119 | useDefaultOrder 120 | }) 121 | const options = { tooltip, legend, series } 122 | return options 123 | } 124 | -------------------------------------------------------------------------------- /src/packages/gauge/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/gauge' 2 | import { gauge } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeGauge', 6 | data () { 7 | this.chartHandler = gauge 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/gauge/main.js: -------------------------------------------------------------------------------- 1 | import { getFormated } from '../../utils' 2 | import { isObject } from 'utils-lite' 3 | 4 | function getTooltip (args) { 5 | const { tooltipFormatter, dataType, digit } = args 6 | return { 7 | formatter (options) { 8 | const { 9 | seriesName, 10 | data: { 11 | value, 12 | name 13 | } 14 | } = options 15 | if (tooltipFormatter) { 16 | return tooltipFormatter.apply(null, arguments) 17 | } 18 | const tpl = [] 19 | tpl.push(`${seriesName}: `) 20 | tpl.push(`${getFormated(value, dataType[seriesName], digit)} ${name}`) 21 | return tpl.join('') 22 | } 23 | } 24 | } 25 | 26 | function getSeries (args) { 27 | const { 28 | rows, 29 | dimension, 30 | metrics, 31 | digit, 32 | dataType, 33 | labelMap, 34 | seriesMap, 35 | dataName 36 | } = args 37 | 38 | const series = rows.map(row => { 39 | const label = row[dimension] 40 | const seriesItem = seriesMap[label] 41 | const result = { 42 | type: 'gauge', 43 | name: labelMap[label] != null ? labelMap[label] : label, 44 | data: [ 45 | { 46 | name: dataName[label] || '', 47 | value: row[metrics] 48 | } 49 | ], 50 | detail: { 51 | formatter (v) { 52 | return getFormated(v, dataType[label], digit) 53 | } 54 | }, 55 | axisLabel: { 56 | formatter (v) { 57 | return getFormated(v, dataType[label], digit) 58 | } 59 | } 60 | } 61 | 62 | if (seriesItem) { 63 | Object.keys(seriesItem).forEach(key => { 64 | if (isObject(result[key])) { 65 | Object.assign(result[key], seriesItem[key]) 66 | } else { 67 | result[key] = seriesItem[key] 68 | } 69 | }) 70 | } 71 | 72 | return result 73 | }) 74 | 75 | return series 76 | } 77 | 78 | export const gauge = (columns, rows, settings, extra) => { 79 | const { 80 | dimension = columns[0], 81 | metrics = columns[1], 82 | digit = 2, 83 | dataType = {}, 84 | labelMap = {}, 85 | seriesMap = {}, 86 | dataName = {} 87 | } = settings 88 | 89 | const { tooltipFormatter, tooltipVisible } = extra 90 | 91 | const tooltip = tooltipVisible && getTooltip({ 92 | tooltipFormatter, 93 | dataType 94 | }) 95 | 96 | const series = getSeries({ 97 | rows, 98 | dimension, 99 | metrics, 100 | digit, 101 | dataType, 102 | labelMap, 103 | seriesMap, 104 | dataName 105 | }) 106 | return { tooltip, series } 107 | } 108 | -------------------------------------------------------------------------------- /src/packages/heatmap/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/heatmap' 2 | import 'echarts/lib/component/visualMap' 3 | import 'echarts/extension/bmap/bmap' 4 | import 'echarts/lib/chart/map' 5 | import { heatmap } from './main' 6 | import Core from '../../core' 7 | export default Object.assign({}, Core, { 8 | name: 'VeHeatmap', 9 | data () { 10 | this.chartHandler = heatmap 11 | return {} 12 | } 13 | }) 14 | -------------------------------------------------------------------------------- /src/packages/histogram/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/bar' 2 | import { histogram } from '../bar/main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeHistogram', 6 | data () { 7 | this.chartHandler = histogram 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/index/index.js: -------------------------------------------------------------------------------- 1 | import VeBar from '../bar' 2 | import VeHistogram from '../histogram' 3 | import VeLine from '../line' 4 | import VePie from '../pie' 5 | import VeRing from '../ring' 6 | import VeWaterfall from '../waterfall' 7 | import VeFunnel from '../funnel' 8 | import VeRadar from '../radar' 9 | import VeChart from '../chart' 10 | import VeMap from '../map' 11 | import VeBmap from '../bmap' 12 | import VeAmap from '../amap' 13 | import VeSankey from '../sankey' 14 | import VeHeatmap from '../heatmap' 15 | import VeScatter from '../scatter' 16 | import VeCandle from '../candle' 17 | import VeGauge from '../gauge' 18 | import VeTree from '../tree' 19 | import VeLiquidfill from '../liquidfill' 20 | import VeWordcloud from '../wordcloud' 21 | 22 | const components = [ 23 | VeBar, 24 | VeHistogram, 25 | VeLine, 26 | VePie, 27 | VeRing, 28 | VeWaterfall, 29 | VeFunnel, 30 | VeRadar, 31 | VeChart, 32 | VeMap, 33 | VeBmap, 34 | VeAmap, 35 | VeSankey, 36 | VeHeatmap, 37 | VeScatter, 38 | VeCandle, 39 | VeGauge, 40 | VeTree, 41 | VeLiquidfill, 42 | VeWordcloud 43 | ] 44 | 45 | function install (Vue, _) { 46 | components.forEach(component => { 47 | Vue.component(component.name, component) 48 | }) 49 | } 50 | 51 | if (typeof window !== 'undefined' && window.Vue) { 52 | install(window.Vue) 53 | } 54 | 55 | export default { 56 | VeBar, 57 | VeHistogram, 58 | VeRing, 59 | VeLine, 60 | VePie, 61 | VeWaterfall, 62 | VeFunnel, 63 | VeRadar, 64 | VeChart, 65 | VeMap, 66 | VeBmap, 67 | VeAmap, 68 | VeSankey, 69 | VeScatter, 70 | VeCandle, 71 | VeGauge, 72 | VeTree, 73 | VeLiquidfill, 74 | VeWordcloud, 75 | install 76 | } 77 | -------------------------------------------------------------------------------- /src/packages/line/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/line' 2 | import { line } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeLine', 6 | data () { 7 | this.chartHandler = line 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/liquidfill/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts-liquidfill' 2 | import { 3 | liquidfill 4 | } from './main' 5 | import Core from '../../core' 6 | export default Object.assign({}, Core, { 7 | name: 'VeLiquidfill', 8 | data () { 9 | this.chartHandler = liquidfill 10 | return {} 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /src/packages/liquidfill/main.js: -------------------------------------------------------------------------------- 1 | import { 2 | isObject, 3 | isArray 4 | } from 'utils-lite' 5 | 6 | import { 7 | getFormated 8 | } from '../../utils' 9 | 10 | function getTooltip (args) { 11 | const { 12 | tooltipFormatter, 13 | dataType, 14 | digit 15 | } = args 16 | 17 | return { 18 | show: true, 19 | formatter (options) { 20 | const { 21 | seriesName, 22 | value 23 | } = options 24 | if (tooltipFormatter) { 25 | return tooltipFormatter.apply(null, arguments) 26 | } 27 | 28 | return [ 29 | `${seriesName}: `, 30 | getFormated(value, dataType, digit) 31 | ].join('') 32 | } 33 | } 34 | } 35 | 36 | function getSeries (args) { 37 | const { 38 | dimension, 39 | metrics, 40 | seriesMap, 41 | rows, 42 | wave 43 | } = args 44 | 45 | let itemWave = wave 46 | let len = isArray(seriesMap) ? seriesMap.length : 0 47 | 48 | return rows.slice().map((item, index) => { 49 | let data = [] 50 | let result = { 51 | type: 'liquidFill' 52 | } 53 | 54 | let name = item[dimension] 55 | let val = Number(item[metrics]) 56 | let itemMap = {} 57 | 58 | if (isArray(seriesMap)) { 59 | itemMap = !seriesMap[index] ? seriesMap[len - 1] : seriesMap[index] 60 | } else if (isObject(seriesMap[name])) { 61 | itemMap = seriesMap[name] 62 | } 63 | 64 | if (isArray(wave) && isArray(wave[0])) { 65 | itemWave = isArray(wave[index]) ? wave[index] : wave[wave.length - 1] 66 | } 67 | 68 | // 根据传入的数据(rows)和额外配置(seriesMap)的数据组合data 69 | data.push({ value: val }) 70 | if (itemWave && itemWave.length) { 71 | data = data.concat(itemWave.map(val => ({ value: val }))) 72 | } 73 | 74 | result = Object.assign(result, { data, name }, itemMap) 75 | return result 76 | }) 77 | } 78 | 79 | export const liquidfill = (columns, rows, settings, extra) => { 80 | const { 81 | dimension = columns[0], 82 | metrics = columns[1], 83 | seriesMap = {}, 84 | dataType = 'percent', 85 | digit = 2, 86 | wave = [] 87 | } = settings 88 | 89 | const { 90 | tooltipVisible, 91 | tooltipFormatter 92 | } = extra 93 | 94 | const tooltip = tooltipVisible && getTooltip({ 95 | tooltipFormatter, 96 | dataType, 97 | digit 98 | }) 99 | const series = getSeries({ 100 | rows, 101 | columns, 102 | dimension, 103 | metrics, 104 | seriesMap, 105 | wave 106 | }) 107 | 108 | return { 109 | tooltip, 110 | series 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/packages/map/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/map' 2 | import { map } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeMap', 6 | data () { 7 | this.chartHandler = map 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/pie/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/pie' 2 | import { pie } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VePie', 6 | data () { 7 | this.chartHandler = pie 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/radar/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/radar' 2 | import { radar } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeRadar', 6 | data () { 7 | this.chartHandler = radar 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/radar/main.js: -------------------------------------------------------------------------------- 1 | import { itemPoint } from '../../constants' 2 | import { getFormated } from '../../utils' 3 | 4 | function getRadarLegend (rows, dimension, legendName) { 5 | let legendData = rows.map(row => row[dimension]) 6 | 7 | return { 8 | data: legendData, 9 | formatter (name) { 10 | return legendName[name] != null ? legendName[name] : name 11 | } 12 | } 13 | } 14 | 15 | function getRadarTooltip (dataType, radar, digit) { 16 | const typeTemp = [] 17 | const nameTemp = [] 18 | radar.indicator.map((item, index) => { 19 | typeTemp[index] = dataType[item.name] 20 | nameTemp[index] = item.name 21 | }) 22 | return { 23 | formatter (item) { 24 | const tpl = [] 25 | tpl.push(itemPoint(item.color)) 26 | tpl.push(`${item.name}
`) 27 | item.data.value.forEach((val, index) => { 28 | tpl.push(`${nameTemp[index]}: `) 29 | tpl.push(`${getFormated(val, typeTemp[index], digit)}
`) 30 | }) 31 | return tpl.join('') 32 | } 33 | } 34 | } 35 | 36 | function getRadarSetting (rows, metrics, labelMap) { 37 | const settingBase = { 38 | indicator: [], 39 | shape: 'circle', 40 | splitNumber: 5 41 | } 42 | let indicatorTemp = {} 43 | rows.forEach(items => { 44 | metrics.forEach(item => { 45 | const key = labelMap[item] != null 46 | ? labelMap[item] 47 | : item 48 | if (!indicatorTemp[key]) { 49 | indicatorTemp[key] = [items[item]] 50 | } else { 51 | indicatorTemp[key].push(items[item]) 52 | } 53 | }) 54 | }) 55 | settingBase.indicator = Object.keys(indicatorTemp).map(key => { 56 | return { 57 | name: key, 58 | max: Math.max.apply(null, indicatorTemp[key]) 59 | } 60 | }) 61 | return settingBase 62 | } 63 | 64 | function getRadarSeries (args) { 65 | const { 66 | rows, 67 | dimension, 68 | metrics, 69 | radar, 70 | label, 71 | itemStyle, 72 | lineStyle, 73 | labelMap, 74 | areaStyle 75 | } = args 76 | let radarIndexObj = {} 77 | radar.indicator.forEach((item, index) => { 78 | const name = item.name 79 | radarIndexObj[name] = index 80 | }) 81 | 82 | const seriesData = rows.map(row => { 83 | const serieData = { 84 | value: [], 85 | name: row[dimension] 86 | } 87 | Object.keys(row).forEach(key => { 88 | if (~metrics.indexOf(key)) { 89 | let k = labelMap[key] != null 90 | ? radarIndexObj[labelMap[key]] 91 | : radarIndexObj[key] 92 | serieData.value[k] = row[key] 93 | } 94 | }) 95 | return serieData 96 | }) 97 | const result = { 98 | name: dimension, 99 | type: 'radar', 100 | data: seriesData 101 | } 102 | if (label) result.label = label 103 | if (itemStyle) result.itemStyle = itemStyle 104 | if (lineStyle) result.lineStyle = lineStyle 105 | if (areaStyle) result.areaStyle = areaStyle 106 | return [result] 107 | } 108 | 109 | export const radar = (columns, rows, settings, extra) => { 110 | const { 111 | dataType = {}, 112 | legendName = {}, 113 | labelMap = {}, 114 | dimension = columns[0], 115 | digit = 2, 116 | label, 117 | itemStyle, 118 | lineStyle, 119 | areaStyle 120 | } = settings 121 | const { tooltipVisible, legendVisible } = extra 122 | let metrics = columns.slice() 123 | if (settings.metrics) { 124 | metrics = settings.metrics 125 | } else { 126 | metrics.splice(columns.indexOf(dimension), 1) 127 | } 128 | const legend = legendVisible && getRadarLegend(rows, dimension, legendName) 129 | const radar = getRadarSetting(rows, metrics, labelMap) 130 | const tooltip = tooltipVisible && getRadarTooltip(dataType, radar, digit) 131 | const series = getRadarSeries({ 132 | rows, 133 | dimension, 134 | metrics, 135 | radar, 136 | label, 137 | itemStyle, 138 | lineStyle, 139 | labelMap, 140 | areaStyle 141 | }) 142 | const options = { legend, tooltip, radar, series } 143 | return options 144 | } 145 | -------------------------------------------------------------------------------- /src/packages/ring/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/pie' 2 | import { ring } from '../pie/main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeRing', 6 | data () { 7 | this.chartHandler = ring 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/sankey/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/sankey' 2 | import { sankey } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeSankey', 6 | data () { 7 | this.chartHandler = sankey 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/sankey/main.js: -------------------------------------------------------------------------------- 1 | import { getFormated } from '../../utils' 2 | import { itemPoint } from '../../constants' 3 | 4 | function getTooltip (args) { 5 | const { 6 | itemDataType, 7 | linksDataType, 8 | digit 9 | } = args 10 | return { 11 | trigger: 'item', 12 | formatter (item) { 13 | const tpl = [] 14 | const { name, data, value, color } = item 15 | tpl.push(itemPoint(color)) 16 | tpl.push(`${name} : `) 17 | if (data && data.source) { 18 | tpl.push(`${getFormated(value, linksDataType, digit)}
`) 19 | } else { 20 | tpl.push(`${getFormated(value, itemDataType, digit)}
`) 21 | } 22 | return tpl.join('') 23 | } 24 | } 25 | } 26 | 27 | function getSeries (args) { 28 | const { 29 | rows, 30 | dimension, 31 | metrics, 32 | links, 33 | valueFull, 34 | useDataValue, 35 | label, 36 | itemStyle, 37 | lineStyle 38 | } = args 39 | const dataMap = {} 40 | const seriesData = rows.map(row => { 41 | dataMap[row[dimension]] = row[metrics] 42 | return { name: row[dimension], value: row[metrics] } 43 | }) 44 | let innerLinks = null 45 | if (useDataValue) { 46 | innerLinks = links.map(link => { 47 | return Object.assign({}, link, { value: dataMap[link.target] }) 48 | }) 49 | } else if (!valueFull) { 50 | innerLinks = links.map(link => { 51 | return link.value == null 52 | ? Object.assign({}, link, { value: dataMap[link.target] }) 53 | : link 54 | }) 55 | } else { 56 | innerLinks = links 57 | } 58 | 59 | const result = { 60 | type: 'sankey', 61 | data: seriesData, 62 | links: innerLinks 63 | } 64 | if (label) result.label = label 65 | if (itemStyle) result.itemStyle = itemStyle 66 | if (lineStyle) result.lineStyle = lineStyle 67 | return [result] 68 | } 69 | 70 | export const sankey = (columns, rows, settings, extra) => { 71 | const { 72 | links, 73 | dimension = columns[0], 74 | metrics = columns[1], 75 | dataType = ['normal', 'normal'], 76 | digit = 2, 77 | valueFull = false, 78 | useDataValue = false, 79 | label, 80 | itemStyle, 81 | lineStyle 82 | } = settings 83 | 84 | if (!links) { 85 | console.warn('links is needed in settings!') 86 | return 87 | } 88 | 89 | const itemDataType = dataType[0] 90 | const linksDataType = dataType[1] 91 | const tooltip = getTooltip({ 92 | itemDataType, 93 | linksDataType, 94 | digit 95 | }) 96 | const series = getSeries({ 97 | rows, 98 | dimension, 99 | metrics, 100 | links, 101 | valueFull, 102 | useDataValue, 103 | label, 104 | itemStyle, 105 | lineStyle 106 | }) 107 | return { tooltip, series } 108 | } 109 | -------------------------------------------------------------------------------- /src/packages/scatter/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/scatter' 2 | import { scatter } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeScatter', 6 | data () { 7 | this.chartHandler = scatter 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/tree/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/tree' 2 | import { tree } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeTree', 6 | data () { 7 | this.chartHandler = tree 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/tree/main.js: -------------------------------------------------------------------------------- 1 | import { isObject } from 'utils-lite' 2 | 3 | function getTreeLegend (args) { 4 | const { 5 | dimension, 6 | rows 7 | } = args 8 | const result = rows.map(row => row[dimension]) 9 | return { data: result } 10 | } 11 | 12 | function getTreeTooltip (args) { 13 | const { 14 | tooltipFormatter 15 | } = args 16 | 17 | return { 18 | trigger: 'item', 19 | triggerOn: 'mousemove', 20 | formatter: tooltipFormatter 21 | } 22 | } 23 | 24 | function getTreeSeries (args) { 25 | const { 26 | dimension, 27 | metrics, 28 | rows, 29 | seriesMap 30 | } = args 31 | 32 | const series = [] 33 | rows.forEach(row => { 34 | const label = row[dimension] 35 | const seriesItem = seriesMap[label] 36 | const result = { 37 | type: 'tree', 38 | name: row[dimension], 39 | data: row[metrics] 40 | } 41 | if (seriesMap[row[dimension]]) { 42 | Object.keys(seriesItem).forEach(key => { 43 | if (isObject(result[key])) { 44 | Object.assign(result[key], seriesItem[key]) 45 | } else { 46 | result[key] = seriesItem[key] 47 | } 48 | }) 49 | } 50 | series.push(result) 51 | }) 52 | 53 | return series 54 | } 55 | 56 | export const tree = (columns, rows, settings, extra) => { 57 | const { 58 | dimension = columns[0], 59 | metrics = columns[1], 60 | seriesMap = {} 61 | } = settings 62 | 63 | const { legendVisible, tooltipFormatter, tooltipVisible } = extra 64 | 65 | const series = getTreeSeries({ 66 | dimension, 67 | metrics, 68 | rows, 69 | seriesMap 70 | }) 71 | const legend = legendVisible && rows.length > 1 && getTreeLegend({ 72 | dimension, 73 | rows 74 | }) 75 | const tooltip = tooltipVisible && getTreeTooltip({ 76 | tooltipFormatter 77 | }) 78 | return { series, legend, tooltip } 79 | } 80 | -------------------------------------------------------------------------------- /src/packages/waterfall/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts/lib/chart/bar' 2 | import { waterfall } from './main' 3 | import Core from '../../core' 4 | export default Object.assign({}, Core, { 5 | name: 'VeWaterfall', 6 | data () { 7 | this.chartHandler = waterfall 8 | return {} 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/packages/wordcloud/index.js: -------------------------------------------------------------------------------- 1 | import 'echarts-wordcloud' 2 | import { 3 | wordcloud 4 | } from './main' 5 | import Core from '../../core' 6 | export default Object.assign({}, Core, { 7 | name: 'VeWordcloud', 8 | data () { 9 | this.chartHandler = wordcloud 10 | return {} 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /src/packages/wordcloud/main.js: -------------------------------------------------------------------------------- 1 | import { isArray } from 'utils-lite' 2 | 3 | function getSeries (args) { 4 | const { 5 | dimension, 6 | metrics, 7 | rows, 8 | color, 9 | sizeMax, 10 | sizeMin, 11 | shape 12 | } = args 13 | 14 | const baseType = { 15 | type: 'wordCloud', 16 | textStyle: { 17 | normal: { 18 | color: !isArray(color) && !!color ? color : () => { 19 | return 'rgb(' + [ 20 | Math.round(Math.random() * 160), 21 | Math.round(Math.random() * 160), 22 | Math.round(Math.random() * 160) 23 | ].join(',') + ')' 24 | } 25 | } 26 | }, 27 | shape: shape, 28 | sizeRange: [sizeMin, sizeMax] 29 | } 30 | 31 | const len = isArray(color) ? color.length : 0 32 | const data = rows.slice().map(row => { 33 | const text = { 34 | name: row[dimension], 35 | value: row[metrics] 36 | } 37 | 38 | if (len > 0) { 39 | text.textStyle = { 40 | normal: { 41 | color: color[Math.floor(Math.random() * len)] 42 | } 43 | } 44 | } 45 | return text 46 | }) 47 | 48 | baseType.data = data 49 | 50 | return [baseType] 51 | } 52 | 53 | function getTooltip (args) { 54 | const { tooltipFormatter } = args 55 | 56 | return { 57 | show: true, 58 | formatter (params) { 59 | const { 60 | data: { 61 | name, 62 | value 63 | } 64 | } = params 65 | 66 | if (tooltipFormatter) { 67 | return tooltipFormatter.apply(null, params) 68 | } 69 | 70 | return `${name}: ${value}` 71 | } 72 | } 73 | } 74 | 75 | export const wordcloud = (columns, rows, settings, extra) => { 76 | const { 77 | dimension = columns[0], 78 | metrics = columns[1], 79 | color = '', 80 | sizeMax = 60, 81 | sizeMin = 12, 82 | shape = 'circle' 83 | } = settings 84 | 85 | const { 86 | tooltipVisible, 87 | tooltipFormatter 88 | } = extra 89 | 90 | const series = getSeries({ dimension, metrics, rows, color, sizeMax, sizeMin, shape }) 91 | const tooltip = tooltipVisible && getTooltip({ tooltipFormatter }) 92 | 93 | return { 94 | series, 95 | tooltip 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import numerify from 'numerify' 2 | import { isFunction } from 'utils-lite' 3 | 4 | export const getFormated = (val, type, digit, defaultVal = '-') => { 5 | if (isNaN(val)) return defaultVal 6 | if (!type) return val 7 | if (isFunction(type)) return type(val, numerify) 8 | 9 | digit = isNaN(digit) ? 0 : ++digit 10 | const digitStr = `.[${new Array(digit).join(0)}]` 11 | let formatter = type 12 | switch (type) { 13 | case 'KMB': 14 | formatter = digit ? `0,0${digitStr}a` : '0,0a' 15 | break 16 | case 'normal': 17 | formatter = digit ? `0,0${digitStr}` : '0,0' 18 | break 19 | case 'percent': 20 | formatter = digit ? `0,0${digitStr}%` : '0,0.[00]%' 21 | break 22 | } 23 | return numerify(val, formatter) 24 | } 25 | 26 | export const getStackMap = (stack) => { 27 | const stackMap = {} 28 | Object.keys(stack).forEach(item => { 29 | stack[item].forEach(name => { 30 | stackMap[name] = item 31 | }) 32 | }) 33 | return stackMap 34 | } 35 | 36 | export const $get = (url) => { 37 | return new Promise((resolve, reject) => { 38 | const xhr = new XMLHttpRequest() 39 | xhr.open('GET', url) 40 | xhr.send(null) 41 | xhr.onload = () => { 42 | resolve(JSON.parse(xhr.responseText)) 43 | } 44 | xhr.onerror = () => { 45 | reject(JSON.parse(xhr.responseText)) 46 | } 47 | }) 48 | } 49 | 50 | const mapPromise = {} 51 | 52 | export const getMapJSON = ({ 53 | position, 54 | positionJsonLink, 55 | beforeRegisterMapOnce, 56 | mapURLProfix 57 | }) => { 58 | const link = positionJsonLink || `${mapURLProfix}${position}.json` 59 | if (!mapPromise[link]) { 60 | mapPromise[link] = $get(link).then(res => { 61 | if (beforeRegisterMapOnce) res = beforeRegisterMapOnce(res) 62 | return res 63 | }) 64 | } 65 | return mapPromise[link] 66 | } 67 | 68 | let bmapPromise = null 69 | let amapPromise = null 70 | 71 | export const getBmap = (key, v) => { 72 | if (!bmapPromise) { 73 | bmapPromise = new Promise((resolve, reject) => { 74 | const callbackName = `bmap${Date.now()}` 75 | window[callbackName] = resolve 76 | const script = document.createElement('script') 77 | script.src = [ 78 | `https://api.map.baidu.com/api?v=${v || '2.0'}`, 79 | `ak=${key}`, 80 | `callback=${callbackName}` 81 | ].join('&') 82 | 83 | document.body.appendChild(script) 84 | }) 85 | } 86 | return bmapPromise 87 | } 88 | 89 | export const getAmap = (key, v) => { 90 | if (!amapPromise) { 91 | amapPromise = new Promise((resolve, reject) => { 92 | const callbackName = `amap${Date.now()}` 93 | window[callbackName] = resolve 94 | const script = document.createElement('script') 95 | script.src = [ 96 | `https://webapi.amap.com/maps?v=${v || '1.4.3'}`, 97 | `key=${key}`, 98 | `callback=${callbackName}` 99 | ].join('&') 100 | 101 | document.body.appendChild(script) 102 | }) 103 | } 104 | return amapPromise 105 | } 106 | 107 | export function setArrayValue (arr, index, value) { 108 | if (arr[index] !== undefined) { 109 | arr[index].push(value) 110 | } else { 111 | arr[index] = [value] 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | import Vue from 'vue' 3 | import chartData from '../examples/data/index.js' 4 | import 'echarts/lib/component/tooltip' 5 | import 'echarts/lib/component/legend' 6 | import { 7 | VeLine, 8 | VeBar, 9 | VeHistogram, 10 | VePie, 11 | VeRing, 12 | VeFunnel, 13 | VeRadar, 14 | VeWaterfall, 15 | VeChart, 16 | VeMap, 17 | VeSankey, 18 | VeHeatmap, 19 | VeScatter, 20 | VeCandle, 21 | VeGauge, 22 | VeLiquidfill, 23 | VeWordcloud 24 | } from '../lib/index.esm' 25 | 26 | window.Promise = require('es6-promise').Promise 27 | 28 | const comps = { 29 | line: VeLine, 30 | bar: VeBar, 31 | histogram: VeHistogram, 32 | pie: VePie, 33 | ring: VeRing, 34 | funnel: VeFunnel, 35 | radar: VeRadar, 36 | waterfall: VeWaterfall, 37 | chart: VeChart, 38 | map: VeMap, 39 | sankey: VeSankey, 40 | heatmap: VeHeatmap, 41 | scatter: VeScatter, 42 | candle: VeCandle, 43 | gauge: VeGauge, 44 | liquidfill: VeLiquidfill, 45 | wordcloud: VeWordcloud 46 | } 47 | let box 48 | let vm = {} 49 | createBox() 50 | 51 | afterEach(() => { 52 | if (vm.$el) document.body.removeChild(vm.$el) 53 | createBox() 54 | }) 55 | 56 | Object.keys(comps).forEach(type => { 57 | chartData[type].data.forEach(item => { 58 | describe(type + ': ', () => { 59 | testMount(type, comps[type], item) 60 | }) 61 | }) 62 | }) 63 | 64 | function testMount (type, comp, item) { 65 | it(item.name, () => { 66 | const Ctor = Vue.extend(comp) 67 | const vm = new Ctor({ 68 | propsData: { data: item.data, settings: item.settings } 69 | }).$mount(box) 70 | expect(vm.$el.classList.contains('ve-' + type)).toEqual(true) 71 | }) 72 | } 73 | 74 | function createBox () { 75 | box = document.createElement('div') 76 | box.id = 'app' 77 | document.body.appendChild(box) 78 | } 79 | -------------------------------------------------------------------------------- /test/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | config.set({ 3 | frameworks: ['jasmine'], 4 | files: [ 5 | './index.js' 6 | ], 7 | browsers: ['PhantomJS'], 8 | reporters: ['spec'], 9 | preprocessors: { 10 | './index.js': ['webpack'] 11 | }, 12 | webpack: { 13 | devtool: 'inline-source-map', 14 | mode: 'development', 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(js)$/, 19 | loader: 'babel-loader' 20 | } 21 | ] 22 | }, 23 | resolve: { 24 | extensions: ['.js', '.vue'] 25 | } 26 | }, 27 | singleRun: true 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /test/load/cdn/all/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /test/load/cdn/bmap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /test/load/cdn/gauge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 14 | 15 |
16 | 17 | 18 | 19 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /test/load/cdn/heatmap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /test/load/cdn/line/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /test/load/webpack/all/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 24 | -------------------------------------------------------------------------------- /test/load/webpack/all/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | import VeCharts from '../../../../lib/index.common' 5 | 6 | Vue.use(VeCharts) 7 | /* eslint-disable no-new */ 8 | new Vue({ 9 | el: '#app', 10 | render: h => h(App) 11 | }) 12 | -------------------------------------------------------------------------------- /test/load/webpack/all/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /test/load/webpack/candle/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /test/load/webpack/candle/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /test/load/webpack/css-part/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | -------------------------------------------------------------------------------- /test/load/webpack/css-part/index.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import App from './App' 4 | 5 | /* eslint-disable no-new */ 6 | new Vue({ 7 | el: '#app', 8 | render: h => h(App) 9 | }) 10 | -------------------------------------------------------------------------------- /test/load/webpack/css-part/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /test/load/webpack/esm/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 52 | -------------------------------------------------------------------------------- /test/load/webpack/esm/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /test/load/webpack/esm/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /test/load/webpack/gauge/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 37 | -------------------------------------------------------------------------------- /test/load/webpack/gauge/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /test/load/webpack/gauge/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /test/load/webpack/heatmap/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 40 | -------------------------------------------------------------------------------- /test/load/webpack/heatmap/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /test/load/webpack/heatmap/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /test/load/webpack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /test/load/webpack/line/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | -------------------------------------------------------------------------------- /test/load/webpack/line/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /test/load/webpack/line/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /test/load/webpack/scatter/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 46 | -------------------------------------------------------------------------------- /test/load/webpack/scatter/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /test/load/webpack/scatter/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /test/load/webpack/svg/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | -------------------------------------------------------------------------------- /test/load/webpack/svg/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /test/load/webpack/svg/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const path = require('path') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 5 | 6 | module.exports = { 7 | entry: './index.js', 8 | mode: 'development', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'index.js' 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.vue'] 15 | }, 16 | devServer: { 17 | port: '8180', 18 | hot: true, 19 | stats: 'errors-only', 20 | open: true 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.vue$/, 26 | loader: 'vue-loader' 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader' 31 | }, 32 | { 33 | test: /\.css$/, 34 | use: ['style-loader', 'css-loader'] 35 | } 36 | ] 37 | }, 38 | plugins: [ 39 | new webpack.HotModuleReplacementPlugin(), 40 | new HtmlWebpackPlugin({ 41 | filename: 'index.html', 42 | template: '../index.html', 43 | inject: true 44 | }), 45 | new VueLoaderPlugin() 46 | ] 47 | } 48 | --------------------------------------------------------------------------------