参考链接：https://www.highcharts.com.cn/docs/themes
1.使用官方提供的主题js文件，只需要在 highcharts.js 后引入对应的文件即可，不用修改原有的js文件
示例代码：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个 Highcharts 图表</title> <!-- 引入 jquery.js --> <script src="static/jquery-3.3.1.min.js"></script> <!-- 引入 highcharts.js --> <script src="static/highcharts-7.0.3.js"></script> {# 使用官方提供的主题#} <script src="https://img.highcharts.com.cn/highcharts/themes/dark-unica.js"></script> </head> <body> <!-- 图表容器 DOM --> <div id="container" style="min-400px;height:400px"></div> <script src="static/b.js"></script> </body> </html>
2.自定义主题文件。
将图表的样式和数据配置分离是非常有必要的，样式分离后独立成主题可以在对页面上所有图表有效。
创建主题文件很简单，只需要将样式相关配置通过 Highcharts.setOptions() 函数生效（这也是我们提供的主题使用的方法）
示例代码：
js代码：
需要注意的是设置的主题配置一定要要在图表数据前面，否则不生效，原有的html页面不用修改
Highcharts.theme = { colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], chart: { backgroundColor: { linearGradient: [0, 0, 500, 500], stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ] }, }, title: { style: { color: '#2970f9', font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' } }, subtitle: { style: { color: '#666666', font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' } }, legend: { itemStyle: { font: '9pt Trebuchet MS, Verdana, sans-serif', color: 'blue' }, itemHoverStyle: { color: 'gray' } } }; // 使主题配置生效 Highcharts.setOptions(Highcharts.theme); var chart = Highcharts.chart('container', { title: { text: '2010 ~ 2016 年太阳能行业就业人员发展情况' }, subtitle: { text: '数据来源：thesolarfoundation.com' }, yAxis: { title: { text: '就业人数' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: '安装，实施人员', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: '工人', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: '销售', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: '项目开发', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: '其他', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } });
另一个注意的事项：
若是html页面引用官方官方提供的js主题文件和js代码中自定义的主题同时存在，以后者自己在js中自定义的为准。