Vue Echarts lite
Vue.js 2.0+ component for baidu echarts v3
Demo (updated with every release)
Quick start
Install the library
npm install --save vue-echarts-lite
Then simply include the correct file in a closing <script>
tag after vue.js and echarts
Declare a demo vue instance
el: '#demo' data: config: title: text: '对数轴示例' left: 'center' tooltip: trigger: 'item' formatter: '{a} <br/>{b} : {c}' legend: left: 'left' data: '3的指数' xAxis: type: 'category' name: 'x' splitLine: show: false data: '一' '二' '三' '四' '五' '六' '七' '八' '九' grid: left: '3%' right: '4%' bottom: '3%' containLabel: true yAxis: type: 'log' name: 'y' series: name: '3的指数' type: 'line' data: 1 3 9 27 81 247 741 2223 6669 ;
Add this markup into page using vue-echarts-lite as a global component
That's all! Now you can get up and running the demo.
Use vue echarts lite with webpack
You can obtain vue echarts lite directly in project via webpack to register a global component
var chart = // To install vue echarts liteVue
To use local registration
var chart = //To do component registration
Require charts and components on demand
//Config in webpack config --- Startresolve: alias: 'echarts$': 'echarts/lib/echarts'//Config in webpack config --- End //Require on demand in webpack entry --- Start//Require on demand in webpack entry --- End
Usage
You can find all possible properties for the component in the table below:
Attribute | Usage |
---|---|
config | Object , set the configuration of chart by using echarts optionsHere is some additional configuration: forceClear boolean , whether to remove chart before updatenotMerge boolean , whether not to merge with previouserrorMsg Object , configuration item while error, more detail |
theme | Object or string , set the theme of chart |
unwatch | Boolean , cancel watcher for config and theme , just takes effort during component mounted |
While unwatch set, you must update chart via component instance by yourself as below:
//To get the component instance via ref attributethis$refsinstancechart
Also here are all properties for the component instance you can use
Attribute | Usage |
---|---|
setOptions | Method , handle the configuration of chart |
setTheme | Method , handle the theme of chart |
chart | Object , echarts instance after echarts initialize |
Running the demo
Setup the repo:
git clone https://github.com/LeungZ9/vue-echarts-lite.git && cd vue-echarts-lite
npm i
Run the development server:
cd /path/to/vue-echarts-lite
npm run dev