merge 2.0

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015"],
+  "plugins": ["transform-runtime", "add-module-exports"]
+}

.gitignore

@@ -1,2 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
 node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Others
 .DS_Store

.npmignore

@@ -1,5 +1,8 @@
 node_modules
+build
 demo
+src
+.babelrc
 .gitignore
 bower.json
-webpack.conf.js
+webpack.config.js

CHANGELOG.md

@@ -1,3 +1,8 @@
+2.0.0
+* Update Vue dependency to `2.0.1`.
+* Add support for new methods & events for ECharts.
+* Fix missing arguments for some APIs.
+
 0.1.2
 * Update ECharts version.
 * Remove unnecessary files from NPM package.

README.md

@@ -2,8 +2,7 @@
 
 > ECharts component for Vue.js.
 
-Built upon ECharts 3.x & Vue.js 1.x.
+Built upon [ECharts](http://echarts.baidu.com/index.html) `v3.3.2`+ and depends on [Vue.js](https://vuejs.org/) `v2.0.1`+.
-*Vue-ECharts may not directly work in Vue.js 2.0.*
 
 ## Installation
 
@@ -27,35 +26,54 @@ $ npm install vue-echarts
 $ bower install vue-echarts
 ```
 
-## Registering the component
+### manual
 
-### CommonJS
+Just download `dist/vue-echarts.js` and include it in your HTML file:
+
+```html
+<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>
+```
+
+## Usage
+
+### ES Modules with NPM & vue-loader (Recommended)
 
 ```js
-var Vue = require('path/to/vue')
+import Vue from 'vue'
+import ECharts from 'vue-echarts/components/ECharts.vue'
+```
+
+**Heads up**
+
+if you are using `vue-cli` to create your project, the `webpack` template may exclude `node_modules` from files to be transpiled by Babel. Change the `exclude` value from `/node_modules/` to `/node_modules(?![\\/]vue-awesome[\\/])/` to fix the problem.
+
+### CommonJS with NPM without ES Next support
+
+```js
+var Vue = require('vue')
 
 // requiring the UMD module
-var ECharts = require('path/to/vue-echarts/dist/vue-echarts')
+var ECharts = require('vue-echarts')
 
 // or with vue-loader you can require the src directly
-var ECharts = require('path/to/vue-echarts/src/components/ECharts.vue')
+var ECharts = require('vue-echarts/components/ECharts.vue')
 
 // register component to use
-Vue.component('chart', ECharts)
 ```
 
+
 ### AMD
 
 ```js
 require.config({
   paths: {
     'vue': 'path/to/vue',
-    'vue-echarts': 'path/to/vue-conticon/dist/vue-echarts'
+    'vue-echarts': 'path/to/vue-ehcarts'
   }
 })
 
 require(['vue', 'vue-echarts'], function (Vue, ECharts) {
-  // register component to use
+  // register component to use...
   Vue.component('chart', ECharts)
 })
 ```
@@ -158,7 +176,11 @@ export default {
 * `dispatchAction`
 * `showLoading`
 * `hideLoading`
+* `convertToPixel`
+* `convertFromPixel`
+* `containPixel`
 * `getDataURL`
+* `getConnectedDataURL`
 * `clear`
 * `dispose`
 

demo/Demo.vue

@@ -2,7 +2,7 @@
   <main>
     <h1><a href="https://github.com/Justineo/vue-echarts">Vue-ECharts</a></h1>
     <chart :options="polar" theme="vue-echarts"></chart>
-  <chart :options="bar" v-ref:bar theme="dark"></chart>
+    <chart :options="bar" ref="bar" theme="dark"></chart>
   </main>
 </template>
 
@@ -35,11 +35,6 @@ body .echarts {
 
 <script>
 import ECharts from '../src/components/ECharts.vue'
-import 'echarts/theme/dark'
-import theme from './theme'
-
-// registering custom theme
-ECharts.registerTheme('vue-echarts', theme)
 
 let asyncData = {
   categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
@@ -112,9 +107,7 @@ export default {
       }
     }
   },
-  methods: {
+  mounted: function () {
-  },
-  ready: function () {
     // simulating async data from server
     setTimeout(() => {
       this.$refs.bar.mergeOptions({
@@ -127,8 +120,6 @@ export default {
         }]
       })
     }, 3000)
-  },
-  destroy: function () {
   }
 
 }

demo/index.html

@@ -7,7 +7,7 @@
 <link href="//fonts.googleapis.com/css?family=Dosis:300,500&amp;text=Vue-ECharts" rel="stylesheet">
 </head>
 <body>
-<demo></demo>
+<div id="demo"></div>
 <script src="bundle.js"></script>
 </body>
 </html>

demo/index.js

@@ -1,18 +1,22 @@
 import Vue from 'vue'
 import ECharts from '../src/components/ECharts.vue'
 import Demo from './Demo.vue'
+
+// built-in theme
 import 'echarts/theme/dark'
-import theme from './theme'
+
+// custom theme
+import {default as theme} from './theme'
 
 Vue.component('chart', ECharts)
 
 // registering custom theme
-console.log(ECharts);
 ECharts.registerTheme('vue-echarts', theme)
 
 new Vue({
-  el: 'body',
+  el: '#demo',
   components: {
     demo: Demo
-  }
+  },
+  render: h => h(Demo)
 })

package.json

@@ -1,11 +1,13 @@
 {
   "name": "vue-echarts",
-  "version": "0.1.2",
+  "version": "2.0.0",
   "description": "ECharts component for Vue.js.",
   "main": "dist/vue-echarts.js",
   "scripts": {
-    "dev": "webpack-dev-server --inline --hot",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
-    "build": "webpack -p"
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "prepublish": "npm run build && cp -r ./src/* . && rm index.js",
+    "publish": "rm -rf ./components"
   },
   "keywords": [
     "ECharts",
@@ -13,21 +15,25 @@
   ],
   "author": "Justineo (justice360@gmail.com)",
   "license": "MIT",
-  "devDependencies": {
-    "babel-core": "^6.7.2",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-runtime": "^6.6.0",
-    "babel-preset-es2015": "^6.6.0",
-    "css-loader": "^0.23.1",
-    "vue-hot-reload-api": "^1.3.2",
-    "vue-html-loader": "^1.2.0",
-    "vue-loader": "^8.2.1",
-    "vue-style-loader": "^1.0.0",
-    "webpack": "^1.12.14",
-    "webpack-dev-server": "^1.14.1"
-  },
   "dependencies": {
-    "echarts": "^3.3.1",
+    "echarts": "^3.3.2",
-    "vue": "^1.0.17"
+    "vue": "^2.0.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "cross-env": "^3.1.1",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "font-awesome": "^4.7.0",
+    "font-awesome-svg": "^0.4.0",
+    "vue-loader": "^10.0.2",
+    "vue-template-compiler": "^2.1.4",
+    "webpack": "2.1.0-beta.22",
+    "webpack-dev-server": "2.1.0-beta.10",
+    "webpack-merge": "^0.14.1"
   }
 }

src/components/ECharts.vue

@@ -24,12 +24,18 @@ const ACTION_EVENTS = [
   'restore',
   'dataviewchanged',
   'magictypechanged',
+  'geoselectchanged',
+  'geoselected',
+  'geounselected',
   'pieselectchanged',
   'pieselected',
   'pieunselected',
   'mapselectchanged',
   'mapselected',
-  'mapunselected'
+  'mapunselected',
+  'axisareaselected',
+  'brush',
+  'brushselected'
 ]
 
 const MOUSE_EVENTS = [
@@ -44,7 +50,7 @@ const MOUSE_EVENTS = [
 
 export default {
   props: ['options', 'theme', 'initOptions', 'group'],
-  data: function () {
+  data() {
     return {
       chart: null
     }
@@ -55,19 +61,19 @@ export default {
     // don't depend on reactive values
     width: {
       cache: false,
-      getter: function () {
+      getter() {
         return this.chart.getWidth()
       }
     },
     height: {
       cache: false,
-      getter: function () {
+      getter() {
         return this.chart.getHeight()
       }
     },
     isDisposed: {
       cache: false,
-      getter: function () {
+      getter() {
         return this.chart.isDisposed()
       }
     }
@@ -78,29 +84,41 @@ export default {
       this.chart.setOption(options)
     },
     // just delegates ECharts methods to Vue component
-    resize: function () {
+    resize(options) {
-      this.chart.resize()
+      this.chart.resize(options)
     },
     dispatchAction: function (payload) {
       this.chart.dispatchAction(payload)
     },
-    showLoading: function () {
+    convertToPixel(...args) {
-      this.chart.showLoading()
+      return this.chart.convertToPixel(...args)
     },
-    hideLoading: function () {
+    convertFromPixel(...args) {
+      return this.chart.convertFromPixel(...args)
+    },
+    containPixel(...args) {
+      return this.chart.containPixel(...args)
+    },
+    showLoading(...args) {
+      this.chart.showLoading(...args)
+    },
+    hideLoading() {
       this.chart.hideLoading()
     },
-    getDataURL: function () {
+    getDataURL(options) {
-      return this.chart.getDataURL()
+      return this.chart.getDataURL(options)
     },
-    clear: function () {
+    getConnectedDataURL(options) {
+      return this.chart.getConnectedDataURL(options)
+    },
+    clear() {
       this.chart.clear()
     },
-    dispose: function () {
+    dispose() {
       this.chart.dispose()
     }
   },
-  ready: function () {
+  mounted() {
     let chart = echarts.init(this.$el, this.theme, this.initOptions)
 
     // use assign statements to tigger "options" and "group" setters
@@ -117,14 +135,14 @@ export default {
     // expose ECharts events as custom events
     ACTION_EVENTS.forEach(event => {
       chart.on(event, params => {
-        this.$dispatch(event, params)
+        this.$emit(event, params)
       })
     })
     // mouse events of ECharts should be renamed to prevent
     // name collision with DOM events
     MOUSE_EVENTS.forEach(event => {
       chart.on(event, params => {
-        this.$dispatch('chart' + event, params)
+        this.$emit('chart' + event, params)
       })
     })
 
@@ -139,11 +157,11 @@ export default {
   disconnect: function (group) {
     echarts.connect(group)
   },
-  registerMap: function (name, geoData, area) {
+  registerMap: function (...args) {
-    echarts.registerMap(name, geoData, area)
+    echarts.registerMap(...args)
   },
-  registerTheme: function (name, theme) {
+  registerTheme: function (...args) {
-    echarts.registerTheme(name, theme)
+    echarts.registerTheme(...args)
   }
 }
 </script>

src/index.js

@@ -0,0 +1 @@
+export {default} from './components/ECharts.vue'

webpack.config.js

@@ -1,8 +1,10 @@
-var demo = {
+var path = require('path')
-  entry: './demo/demo.js',
+var webpack = require('webpack')
-  output: {
+var merge = require('webpack-merge')
-    path: __dirname,
+
-    filename: 'demo/bundle.js'
+var base = {
+  resolveLoader: {
+    root: path.join(__dirname, 'node_modules'),
   },
   module: {
     loaders: [
@@ -12,44 +14,59 @@ var demo = {
       },
       {
         test: /\.js$/,
-        exclude: /(node_modules|bower_components)/,
+        loader: 'babel',
-        loader: 'babel?presets[]=es2015'
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file',
+        query: {
+          name: '[name].[ext]?[hash]'
+        }
       }
     ]
   },
-  vue: {
+  devServer: {
-    autoprefixer: {
+    historyApiFallback: true,
-      browsers: ['last 2 versions']
+    noInfo: true
-    }
   }
 }
 
-var build = {
+if (process.env.NODE_ENV === 'production') {
-  entry: './src/components/ECharts.vue',
+  base.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  base.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  ])
+}
+
+var demo = merge(base, {
+  entry: './demo/index.js',
   output: {
-    path: __dirname,
+    path: path.resolve(__dirname, './demo'),
-    filename: 'dist/vue-echarts.js',
+    publicPath: '/',
+    filename: 'bundle.js'
+  }
+})
+
+var build = merge(base, {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/',
+    filename: 'vue-echarts.js',
     library: 'VueECharts',
     libraryTarget: 'umd'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue'
-      },
-      {
-        test: /\.js$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: 'babel?presets[]=es2015'
-      }
-    ]
-  },
-  vue: {
-    autoprefixer: {
-      browsers: ['last 2 versions']
-    }
-  }
   }
+})
 
 module.exports = [demo, build]