Vue中echarts的简单实用方法

首先安装echarts  npm install echarts --save     以下参数直接去echarts官网查询就可以了，很简单，但是找某个参数的过程很艰辛。

// 引入基本模板

let echarts = require('echarts/lib/echarts')

// 引入柱状图组件(用什么形状的图就引哪个)

require('echarts/lib/chart/line');

// 引入提示框和title组件

require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

export default {

mounted() {

    this.drawLine();//画出折线图

},

methods:{

    drawLine() {

        let myChart = echarts.init(document.getElementById('myChart'));

        let option = null;

        myChart.setOption({

            title: {

                text: '订单完成数统计',

            },

            tooltip: {

                trigger: 'axis'

            },

            legend: {

                data: ['成交']

            },

            toolbox: {

                show: true,

            feature: {

                magicType: {

                    show: true,

                    type: ['stack', 'tiled']

            },

            saveAsImage: {

                show: true

            }

    }

},

xAxis: {

        type: 'category',

        boundaryGap: false,

        axisLabel:{

        interval:0

    },

    data: ['10-24', '10-27', '10-30', '11-02', '11-05', '11-08', '11-11', '11-14', '11-17', '11-20']

},

yAxis: {

    type: 'value',

},

series: [

{

    name: '成交',

    type: 'line',

    smooth: true,

    lineStyle:{

    normal:{

    color:'#1588BB'

}

},

itemStyle:{

    normal:{

        color:'deepskyblue'

    }

},

data: [10, 20, 30, 60, 88, 100,24, 54, 46, 18]

},

]

})

if(option && typeof option === "object") {

    myChart.setOption(option, true);

}

}

}

}