Vue using vue-echarts Charts

The difference between Vue-echarts and echarts:

• Vue-echarts is a packaged Vue plugin that is based on echarts v4.0.1 + development, relies on vue.js v2.2.6 +, and functions just as encapsulating it as a Vue plugin, which makes it easier to use it in Vue's way.
• Echarts is the normal JS library,

Vue-echarts Features:

• Lightweight, efficient, on-demand binding events
• Support on-demand import of echarts.js charts?? and Components
• Support for component sizing events to automatically update views

Git address: https://github.com/ecomfe/vue-echarts

Install NPM (recommended method)

$ NPM Install Vue-echarts

Bower

$ Bower Install Vue-echarts

Manual Installation

Download directly dist/vue-echarts.js and introduce it in the HTML file:

<script src="path/to/vue-echarts/dist/vue-echarts.js"></script>

Method of use with NPM and Vue-loader based ES Module introduction (Recommended usage)

 from ' Vue '  from'vue-echarts/components/echarts.vue'

 //  manually introduce echarts modules to reduce the package volume  import Span style= "color: #800000;" > '   

// you can use it after registering the component Vue.component ('v-chart', Echarts)

Open the Webpack.base.conf.js file in the build folder with a project built with VUE-CLI

1, Webpack 1.x modified as follows

/\.js$/'Babel'src'  node_modules/vue-echarts-v3/src'/node_modules (?! [\\/]vue-echarts-v3[\\/]src[\\/])/},

2, Webpack 2.x modified as follows

/\.js$/'babel-loader', include: [Resolve ('src  '), resolve ('test'), resolve ('node_modules/vue-echarts-v3/ src')]}

Calling components

<style>. echarts {width: -%; Height: -%; }</style><template> <v-chart theme="Ovilia-green": options="Polar"/></template><script>Import Echarts from 'Vue-echarts/components/echarts'Import Theme from '.. /theme.json'Echarts.registertheme ('Ovilia-green', theme); Introducing the theme Exportdefault{components: {'V-chart': Echarts}, Data () {return{polar: {title: {text:'member Data Statistics', Subtext:'Dynamic Data', x:'Center'}, tooltip: {trigger:'Item', Formatter:"{A} <br/>{b}: {C} ({d}%)"}, Legend: {show:true, Orient:'Vertical', left:' Left', data: ['Access','Public Number Visit','Sweep code into','Share Access','Search Access']}, series: [{name:'Access Source', type:'Pie', Radius:'55%', center: ['50%','60%'], data:[{value:335, Name:'Access'}, {value:310, Name:'Public Number Visit'}, {value:234, Name:'Sweep code into'}, {value:135, Name:'Share Access'}, {value:1548, Name:'Search Access'}], ItemStyle: {emphasis: {shadowblur: Ten, Shadowoffsetx:0, Shadowcolor:'rgba (0, 0, 0, 0.5)'                    }                }            }         ]       }    }  }}</script>

Custom Themes

Just introduce the definition theme style Theme.json file by the following method

 from ' .. /theme.json'echarts.registertheme ('ovilia-green' )

Icon:

Please refer to Echarts's API documentation for more details.

Vue using vue-echarts Charts