echarts.js文件下载地址:Apache ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vintage.js"></script>
<script src="echarts.js"></script>
<script src="macarons.js"></script>
<script src="dark .js"></script>
</head>
<body>
<div id="themeArea"><label>echarts主题切换:</label></div>
<select name="" id="sel">
<option value="dark">dark</option>
<option value="macarons">macarons</option>
<option value="infographic">infographic</option>
<option value="roma">roma</option>
<option value="shine">shine</option>
<option value="vintage">vintage</option>
</select>
<div id="main" style="height: 399px;"></div>
</body>
<body>
<div id="main" style="width:600px;height: 400px;"></div>
<script>
var mychart = echarts.init(document.getElementById("main"),'dark');
var option = {
title:{text:'某大学各专业招生情况分析',left:60,top:10},
tooltip:{},
legend:{left:320,top:10 ,data:['2018','2019','2020']},
xAxis:{data:["大数据","元计算","人工智能","网络工程","移动开发","软件开发"]},
grid:{show:true},
yAxis:{},
series:[
{name:'2018',type:'bar',data:[122,55,44,56,110,222]},
{name:'2019',type:'bar',data:[315,98,122,96,115,278]},
{name:'2020',type:'bar',data:[382,123,222,94,125,369]}
]
};
mychart.setOption(option);
$('#sel').change(function(){
mychart.dispose();
let Theme=$(this).val();
mychart =echarts.init(document.getElementById('main'),Theme);
mychart.setOption(option);
});
</script>
</body>
</html>