双线折线轮播echarts 折线配置项内容和展示

双线折线轮播

      let name = '单位：万'
let dataArr = [
    {
        name: '流入',
        list: [
            {
                name: '3月',
                value: 40
            },
            {
                name: '4月',
                value: 60
            },
            {
                name: '5月',
                value: 20
            },
            {
                name: '6月',
                value: 85
            },
            {
                name: '7月',
                value: 50
            },
            {
                name: '8月',
                value: 30
            }
        ]
    },
    {
        name: '流出',
        list: [
            {
                name: '3月',
                value: 50
            },
            {
                name: '4月',
                value: 40
            },
            {
                name: '5月',
                value: 15
            },
            {
                name: '6月',
                value: 50
            },
            {
                name: '7月',
                value: 40
            },
            {
                name: '8月',
                value: 30
            }
        ]
    }
]
// x轴
let nameArr = dataArr[0].list.map(it => it.name)
// 颜色
let colors = ['rgba(11, 255, 177, 1)', 'rgba(45, 173, 255, 1)']
option = {
    backgroundColor: '#0e1c47',
    tooltip: {
        trigger: 'axis',
        backgroundColor:'rgba(1, 13, 19, 0.5)',
        borderWidth: 0,
        axisPointer: {
            lineStyle: {
                color: 'rgba(11, 208, 241, 1)',
                type: 'slider',
            },
        },
         textStyle:{
            color:'rgba(212, 232, 254, 1)',
            fontSize:12,
        },
    },
    legend: {
        align: "left",
        right: '10%',
        top:'10%',
        type:'plain',
        textStyle:{
            color:'rgba(212, 232, 254, 1)',
            fontSize:14,
        },
        icon:'rect',
        itemGap:15,
        itemWidth:25,
        itemHeight:5,
        itemStyle: {
            borderWidth: 0
        },
        // icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
        data: dataArr.map(it => it.name)
    },
    grid: {
        top: '15%',
        left: '10%',
        right: '10%',
        bottom: '15%',
        // containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
                color: 'rgba(108, 166, 219, 1)'
            },
        },
        axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
                color: 'rgba(212, 232, 254, 1)',
                padding: 16,
                fontSize: 14
            },
            formatter: function(data) {
                return data
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#192a44'
            },
        },
        axisTick: {
            show: false,
        },
        data: nameArr
    }],
    yAxis: [{
        name: name,
        nameTextStyle: {
            color: "rgba(212, 232, 254, 1)",
            fontSize: 12,
        },
        // min: 0,
       splitLine: {
        lineStyle: {
          color: 'rgba(108, 166, 219, 0.5)',
          type: 'dashed'
        }
      },
        axisLine: {
            show: false,
            lineStyle: {
                color: "#233653"
            }

        },
        axisLabel: {
            show: true,
            textStyle: {
                color: 'rgba(212, 232, 254, 1)',
                padding: 16
            },
            formatter: function(value) {
                if (value === 0) {
                    return value
                }
                return value
            }
        },
        axisTick: {
            show: false,
        },
    }],
    series: [{
        name: dataArr[0].name,
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: colors[0], // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
        },
        itemStyle: {
            color: colors[0],
            borderColor: "#646ace",
            borderWidth: 0

        },
        tooltip: {
            show: true
        },
        data: dataArr[0].list.map(it => it.value)
    }, {
        name: dataArr[1].name,
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
            normal: {
                width: 2,
                color: colors[1], // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
        },
        itemStyle: {
            color: colors[1],
            borderColor: "#646ace",
            borderWidth: 0

        },
        tooltip: {
            show: true
        },
        data: dataArr[1].list.map(it => it.value)
    }]
};
let len = 0
setInterval(()=>{
    if(len === nameArr.length){
        len = 0
    }
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: len,
    })
    len ++
}, 2000)