{"id":13531707,"url":"https://github.com/xlsdg/vue-echarts-v3","last_synced_at":"2025-05-15T20:05:22.049Z","repository":{"id":38361754,"uuid":"76919786","full_name":"xlsdg/vue-echarts-v3","owner":"xlsdg","description":"Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)","archived":false,"fork":false,"pushed_at":"2020-12-30T08:31:01.000Z","size":8939,"stargazers_count":904,"open_issues_count":10,"forks_count":124,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-12-31T04:02:28.242Z","etag":null,"topics":["chart","echarts","library","visualization","vue","vue-component","vue-echarts","vuejs"],"latest_commit_sha":null,"homepage":"https://xlsdg.github.io/vue-echarts-v3-demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xlsdg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-20T03:31:22.000Z","updated_at":"2024-11-10T23:11:48.000Z","dependencies_parsed_at":"2022-09-20T23:52:00.068Z","dependency_job_id":null,"html_url":"https://github.com/xlsdg/vue-echarts-v3","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlsdg%2Fvue-echarts-v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlsdg%2Fvue-echarts-v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlsdg%2Fvue-echarts-v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xlsdg%2Fvue-echarts-v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xlsdg","download_url":"https://codeload.github.com/xlsdg/vue-echarts-v3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","echarts","library","visualization","vue","vue-component","vue-echarts","vuejs"],"created_at":"2024-08-01T07:01:05.016Z","updated_at":"2025-05-15T20:05:13.376Z","avatar_url":"https://github.com/xlsdg.png","language":"JavaScript","funding_links":[],"categories":["Frameworks","UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Vue Component","Libraries \u0026 Plugins","图表","UI Components","Charts"],"readme":"# vue-echarts-v3 [![npm](https://img.shields.io/npm/v/vue-echarts-v3.svg)](https://www.npmjs.com/package/vue-echarts-v3) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) [![echarts3](https://img.shields.io/badge/echarts-3.x-brightgreen.svg)](http://echarts.baidu.com/)\n\n\u003e [Vue.js](https://vuejs.org/) `v2.x+` component wrap for [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts) `v3.x+`\n\n\n## Feature\n\n1. Lightweight, efficient, on-demand binding events;\n2. Support for importing ECharts.js charts and components on demand;\n3. Support component resize event auto update view;\n\n\n## Installation\n\n```bash\n$ npm install --save echarts vue-echarts-v3\n```\n\n\n## Usage\n\n0. Change webpack config\n\n    For webpack 1.x:\n\n    ```diff\n          {\n            test: /\\.js$/,\n            loader: 'babel',\n            include: [\n    -          path.join(prjRoot, 'src')\n    +          path.join(prjRoot, 'src'),\n    +          path.join(prjRoot, 'node_modules/vue-echarts-v3/src')\n            ],\n    -        exclude: /node_modules/\n    +        exclude: /node_modules(?![\\\\/]vue-echarts-v3[\\\\/]src[\\\\/])/\n          },\n    ```\n\n    For webpack 2.x+:\n\n    ```diff\n          {\n            test: /\\.js$/,\n            loader: 'babel-loader',\n    -       include: [resolve('src'), resolve('test')]\n    +       include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]\n          }\n    ```\n\n1. Import all charts and components\n\n    ```javascript\n    import IEcharts from 'vue-echarts-v3/src/full.js';\n    ```\n\n2. Import ECharts.js modules manually to reduce bundle size\n\n    ```javascript\n    import IEcharts from 'vue-echarts-v3/src/lite.js';\n\n    // import 'echarts/lib/chart/line';\n    import 'echarts/lib/chart/bar';\n    // import 'echarts/lib/chart/pie';\n    // import 'echarts/lib/chart/scatter';\n    // import 'echarts/lib/chart/radar';\n\n    // import 'echarts/lib/chart/map';\n    // import 'echarts/lib/chart/treemap';\n    // import 'echarts/lib/chart/graph';\n    // import 'echarts/lib/chart/gauge';\n    // import 'echarts/lib/chart/funnel';\n    // import 'echarts/lib/chart/parallel';\n    // import 'echarts/lib/chart/sankey';\n    // import 'echarts/lib/chart/boxplot';\n    // import 'echarts/lib/chart/candlestick';\n    // import 'echarts/lib/chart/effectScatter';\n    // import 'echarts/lib/chart/lines';\n    // import 'echarts/lib/chart/heatmap';\n\n    // import 'echarts/lib/component/graphic';\n    // import 'echarts/lib/component/grid';\n    // import 'echarts/lib/component/legend';\n    // import 'echarts/lib/component/tooltip';\n    // import 'echarts/lib/component/polar';\n    // import 'echarts/lib/component/geo';\n    // import 'echarts/lib/component/parallel';\n    // import 'echarts/lib/component/singleAxis';\n    // import 'echarts/lib/component/brush';\n\n    import 'echarts/lib/component/title';\n\n    // import 'echarts/lib/component/dataZoom';\n    // import 'echarts/lib/component/visualMap';\n\n    // import 'echarts/lib/component/markPoint';\n    // import 'echarts/lib/component/markLine';\n    // import 'echarts/lib/component/markArea';\n\n    // import 'echarts/lib/component/timeline';\n    // import 'echarts/lib/component/toolbox';\n\n    // import 'zrender/lib/vml/vml';\n    ```\n\n## Using the component\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"echarts\"\u003e\n    \u003cIEcharts\n      :option=\"bar\"\n      :loading=\"loading\"\n      @ready=\"onReady\"\n      @click=\"onClick\"\n    /\u003e\n    \u003cbutton @click=\"doRandom\"\u003eRandom\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript type=\"text/babel\"\u003e\n  import IEcharts from 'vue-echarts-v3/src/full.js';\n  export default {\n    name: 'view',\n    components: {\n      IEcharts\n    },\n    props: {\n    },\n    data: () =\u003e ({\n      loading: true,\n      bar: {\n        title: {\n          text: 'ECharts Hello World'\n        },\n        tooltip: {},\n        xAxis: {\n          data: ['Shirt', 'Sweater', 'Chiffon Shirt', 'Pants', 'High Heels', 'Socks']\n        },\n        yAxis: {},\n        series: [{\n          name: 'Sales',\n          type: 'bar',\n          data: [5, 20, 36, 10, 10, 20]\n        }]\n      }\n    }),\n    methods: {\n      doRandom() {\n        const that = this;\n        let data = [];\n        for (let i = 0, min = 5, max = 99; i \u003c 6; i++) {\n          data.push(Math.floor(Math.random() * (max + 1 - min) + min));\n        }\n        that.loading = !that.loading;\n        that.bar.series[0].data = data;\n      },\n      onReady(instance, ECharts) {\n        console.log(instance, ECharts);\n      },\n      onClick(event, instance, ECharts) {\n        console.log(arguments);\n      }\n    }\n  };\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n  .echarts {\n    width: 400px;\n    height: 400px;\n  }\n\u003c/style\u003e\n```\n\n## Properties\n\n* `styles`\n\n  Optional; CSS style is `{ width: 100%; height: 100%; }` by default.\n\n* `initOpts` \u0026 `theme`\n\n  Optional; Used to initialize ECharts instance.\n\n* `option` **[reactive]**\n\n  Used to update data for ECharts instance. Modifying this property will trigger ECharts' `setOptions` method.\n\n* `group` **[reactive]**\n\n  Optional; This property is automatically bound to the same property of the ECharts instance.\n\n* `notMerge`\n\n  Optional; `false` by default. [Detail](http://echarts.baidu.com/api.html#echartsInstance.setOption)\n\n* `lazyUpdate`\n\n  Optional; `false` by default. [Detail](http://echarts.baidu.com/api.html#echartsInstance.setOption)\n\n* `loading` **[reactive]**\n\n  Optional; `false` by default. Modifying this property will trigger ECharts' `showLoading` or `hideLoading` method.\n\n* `loadingOpts`\n\n  Optional; [Detail](https://ecomfe.github.io/echarts-doc/public/en/api.html#echartsInstance.showLoading)\n\n* `resizable`\n\n  Optional; `false` by default.\n\nSee more [ECharts' Option](http://echarts.baidu.com/option.html)\n\n## Instance Methods\n\n* `resize`\n* `update`\n* `mergeOption`\n* `dispatchAction`\n* `convertToPixel`\n* `convertFromPixel`\n* `containPixel`\n* `showLoading`\n* `hideLoading`\n* `getDataURL`\n* `getConnectedDataURL`\n* `clear`\n\n\n## Static Methods\n\n* `connect`\n* `disConnect`\n* `dispose`\n* `getInstanceByDom`\n* `registerMap`\n* `getMap`\n* `registerTheme`\n\nLearn more [ECharts' API](http://echarts.baidu.com/api.html)\n\n\n## Demo\n\n[vue-echarts-v3-demo](https://github.com/xlsdg/vue-echarts-v3-demo)\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxlsdg%2Fvue-echarts-v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxlsdg%2Fvue-echarts-v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxlsdg%2Fvue-echarts-v3/lists"}