echarts线状图

<div id="mycharts" ref="chartBox">
    <span v-html="loading"></span>
</div>

//引入线状图
import 'echarts/lib/chart/line'

//echarts配置（挂载时导入图）
creatChartFun(){
    this.myChart = echarts.init(this.$refs.chartBox);
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer:{lineStyle:{color:'rgb(239, 243, 250)'},},
            backgroundColor:'#fff',
            textStyle:{color:'#999', fontSize:12,},
            extraCssText: 'box-shadow: 0 2px 10px #ccc;'
        },
        legend: {
            data:this.lineName.name,
            top:"30",
            selectedMode: 'single'
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '2%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.getDateList(30),
            interval:6,
            axisLine:{show:false, lineStyle: {color: 'rgb(153, 153, 153)'}},
            axisTick:{lineStyle:{color:'rgb(239, 243, 250)'}},
        },
        yAxis: {
            type: 'value',
            splitLine:{show: false},
            axisLine:{show:false , lineStyle:{color:'gray',}},
            axisTick:{show:false}
        },
        series:this.datas.lineData
    };
    this.myChart.setOption(option,true);
},

/**
 * 获取前一个月时间
 * @param range 获取多少天,默认30
 * @returns {Array} 过去一个月的天数
 */
getDateList(range){
    range = range ? range : 30;
    var list = [];
    for(let i = range-1; i >= 0; i--){
        var dd = new Date(new Date()-24*60*60*1000*i);
        var m = dd.getMonth()+1;//获取当前月份的日期
        var d = dd.getDate();
        if(m<10){
            m = '0'+m;
        }else{
            m = m.toString();
        }
        if(d < 10 ){
            d = '0'+d;
        }else{
            d = d.toString();
        }
        list.push(m+d);
    }
    return list;
},

datas:[
    {
        title:"扫码次数",   //名字
        total:"31925",     //总数
        yesterday:"2000",   //昨天的数据
        today:"5000",       //今天的数据
        type:0,             //数据类型 0 普通的  1 百分比  2 时间（秒）
    },{
        title:"访客",
        total:"5512",
        yesterday:"200",
        today:"200",
        type:0,
    },{
        title:"参与人数",
        total:"325",
        yesterday:"70",
        today:"100",
        type:0,
    },{
        title:"发放人数",
        total:"60",
        yesterday:"20",
        today:"14",
        type:0,
    },{
        title:"奖励金额",
        total:"22",
        yesterday:"5",
        today:"1",
        type:0,
    },{
        title:"奖励积分",
        total:"22",
        yesterday:"5",
        today:"1",
        type:0,
    }
],  //昨日今天比较数据
lineData: [
    {
        name:'扫码次数',
        type:'line',
        showSymbol:false,
        smooth: true,
        data:[120, 132, 101, 134, 90, 230,150, 232, 820, 932, 901, 934, 1290, 1330, 1320,201, 154, 190, 330, 410, 210,220, 182, 191, 234, 290, 330, 310,320, 332, 301, 334, 390, 330, 320]
    },
    {
        name:'访客',
        type:'line',
        showSymbol:false,
        smooth: true,
        data:[150, 232, 201, 154, 190, 330, 410,220, 182,820, 932, 901, 934, 1290, 1330, 1320, 191, 234, 290, 330, 310,320, 332, 301, 334, 390, 330, 320]
    },
    {
        name:'参与',
        type:'line',
        showSymbol:false,
        smooth: true,
        data:[150, 232,820, 932, 901, 934, 1290, 1330, 1320, 201,120, 132, 101, 134, 90, 230,150, 154, 190, 330, 410,320, 332, 301, 334, 390, 330, 320]
    },
    {
        name:'金额',
        type:'line',
        showSymbol:false,
        smooth: true,
        data:[320, 332, 301, 334, 390, 330, 150, 232,820, 932, 901, 934, 1290,320,120, 132, 101, 134, 90, 230,150,820, 932, 901, 934, 1290, 1330, 1320]
    },
],

computed:{
    //数据名称
    lineName(){
        let obj = {
            name:[],
            num:[]
        };
        for(let i in this.datas.lineData){
            obj.name.push(this.datas.lineData[i].name)
            let num = 0;
            for(let j = 0; j < this.datas.lineData[i].data.length; j++){
                num += this.datas.lineData[i].data[j]*1
            }
            obj.num.push(num)
        }
        return obj;
    }
},