时间轴加类目轴，数据缩放，实线虚线结合，点与坐标不对应ECharts Gallery

20:11:45图表已生成
代码
let changeDate = ['2017-03', '2017-04', '2017-05', '2017-06', '2017-07', '2017-08', '2017-09', '2017-10', '2017-11', '2017-12', '2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07'];
let costData = [{
    startDate: '2017-03-01',
    endDate: '2017-03-31',
    cost: 900000,
    costState: '已确认',
    count: 88
}, {
    startDate: '2017-04-01',
    endDate: '2017-04-30',
    cost: 300000,
    costState: '已确认',
    count: 88
}, {
    startDate: '2017-05-01',
    endDate: '2017-05-31',
    cost: 850000,
    costState: '已确认',
    count: 88
}, {
    startDate: '2017-06-01',
    endDate: '2017-06-15',
    cost: 800000,
    costState: '已确认',
    count: 88
}, {
    startDate: '2017-06-16',
    endDate: '2017-06-30',
    cost: 1000000,
    costState: '已确认',
    count: 88
}, {
    startDate: '2017-07-01',
    endDate: '2017-07-04',
    cost: 1100000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2017-07-05',
    endDate: '2017-07-21',
    costState: '已确认',
    cost: 880000,
    count: 99
}, {
    startDate: '2017-08-01',
    endDate: '2017-08-31',
    costState: '已确认',
    cost: 120000,
    count: 99
}, {
    startDate: '2017-09-01',
    endDate: '2017-09-30',
    cost: 300000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2017-10-01',
    endDate: '2017-10-20',
    cost: 700000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2017-10-21',
    endDate: '2017-11-15',
    cost: 700000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2017-11-16',
    endDate: '2017-11-20',
    cost: 800000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2017-12-01',
    endDate: '2017-12-31',
    cost: 600000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2018-01-01',
    endDate: '2018-01-31',
    cost: 500000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2018-02-01',
    endDate: '2018-02-28',
    cost: 300000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2018-03-01',
    endDate: '2018-03-31',
    cost: 900000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2018-04-01',
    endDate: '2018-04-30',
    cost: 300000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2018-05-01',
    endDate: '2018-05-31',
    cost: 850000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2018-06-01',
    endDate: '2018-06-15',
    cost: 800000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2018-06-16',
    endDate: '2018-06-30',
    cost: 850000,
    costState: '已确认',
    count: 99
}, {
    startDate: '2018-07-01',
    endDate: '2018-07-04',
    cost: 1100000,
    costState: '未确认',
    count: 99
}, {
    startDate: '2018-07-05',
    endDate: '2018-07-21',
    cost: 880000,
    costState: '未确认',
    count: 99
}];

function getMinusDays(date1, date2) {
    var date1Str = date1.split('-');
    var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
    var date2Str = date2.split('-');
    var date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
    var t1 = date1Obj.getTime();
    var t2 = date2Obj.getTime();
    var dateTime = 1000 * 60 * 60 * 24;
    var minusDays = Math.floor(((t2 - t1) / dateTime));
    var days = Math.abs(minusDays);
    return days;
}

function addDays(date1, count) {
    var date1Str = date1.split('-');
    var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
    date1Obj.setDate(date1Obj.getDate() + count);
    let midDate = date1Obj.getFullYear() + '-' + (date1Obj.getMonth() + 1) + '-' + date1Obj.getDate();
    return midDate;
}

let cost = [];

for (let i = 0; i < costData.length; i++) {
    let midDate = addDays(costData[i].startDate, getMinusDays(costData[i].startDate, costData[i].endDate) / 2);
    cost.push({
        name: costData[i].startDate + ' ~ ' + costData[i].endDate,
        value: [midDate, costData[i].cost]
    });
}

let costChange = {
    changeDate: changeDate,
    cost: cost,
    minDate: costData[0].startDate.slice(0, 7) + '-01',
    maxDate: costData[costData.length - 1].endDate.slice(0, 7) + '-31',
    dashLastStart: 2
};

let monthCount = costChange.changeDate.length;
let data = costChange.cost;
let chartData = {
    xAxisNames: costChange.changeDate,
    seriesData: data,
    axisLabelFormatter: '{value}w',
    name: '费用',
    seriesDash: true,
    dashStart: data.length - costChange.dashLastStart,
    minDate: costChange.minDate,
    maxDate: costChange.maxDate,
    scrollLen: Math.ceil(100 - 12 / this.monthCount * 100),
    showScroll: this.monthCount > 12,
    bottom: this.monthCount > 12 ? 50 : 0
};

