Monitorecharts category配置项内容和展示

      var props = {
    name: '人脸识别',
    date: '2017/02/14',
};

option = {
    color: ['#4A90E2', '#DE8B41'],
    backgroundColor: '#fff',
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#fff',
        textStyle: {
            fontSize: 10,
            color: '#4A4A4A',
        },
        axisPointer: {
            lineStyle: {
                color: '#C9C9C9',
            },
        },
        extraCssText: 'box-shadow: 0 2px 4px rgba(0,0,0,.5);',
        formatter(params, ticket, callback) {
            console.log(arguments[0]);
            return `
                产品名称: ${props.name}<br />
                时间: ${props.date} ${params[0].name}<br />
                ${params.map(({ color, seriesName, value }) => `
                    <span style="background-color:${color};display: inline-block;width: 6px;height: 6px; line-height: 6px;border-radius: 3px;"></span>
                    ${seriesName}: ${value}<br />
                `).join('')}
            `;
        },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        axisLine: {
            lineStyle: {
                color: '#E2E2E2',
            },
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            textStyle: {
                fontSize: 10,
                color: '#666666'
            },
        },
        type: 'category',
        boundaryGap: false,
        data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00', '21:00', '24:00']
    },
    yAxis: {
        axisLine: {
            show: false,
        },
        axisTick: {
            lineStyle: {
                color: '#B0B0B0',
                width: 3,
            },
        },
        axisLabel: {
            textStyle: {
                fontSize: 10,
                color: '#666666',
            },
        },
        splitLine: {
            lineStyle: {
                color: '#B0B0B0',
                type: 'dotted',
            },
        },
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            symbol: 'circle',
            data:[1800, 2200, 1900, 2000, 2010, 1840, 2090, 1800, 1830],
        },
        {
            name: '联盟广告',
            type: 'line',
            symbol: 'circle',
            data: [500, 800, 650, 700, 700, 666, 850, 750, 790],
        },
    ]
};