SOURCE

console 命令行工具 X clear

                    
>
console
var chart = Highcharts.chart('container', {
		title: {
				text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
		},
		subtitle: {
				text: '数据来源:thesolarfoundation.com'
		},
        yAxis: [
                    {
                        type: 'value',
                        gridLineDashStyle: "dash",
                         lineWidth: 1,
                        title: {
                            text: "安装",
                            style: { color: '#4f81bd' }
                        },
                        labels: {
                            formatter: function () {
                            return '<div style="color:#4f81bd">' + this.value + '</div>';
                            }
                        },
                        height: "22%",
                        offset: 0,
                        opposite: false,
                        reversed: true,
                    },
                    {
                        type: 'value',
                        gridLineDashStyle: "dash",
                         lineWidth: 1,
                        title: {
                            text: "工人",
                            style: { color: '#c0504d' }
                        },
                        labels: {
                            formatter: function () {
                            return '<div style="color:#c0504d">' + this.value + '</div>';
                            }
                        },
                        top: "25%",
                        height: "22%",
                        offset: 0,
                        opposite: false
                    },
                    {
                        type: 'value',
                        gridLineDashStyle: "dash",
                         lineWidth: 1,
                        title: {
                            text: "销售",
                            style: { color: '#9bbb59' }
                        },
                        labels: {
                            formatter: function () {
                            return '<div style="color:#9bbb59">' + this.value + '</div>';
                            }
                        },
                        top: "50%",
                        height: "22%",
                        offset: 0,
                        opposite: false
                    },
                    {
                        type: 'value',
                        gridLineDashStyle: "dash",
                        lineWidth: 1,
                        title: {
                            text: "项目开发",
                            style: { color: '#8064a2' }
                        },
                        labels: {
                            formatter: function () {
                            return '<div style="color:#8064a2">' + this.value + '</div>';
                            }
                        },
                        top: "75%",
                        height: "22%",
                        offset: 0,
                        opposite: false
                    },
                ],
		legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle'
		},
        tooltip: {
                    shared: true,
                    crosshairs: {
                        width: 2,
                        color: 'gray',
                        dashStyle: 'shortdot'
                    },
                    formatter:function(){
                        var str = ""
                        this.points.forEach(element => {
                            str += '<br><span style="color:'+element.color+'">'+element.series.name+':'+element.y+'</span>'
                            str += '<br><span style="color:'+element.color+'">时间:'+element.series.name+'</span>'
                        });
                        return str
                    }
                },
		plotOptions: {
				series: {
						label: {
								connectorAllowed: false
						},
						pointStart: 2010
				}
		},
		series: [{
				name: '安装',
                yAxis: 0,
                color:"#4f81bd",
				data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
		}, {
				name: '工人',
                yAxis: 1,
                color:"#c0504d",
				data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
		}, {
				name: '销售',
                yAxis: 2,
                color:"#9bbb59",
				data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
		}, {
				name: '项目开发',
                yAxis: 3,
                color:"#8064a2",
				data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
		}],
});
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
        <script src="https://cdn.highcharts.com.cn/highcharts/modules/series-label.js"></script>
        <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" style="max-width:800px;height:400px"></div>
        <script>
            // JS 代码 
        </script>
    </body>
</html>

本项目引用的自定义外部资源