Echarts在线免费图表

 
            var dataOption={"divId":"chartProductYield","xAxisData":["10/25白班","10/26大夜","10/26白班","10/26小夜","10/27大夜","10/27白班","10/27小夜","10/28大夜","10/28白班","10/28小夜","10/29大夜","10/29白班","10/29小夜","10/30大夜","10/30白班","10/30小夜","10/31大夜","10/31白班","10/31小夜","11/01大夜"],"seriesArray":[{"name":"氢气","data":[7.486,9.376,12.863,11007,9.622,13.48,11.418,10787,15.239,14.139,12630,16.582,171185,13.711,17.352,16.928,13.697,18565,16.727,14.471]}]};

var colorArray = ["#49a9ee", "#98d87d", "#ffd86e", "#f3857b", "#939de7", "#ca8622", "#749f83", "#d48265", "#61a0a8", "#2f4554", "#c23531"];

var legendData = [];
var seriesArray = [];

if (!dataOption.xAxisData) {
    dataOption.xAxisData = [];
}

if (!dataOption.seriesArray) {
    dataOption.seriesArray = [];
}

var seriesLen = dataOption.seriesArray.length,
    colorLen = colorArray.length;
for (var i = 0; i < seriesLen; i++) {
    legendData.push({
        name: dataOption.seriesArray[i].name,
        icon: "circle"
    });

    seriesArray.push({
        name: dataOption.seriesArray[i].name,
        type: "line",
        barGap: 0,
        itemStyle: {
            normal: {
                color: colorArray[i % colorLen]
            }
        },
        symbolSize: 5,
        symbol: "circle",
        lineStyle: {
            type: (!dataOption.seriesArray[i].lineStyle) ? "solid" : dataOption.seriesArray[i].lineStyle.type,
            width: 1
        },
        data: dataOption.seriesArray[i].data
    });
}

option = {
    title: {
        show: false
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line'
        },
        confine: true,
        textStyle: {
            fontSize: 9,
            color: "#fff"
        }
    },
    grid: {
        show: true,
        top: 22,
        left: 10,
        right: 10,
        bottom: 22,
        containLabel: true,
        borderColor: 'transparent'
    },
    legend: {
        show: true,
        right: 25,
        top: 0,
        textStyle: {
            fontSize: 10
        },
        itemWidth: 9,
        itemHeight: 9,
        data: legendData
    },
    toolbox: {
        show: false
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        data: dataOption.xAxisData,
        nameLocation: "start",
        //scale: true,
        axisTick: {
            alignWithLabel: true
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 7,
                color: "#989898"
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 7,
                color: "#989898"
            },
            inside: false,
            showMinLabel: false,
            showMaxLabel: false
        },
        scale: true,
        splitLine: {
            show: true,
            lineStyle: {
                type: "dotted"
            }
        },
        min: function(value) {
            return value.min - 10;
        },
        max: function(value) {
            return value.max + 10;
        }
    },
    dataZoom: [{
        type: 'inside',
        start: 20,
        end: 80,
        filterMode: "none"
    }, {
        start: 20,
        end: 80,
        height: 16,
        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
        },
        textStyle: {
            fontSize: 9
        },
        bottom: 5
    }],
    series: seriesArray
}