Echarts在线免费图表

 
            
let legendData = ["空调", "照明", "插座", "强电箱"];
let colors = ["#FF9671", "#24DBDA", "#845EC2", "#4A95FF"];
var getDate = function () {
    let dateArray = []
    //获取今天日期
    let myDate = new Date()
    let today = (myDate.getMonth() + 1) + "/" + myDate.getDate();
    myDate.setDate(myDate.getDate() - 14)
    let dateTemp;  // 临时日期数据
    let flag = 1;
    for (let i = 0; i < 14; i++) {
        dateTemp = (myDate.getMonth() + 1) + "/" + myDate.getDate()
        dateArray.push({
            date: dateTemp
        })
        myDate.setDate(myDate.getDate() + flag);
    }
    dateArray.push({
        date: today
    })
    let arr = []
    let newArr = []
    dateArray.forEach(item => {
        arr.push(item.date.split('-'))
    })
    for (let i = 0; i < arr.length; i++) {
        if (arr[i][1] < 10) {
            arr[i][1] = "0" + arr[i][1]
        }
        if (arr[i][2] < 10) {
            arr[i][2] = "0" + arr[i][2]
        }
    }
    for (let j = 0; j < arr.length; j++) {
        newArr.push(arr[j].join("-"))
    }
    return newArr
};
var xData2 = function () {
    var data = [];
    for (var i = 0; i < 15; i++) {
        data.push(Math.floor(Math.random() * (1000 - 100)) + 100);
    }
    return data;
};
let serieData = [];
let metaDate = [
    xData2(),
    xData2(),
    xData2(),
    xData2(),
];
for (var v = 0; v < legendData.length; v++) {
    var serie = {
        name: legendData[v],
        type: "line",
        symbol: "circle",
        symbolSize: 6,
        data: metaDate[v],
        lineStyle: {
            normal: {
                width: 2,
                color:colors[v]
            }
        }
    };
    serieData.push(serie);
}
option = {
    backgroundColor: '#0e1c47',
    legend: {
        show: true,
        left: "right",
        bottom: 10,
        itemGap: 24,
        itemWidth: 5,
        align: "right",
        textStyle: {
            color: "#fff",
            fontSize: "10",
        },
        data: legendData,
        y: "5%",
        itemWidth: 18,
        itemHeight: 12,
        textStyle: { color: "#fff", fontSize: 14 },
    },
    // color: colors,
    grid: {
        left: "5%",
        top: "10%",
        bottom: "15%",
        right: "5%",
        containLabel: true,
    },
    tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
    xAxis: [
        {
            name: "日",
            type: "category",
            axisLine: { show: true, lineStyle: { color: "#bac0c0" } },
            axisLabel: { interval: 0, textStyle: { color: "#bac0c0", fontSize: 14 } },
            axisTick: { show: false },
            data: getDate(),
        },
    ],
    yAxis: [
        {
            name: "KW",
            axisTick: { show: true },
            splitLine: { show: false },
            axisLabel: { textStyle: { color: "#bac0c0", fontSize: 14 } },
            axisLine: { show: true, lineStyle: { color: "#bac0c0" } },
        },
    ],
    series: serieData,
};