yuntucao chart

云吐槽图标示例

by basecss

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 100%; height: 200px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        title: {
            text: ''
        },
        // 主题颜色
        colors: ['#4A90E2', '#F5A623'],
        // X 轴日期数据
        xAxis: {
            categories: ['1001', '1002', '1003', '1004', '1005', '1006', '1007'],
            // 隐藏轴线 tick
            tickLength: 0,
            // 竖线
            gridLineWidth: 1
        },
        yAxis: {
            title: ''
        },
        // 图例标题
        legend: {
            align: 'center',
            verticalAlign: 'top',
            borderWidth: 0
        },
        // 折线配置
        plotOptions: {
          	series: {
                // 折线粗细
            	lineWidth: 1,
                // 状态处理
                states: {
                    // 禁用 hover
                	hover: {
                    	enabled: false
                    }
                }
            }
        },
        // 提示
        tooltip: {
        	
        },
        // 数据配置
        series: [{
            name: '发',
            data: [7, 6, 9, 14, 18, 21, 25]
        }, {
            name: '回',
            data: [1, 4, 5, 11, 17, 22, 24]
        }]
    });
});