let seriesData = [];
console.log(chartData.seriesData);
if (chartData.seriesDash) {
    let len = chartData.seriesData.length;
    let minusArr = [];
    for (let i = 0; i < len; i++) {
        minusArr.push({
            name: '-',
            value: []
        });
    }
    seriesData = [{
            name: chartData.name,
            symbol: 'circle',
            symbolSize: 12,
            type: 'line',
            smooth: false,
            data: (chartData.seriesData.slice(0, chartData.dashStart)).concat(minusArr.slice(0, len - chartData.dashStart))
        },
        {
            name: chartData.name,
            symbol: 'emptyCircle',
            symbolSize: 6,
            type: 'line',
            smooth: false,
            data: (chartData.seriesData.slice(0, chartData.dashStart)).concat(minusArr.slice(0, len - chartData.dashStart))
        },
        {
            name: chartData.name,
            symbol: 'circle',
            symbolSize: 12,
            type: 'line',
            smooth: false,
            itemStyle: {
                normal: {
                    color: '#95EBE1',
                    lineStyle: {
                        width: 2,
                        type: 'dashed'
                    }
                }
            },
            data: (minusArr.slice(0, chartData.dashStart - 1)).concat(chartData.seriesData.slice(chartData.dashStart - 1, len))
        },
        {
            name: chartData.name,
            symbol: 'circle',
            symbolSize: 6,
            type: 'line',
            smooth: false,
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 2,
                        type: 'dotted'
                    }
                }
            },
            data: (minusArr.slice(0, chartData.dashStart - 1)).concat(chartData.seriesData.slice(chartData.dashStart - 1, len))
        },
        {
            name: chartData.name,
            symbol: 'circle',
            symbolSize: 12,
            type: 'line',
            smooth: false,
            data: (minusArr.slice(0, chartData.dashStart - 1)).concat(chartData.seriesData.slice(chartData.dashStart - 1, chartData.dashStart)).concat(minusArr.slice(0, len - chartData.dashStart))
        },
        {
            name: chartData.name,
            symbol: 'emptyCircle',
            symbolSize: 6,
            type: 'line',
            smooth: false,
            data: (minusArr.slice(0, chartData.dashStart - 1)).concat(chartData.seriesData.slice(chartData.dashStart - 1, chartData.dashStart)).concat(minusArr.slice(0, len - chartData.dashStart))
        }
    ];
} else {
    seriesData = [{
            name: chartData.name,
            symbol: 'circle',
            symbolSize: 12,
            type: 'line',
            data: chartData.seriesData
        },
        {
            name: chartData.name,
            symbol: 'emptyCircle',
            symbolSize: 6,
            type: 'line',
            data: chartData.seriesData
        }
    ];
}

let xAxisNames1 = [];
for (let i = 0; i < chartData.seriesData.length; i++) {
    xAxisNames1.push('-');
}
option = {
    color: '#28BBAB',
    backgroundColor: '#404a59',
    tooltip: {
        backgroundColor: 'rgba(46, 126, 139, 0.90)',
        padding: [10, 20, 10, 8],
        textStyle: {
            fontSize: 12,
            lineHeight: 24
        },
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                type: 'dashed',
                color: '#28BBAB'
            }
        },
        formatter: function(params, ticket, callback) {
            callback;
            var htmlStr = '';
            var valMap = {};
            for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var xName = param.name;
                var seriesName = param.seriesName;
                var value = param.value;
                // var color = param.color;
                if (value.length === 0) {
                    continue;
                }
                if (valMap[seriesName] && valMap[seriesName][0] === value[0] && valMap[seriesName][1] === value[1]) {
                    continue;
                }
                htmlStr += xName;
                // if (chartData.dashStart && params[0].dataIndex >= chartData.dashStart) {
                //     htmlStr += '预估';
                // }
                htmlStr += '<br/><div>';
                // htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
                htmlStr += seriesName + '：' + value[1];
                htmlStr += '</div>';
                valMap[seriesName] = value;
            }
            return htmlStr;
        }
    },
    grid: {
        left: 40,
        right: 14,
        bottom: 80,
        top: 20
    },
    dataZoom: [{
        type: 'slider',
        zoomLock: true,
        show: true,
        labelFormatter: () => {
            return '';
        },
        realtime: true,
        start: 30,
        filterMode: 'none',
        end: 100,
        throttle: 0,
        dataBackground: {
            lineStyle: {
                opacity: 0
            },
            areaStyle: {
                opacity: 0
            }
        },
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        },
        xAxisIndex: 0
    }],
    xAxis: [{
        type: 'time',
        min: chartData.minDate,
        max: chartData.maxDate,
        interval: 3600 * 24 * 1000,
        // minInterval: 3600 * 24 * 1000 * 30,
        // maxInterval: 3600 * 24 * 1000 * 31,
        data: xAxisNames1,
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#ADB9C7',
            formatter: function(value) {
                let date = new Date(value);
                let day = date.getDate();
                if (day === 16) {
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    month = month <= 9 ? ('0' + month) : month;
                    return year + '-' + month;
                } else {
                    return '';
                }
            }
        },
        axisTick: {
            show: false
        },
        axisPointer: {
            triggerTooltip: true
        }
    }],
    yAxis: {
        type: 'value',
        axisLine: {
            show: false,
            lineStyle: {
                color: '#999'
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: '#999'
            }
        },
        axisLabel: {
            color: '#ADB9C7',
            formatter: function(value) {
                if (chartData.axisLabelFormatter === '{value}w') {
                    return (parseInt(value, 10) / 10000) + 'w';
                } else {
                    return value;
                }
            }
        }
    },
    series: seriesData
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
