折线图

可滚动的折线图，包含是否仅显示折线，显示阴影，显示文字，显示个数，显示自定义圆点图片等，相关变量详见组件代码：

<template>
<!-- 柱状图 横向滚动柱状图 -->
    <div :id="histogramId" v-bind:style="{height:height,width:width}"></div>
</template>
<script type="text/ecmascript-6">
export default {
        props:{
            histogramId:{
                type:String,
                default:''
            },
            //组件的高度
            height: {
                type: String,
                default: '230px'
            },
            //组件的宽度
            width: {
                type: String,
                default: '100%'
            },
            barWidth:{
              type:Number,
              default:15
            },
            //grid的设置修改
            grid:{
                type:Object,
                default:()=>{
                    return{
                        bottom:40,
                        top:30,
                        left:40,
                        right:20
                    }
                }
            },
            //xAxis相关变量
            xAxis:{
                type:Object,
                default:()=>{
                    return{
                        max:5,
                        axisLineShow:true,
                        axisLineColor:'rgba(188, 198, 207, 0.4)',
                        axisLabelColor:'#B8C5D2',
                        axisLabelSize:12,
                        axisLabelRotate:0,
                        splitLineShow:false,
                        splitLineColor:'rgba(255,255,255,0.1)',
                        splitLineType:'',
                        axisLabelShow:true,
                    }
                }
            },
            yAxis:{
                type:Object,
                default:()=>{
                    return{
                        show:true,
                        axisLineShow:false,
                        axisLineColor:'rgba(188, 198, 207, 0.4)',
                        axisLabelColor:'rgba(255,255,255,0.6)',
                        axisLabelSize:12,
                        splitLineShow:true,
                        splitLineColor:'rgba(255,255,255,0.1)',
                        splitLineType:'dashed',
                        axisLabelShow:true,
                        axisLabelMargin:5
                    }
                }
            },
            colorsJian:{    //颜色渐变有背景色
                type:Array,
                default:()=>[
                    ["rgba(72, 208, 245, 1)", "rgba(72, 208, 245, 0.1)"],   //颜色都为0的话即为仅保留折线
                    ["rgba(255, 244, 69, 1)", "rgba(255, 244, 69, 0.1)"],
                    ["rgba(23, 218, 69, 1)", "rgba(23, 218, 69, 0.1)"],
                    ["rgba(249, 51, 88, 1)", "rgba(249, 51, 88, 0.1)"],
                    ["rgba(255, 152, 41, 1)", "rgba(255, 152, 41, 0.1) "],
                    ["rgba(248, 66, 255, 1)", "rgba(248, 66, 255, 0.1)"],
                ]
            },
            colors:{     //没有背景色只有一根线
                type:Array,
                default:()=>['#48D0F5','#FFF445','#17DA45','#F93358','#FF9829','#F842FF']
            },
            showNum:{   //开始展示几条数据
                type:Number,
                default:4
            },
            legend:{   //legend的相关字段
                type:Object,
                default:()=>{
                    return{
                        show:true,
                        type:'roundRect',   //circle圆形，rect矩形，roundRect圆角矩形，triangle三角形，diamond菱形，pin，arrow箭头，square正方形，pin雨滴
                        itemWidth:15,
                        itemHeight:10,
                        itemGap:15,
                        fontSize:12,
                        color:'#ffffff'
                    }
                }
            },
            isJian:{   //颜色是否时渐变模式
                type:Boolean,
                default:false
            },
            series:{   //相关series中的设置
                type:Object,
                default:()=>{
                    return{
                        smooth:false,  //是否圆滑
                        symbolSize:3,  //大小
                        lineWidth:1,
                        borderWidth:3,
                        symbol:'circle',  //圆点的大小
                        lableShow:true,  //文字是否显示
                        fontSize:12,  //文字大小
                        labelColor:'#ffffff',   //如果是空的话就展示线的颜色，否则就展示自定义的颜色
                    }
                }
            },
            dataObj:{   //所需要的数值组成的对象
                type:Object,
                default:()=>{
                    return{
                        name:['抓拍','进出','访客'],
                        xData:['10-11','10-12','10-13','10-14','10-15','10-16','10-17','10-18','10-19','10-20','10-21','10-22'],
                        data1:[1,2,3,1,1,1,1,1,2,3,4,5],
                        data2:[3,4,5,6,7,1,2,3,4,5,6,1],
                        data3:[6,7,8,9,0,1,2,3,4,5,6,7]
                    }
                }
            },
            isImg:{  //是否圆点图片自定义
                type:Boolean,
                default:false
            },
            imgCustom:{   //圆点图片自定义
                type:Array,
                default:()=>[
                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
                    'image://data:image/png;base64,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',
                    'image://data:image/png;base64,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',
                    'image://data:image/png;base64,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',
                ]
            },
        },
        data(){
            return{
                surveyInit:'',
                BgDataData:[],
                itemA:0,
            }
        },
        methods:{

            initMoreColorZhu(){
                let that=this;
                var name=this.dataObj.name;
                var xData=this.dataObj.xData;
                var squares = new Array();
                for(var v = 0; v < name.length; v++){
                  //依次创建数组
                    squares[v] = new Array();
                    squares[v] = that.dataObj['data'+(v+1)]
                }
                //循环创建相对应的折线的数目，是一条还是两条还是更多
                function createArr(squares){
                    let img = '';
                    var serArr = [],labelColor;
                    for(var  i = 0;i<squares.length;i++){
                        //如果是自定义图片那就展示自定义图片否则就展示圆点
                        if(that.isImg){
                            img = that.imgCustom[i]
                        }else{
                            img =  that.series.symbol
                        }
                        //如果是空的话就展示线的颜色，否则就展示自定义的颜色
                        if(that.series.labelColor == ''){
                            labelColor = that.colors[i]
                        }else{
                            labelColor = that.series.labelColor
                        }
                        let seriesItem = {
                            name:name[i],
                            type: 'line',
                            smooth: that.series.smooth,
                            symbol:img,
                            // symbol:that.imgCustom[i],
                            // symbol: that.series.symbol,
                            symbolSize:that.series.symbolSize,
                            lineStyle: {
                                normal: {
                                    width: that.series.lineWidth,
                                    color:that.colors[i],
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color:  that.colorsJian[i][0]
                                    }, {
                                        offset: 0.3,
                                        color: that.colorsJian[i][1]
                                    }], false),
                                }
                            },
                            label: {
                                show: that.series.lableShow,
                                position: 'top',
                                textStyle: {
                                    color: labelColor,
                                    fontSize:that.series.fontSize,
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: that.colors[i],//图例颜色
                                    borderColor:that.colors[i],
                                    borderWidth:that.series.borderWidth
                                }
                            },
                            data: squares[i]
                        }
                        serArr.push(seriesItem)
                    }
                    return serArr
                }
                that.surveyInit = that.$echarts.init(document.getElementById(this.histogramId));
                // 指定图表的配置项和数据
                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: 'rgba(0,0,0,0)'

                            }
                        },
                    },
                    grid:this.grid,
                    legend: {
                        show:that.legend.show,
                        icon: that.legend.type,
                        itemWidth: that.legend.itemWidth,
                        itemHeight: that.legend.itemHeight,
                        itemGap: that.legend.itemGap,
                        data: name,
                        // right: 'center',
                        textStyle: {
                            fontSize: that.legend.fontSize,
                            color: that.legend.color
                        }
                    },
                    // 滑动条
                    dataZoom:[{
                        type:'slider',
                        show:false,
                        realtime:true,
                        startValue:0,
                        endValue:that.showNum,
                    }],
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            show:this.xAxis.axisLineShow,
                            lineStyle: {
                                color: this.xAxis.axisLineColor,
                            },
                        },
                        axisTick: {
                            show:false,
                            interval: (index) => {
                                if (index === -1 || index === this.xAxis.max) {
                                    return false;
                                } else {
                                    return true;
                                }
                            }
                        },
                        axisLabel: {
                            color: this.xAxis.axisLabelColor,
                            fontSize: this.xAxis.axisLabelSize,
                            rotate:this.xAxis.axisLabelRotate,
                            show:this.xAxis.axisLabelShow
                        },
                        splitLine: {
                            show: this.xAxis.splitLineShow,
                            lineStyle: {
                                color: this.xAxis.splitLineColor,
                                type:this.xAxis.splitLineType
                            },
                        },
                        data: xData,
                    }],
                    yAxis: [{
                        type: 'value',
                        boundaryGap: true,
                        axisTick:{
                            show:that.yAxis.axisTickShow,

                        },
                        axisLine: {
                            show:that.yAxis.axisLineShow,
                            lineStyle: {
                                color: that.yAxis.axisLineColor
                            }
                        },
                        splitLine:{
                            show:that.yAxis.splitLineShow,
                            lineStyle: {
                                color: that.yAxis.splitLineColor,
                                type:that.yAxis.splitLineType
                            }
                        },
                        axisLabel: {
                            color: this.yAxis.axisLabelColor,
                            fontSize: this.yAxis.axisLabelSize,
                            show:this.yAxis.axisLabelShow,
                            margin: this.yAxis.axisLabelMargin,  //距离相对应的宽度
                        },
                    }],
                    series:createArr(squares)
                };
                that.surveyInit.setOption(option);
                //滚动
                var key = 0;
                setInterval(function() {
                    var aa = xData.shift();
                    xData.push(aa);
                    //数值重组
                    var squaresA = new Array();
                    var bb;
                    for(var v = 0; v < name.length; v++){
                    //依次创建数组
                        squaresA[v] = new Array();
                        squaresA[v] = that.dataObj['data'+(v+1)]
                        bb = squaresA[v].shift()
                        squaresA[v].push(bb);
                    }
                    //重新加载
                    if(key>xData.length){key=0}
                    key++;

                    that.surveyInit.setOption({
                        xAxis: {
                            data: xData
                        },
                        series:createArr(squaresA)
                    });
                }, 3000);
            },
        },
        watch:{
            width:function(){
                this.surveyInit.resize()
            },
        },
        mounted(){
            // 新建一个promise对象
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                //  此dom为echarts图标展示dom
                this.initMoreColorZhu()
            })
        },
    }
</script>