VUE中使用echarts

安装

npm install echarts -S

引入

// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入柱拆线组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

使用

<Row :gutter="20" style="margin-top: 10px;">
            <i-col :span="12">
              <div id="userSummaryChart" :style="{height: '500px'}"></div>
            </i-col>
            <i-col :span="12">
              <div id="userCumulateChart" :style="{height: '500px'}"></div>
            </i-col>
            <i-col :span="12">
              <div id="interfaceSummaryChart" :style="{height: '500px'}"></div>
            </i-col>
            <i-col :span="12">
              <div id="interfaceSummaryChart2" :style="{height: '500px'}"></div>
            </i-col>
        </Row>

export default {
    data (){
        return {
            rq:"",
            xAxisData: [],
            seriesData1: [],
            seriesData2: [],
            seriesData3: [],
            seriesData4: [],
            seriesData5: [],
            seriesData6: [],
            seriesData7: []
        }
    },
    created(){
        let rqf = getTime(7);//上周的开始时间
        let rqt = getTime(1);//上周的结束时间
        this.rq = [rqf, rqt];
        this.getInit();
    },
    methods:{
        ...mapActions([
            'ajax_get'
        ]),
        rqchange(val){
            let startDate = formatDate(this.rq[0])
            let endDate = formatDate(this.rq[1])
            if (getDaysBetween(this.rq[0] ,this.rq[1]) < 6) {
                this.$Message.error('时间间隔7天以内，请重新选择');
                return false
            }else{
                this.xAxisData = [];
                this.seriesData1 = [];
                this.seriesData2 = [];
                this.seriesData3 = [];
                this.seriesData4 = [];
                this.seriesData5 = [];
                this.seriesData6 = [];
                this.seriesData7 = [];
                this.getInit()
            }
        },
        getInit(){
            let days = getDaysBetween(this.rq[0] ,this.rq[1]);
            this.xAxisData = getdiffdate(this.rq[0] ,this.rq[1]);
            for(let i = 0; i<= days; i++){
                this.seriesData1.push(0)
                this.seriesData2.push(0)
                this.seriesData3.push(0)
                this.seriesData4.push(0)
                this.seriesData5.push(0)
                this.seriesData6.push(0)
                this.seriesData7.push(0)
            }
            this.interfacesummary();
            this.usercumulate();
            this.usersummary();

        },
        interfacesummary(){ //获取接口分析数据
            this.ajax_get({url:this.$local+"crm/wxsummary/interfacesummary",params:{
                startDate: formatDate(this.rq[0]), endDate: formatDate(this.rq[1])
            }}).then(res => {
                if(res.code == 0){
                    let list = res.data;
                    list.forEach(item => {
                        let index = this.getIndexOfArray(item.refDate,this.xAxisData);
                        this.seriesData1.splice(index,1,item.callbackCount);
                        this.seriesData2.splice(index,1,item.maxTimeCost);
                        this.seriesData3.splice(index,1,item.totalTimeCost);
                        this.seriesData4.splice(index,1,item.failCount);
                    });

                    // 基于准备好的dom，初始化echarts实例
                    let interfaceSummaryChart = echarts.init(document.getElementById('interfaceSummaryChart'));
                    // 绘制图表
                    interfaceSummaryChart.setOption({
                        title: { text: '接口分析数据' },
                        color: ['#67C23A', '#e5323e'],
                        legend: {
                            data: ['被动回复用户消息的次数','失败次数']
                        },
                        tooltip: {},
                        xAxis: {
                            data: this.xAxisData
                        },
                        yAxis: {},
                        series: [{
                            name: '被动回复用户消息的次数',
                            type: 'bar',
                            label: {
                                normal: {
                                show: true
                                }
                            },
                            barGap: 0,
                            data: this.seriesData1
                        },
                        {
                            name: '失败次数',
                            type: 'bar',
                            label: {
                                normal: {
                                show: true
                                }
                            },
                            data: this.seriesData4
                        }]
                    });
                    // 基于准备好的dom，初始化echarts实例
                    let interfaceSummaryChart2 = echarts.init(document.getElementById('interfaceSummaryChart2'))
                    // 绘制图表
                    interfaceSummaryChart2.setOption({
                        title: { text: '接口分析数据' },
                        color: ['#E6A23C', '#409EFF'],
                        legend: {
                            data: ['最大耗时','总耗时']
                        },
                        tooltip: {},
                        xAxis: {
                            data: this.xAxisData
                        },
                        yAxis: {},
                        series: [
                        {
                            name: '最大耗时',
                            type: 'bar',
                            label: {
                            normal: {
                                show: true
                            }
                            },
                            data: this.seriesData2
                        },
                        {
                            name: '总耗时',
                            type: 'bar',
                            label: {
                            normal: {
                                show: true
                            }
                            },
                            data: this.seriesData3
                        }]
                    })
                }else{
                    this.$Message.error(res.msg);
                }
            });
        },
        usercumulate(){ //获取累计用户数据
            this.ajax_get({url:this.$local+"crm/wxsummary/usercumulate",params:{
                startDate: formatDate(this.rq[0]), endDate: formatDate(this.rq[1])
            }}).then(res => {
                if(res.code == 0){
                     let list = res.data;
                     list.forEach((item,index) => {
                        this.seriesData7.splice(index,1,item.cumulateUser);
                     });
                               // 基于准备好的dom，初始化echarts实例
                    let userCumulateChart = echarts.init(document.getElementById('userCumulateChart'))
                    // 绘制图表
                    userCumulateChart.setOption({
                        title: { text: '累计用户数据' },
                        legend: {
                            data: ['累计用户量']
                        },
                        xAxis: {
                        type: 'category',
                            data: this.xAxisData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name:'累计用户量',
                            data: this.seriesData7,
                            type: 'line',
                            smooth: true,
                            label: {
                                normal: {
                                show: true
                                }
                            }
                        }]
                    })
                }else{
                    this.$Message.error(res.msg);
                }
            })
        },
        usersummary(){ //获取用户增减数据
            this.ajax_get({url:this.$local+"crm/wxsummary/usersummary",params:{
                startDate: formatDate(this.rq[0]), endDate: formatDate(this.rq[1])
            }}).then(res => {
                if(res.code == 0){
                     let list = res.data;
                     list.forEach((item,index) => {
                        this.seriesData5.splice(index,1,item.newUser);
                        this.seriesData6.splice(index,1,item.cancelUser);
                     });
                    // 基于准备好的dom，初始化echarts实例
                    let userSummaryChart = echarts.init(document.getElementById('userSummaryChart'))
                    // 绘制图表
                    userSummaryChart.setOption({
                        title: { text: '用户增减数据' },
                        color: ['#67C23A', '#e5323e'],
                        legend: {
                            data: ['新增用户','取消关注的用户']
                        },
                        tooltip: {},
                        xAxis: {
                            data: this.xAxisData
                        },
                        yAxis: {},
                        series: [{
                            name: '新增用户',
                            type: 'bar',
                            label: {
                                normal: {
                                show: true
                                }
                            },
                            barGap: 0,
                            data: this.seriesData5
                        },
                        {
                            name: '取消关注的用户',
                            type: 'bar',
                            label: {
                            normal: {
                                show: true
                            }
                            },
                            data: this.seriesData6
                        }]
                    })
                }else{
                    this.$Message.error(res.msg);
                }
            })
        },
        getIndexOfArray(str,arr){
            var i = arr.length;
            while (i--) {
                if (arr[i] === str) {
                    return i;
                }
            }
            return -1;
        }
    }
}