web数据可视化(Echarts版)5-5主题柱状图(代码仅供参考)

最新推荐文章于 2023-11-12 19:16:42 发布

白日梦想家☜

最新推荐文章于 2023-11-12 19:16:42 发布

阅读量439

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

本文链接：https://blog.csdn.net/m0_63471474/article/details/130808642

版权

HTML 专栏收录该内容

40 篇文章 12 订阅

订阅专栏

该文档提供了一个使用ECharts库创建的柱状图实例，展示了不同年份某大学各专业招生情况。页面中包含一个下拉菜单，允许用户在多种预定义的主题（如dark,macarons等）之间切换图表样式，从而改变图表的视觉效果。

摘要由CSDN通过智能技术生成

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>