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

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

Declare a demo vue instance

new Vue({
    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

<div id="demo">
    <lz-chart config="config" style="width:480px;height:480px"></lz-chart>
</div>

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 = require('vue-echarts-lite')

// To install vue echarts lite
Vue.use(chart)

To use local registration

var chart = require('vue-echarts-lite/src/vue-echarts-lite.vue')

//To do component registration

Require charts and components on demand

//Config in webpack config --- Start
resolve: {
    alias: 'echarts$': 'echarts/lib/echarts'
}
//Config in webpack config --- End

//Require on demand in webpack entry --- Start
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
//Require on demand in webpack entry --- End

Usage

<lz-chart :config :theme :unwatch></lz-chart>

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 options Here is some additional configuration: forceClear boolean, whether to remove chart before update notMerge boolean, whether not to merge with previous errorMsg 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:

<lz-chart unwatch :config="config" :theme="theme" ref="instance"></lz-chart>

//To get the component instance via ref attribute
this.$refs.instance.chart.setOption(this.config)

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 initialized with DOM, more detail

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