update readme & minor code update

README.md

@@ -171,7 +171,7 @@ See more examples [here](https://github.com/Justineo/vue-echarts/tree/master/dem
 
 * `options` **[reactive]**
 
-  Used to update data for ECharts instance. Modifying this property will trigger ECharts' `setOptions` method.
+  Used to update data for ECharts instance. Modifying this property will trigger ECharts' `setOption` method.
 
 * `group` **[reactive]**
 
@@ -183,9 +183,9 @@ See more examples [here](https://github.com/Justineo/vue-echarts/tree/master/dem
 
 ### Instance Methods
 
-* `mergeOptions` (`setOptions` in ECharts)
+* `mergeOptions` (`setOption` in ECharts)
 
-  *Providing a better method name to describe the actual behavior of `setOptions.`*
+  *Providing a better method name to describe the actual behavior of `setOption.`*
 
 * `resize`
 * `dispatchAction`
@@ -206,7 +206,44 @@ See more examples [here](https://github.com/Justineo/vue-echarts/tree/master/dem
 * `registerMap`
 * `registerTheme`
 
-You can refer to [ECharts' API](http://echarts.baidu.com/api.html) to learn how to use the methods above.
+### Events
+
+Vue-ECharts support the following events:
+
+* `legendselectchanged`
+* `legendselected`
+* `legendunselected`
+* `datazoom`
+* `datarangeselected`
+* `timelinechanged`
+* `timelineplaychanged`
+* `restore`
+* `dataviewchanged`
+* `magictypechanged`
+* `geoselectchanged`
+* `geoselected`
+* `geounselected`
+* `pieselectchanged`
+* `pieselected`
+* `pieunselected`
+* `mapselectchanged`
+* `mapselected`
+* `mapunselected`
+* `axisareaselected`
+* `brush`
+* `brushselected`
+* Mouse events
+  * `chartclick`
+  * `chartdblclick`
+  * `chartmouseover`
+  * `chartmouseout`
+  * `chartmousedown`
+  * `chartmouseup`
+  * `chartglobalout`
+
+  Notice that mouse event names are prefixed with `chart` to prevent collision with Vue's native mouse events.
+
+For further details, see [ECharts' API documentation](https://ecomfe.github.io/echarts-doc/public/en/api.html).
 
 ## Local development
 

demo/Demo.vue

@@ -84,7 +84,7 @@ h2 small {
 }
 
 p small {
-  font-size: 0.8em;
+  font-size: .8em;
   color: #7f8c8d;
 }
 
@@ -94,9 +94,9 @@ p {
 
 pre {
   display: inline-block;
-  padding: 0.8em;
+  padding: .8em;
   background-color: #f9f9f9;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.125);
+  box-shadow: 0 1px 2px rgba(0,0,0,.125);
   line-height: 1.1;
   color: #2973b7;
 }
@@ -106,7 +106,7 @@ pre, code {
 }
 
 pre code {
-  font-size: 0.8em;
+  font-size: .8em;
 }
 
 .attr {
@@ -119,7 +119,7 @@ pre code {
 
 footer {
   margin: 5em 0 3em;
-  font-size: 0.5em;
+  font-size: .5em;
   vertical-align: middle;
 }
 
@@ -147,6 +147,15 @@ button {
   transition: opacity .3s;
 }
 
+button:focus {
+  outline: none;
+  box-shadow: 0 0 1px #4fc08d;
+}
+
+button:active {
+  background: rgba(79, 192, 141, .2);
+}
+
 button[disabled] {
   opacity: .5;
   cursor: not-allowed;
@@ -248,11 +257,11 @@ export default {
       }
 
       // simulating async data from server
-      this.seconds = 3;
+      this.seconds = 3
       let timer = setInterval(() => {
-        this.seconds--;
+        this.seconds--
         if (this.seconds === 0) {
-          clearTimeout(timer);
+          clearTimeout(timer)
           this.$refs.bar.mergeOptions({
             xAxis: {
               data: asyncData.categories

demo/data/countBar.js

@@ -1,18 +0,0 @@
-export default {
-  title: {
-    text: '计数器'
-  },
-  tooltip: {},
-  legend: {
-    data:['数量']
-  },
-  xAxis: {
-    data: ['数量']
-  },
-  yAxis: {},
-  series: [{
-    name: '数量',
-    type: 'bar',
-    data: [0]
-  }]
-}