ECharts -堆叠柱状图

最新推荐文章于 2024-05-28 10:58:28 发布

MrJson-架构师

最新推荐文章于 2024-05-28 10:58:28 发布

阅读量2.9k

点赞数 1

分类专栏： JS坑 java知识库

本文链接：https://blog.csdn.net/weixin_43102784/article/details/112784028

版权

java知识库同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JS坑

2 篇文章 0 订阅

订阅专栏

ECharts 教程基础篇

ECharts数据可视化实验室，解读适合使用场景

官网

项目简介：ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。涵盖各行业图表，满足各种需求。
项目地址：https://gitee.com/echarts/echarts

现在公司刚分配一个任务，需要用到 echarts堆叠柱状图处理缺陷报表问题，以前也没有接触过，所以一边学习ECharts官网上的中文API（http://echarts.baidu.com/examples.html）下面就是我的代码以及最终效果图。

<html>
  <head>
    <base href="<%=basePath%>">
    <title>堆叠柱状图</title>
    <script type="text/javascript" src="js/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        //基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '资源总览',
                left:'20px',
                textStyle: {    
                color: "#436EEE",
                fontSize: 17,   
                }
            },
            tooltip: {
                 trigger: "axis",  
            },
            legend: {
                itemWidth:15,  
                itemHeight:15,  
                data:['可用','不可用'],
            },
            xAxis: {
                data: ["网络设备","服务器","应用","其他","虚拟机","存储"],
                splitLine:{
                    show:false,
                },
            },
            yAxis: {
                 splitLine:{
                    show:false,
                },
            },
            series: [{
                name: '可用',
                type: 'bar',
                stack:'使用情况',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle:{
                     normal:{color:"#FF8849"},
                }
            },{
                name: '不可用',
                type: 'bar',
                stack:'使用情况',
                data: [40, 22, 18, 35, 42, 40],
                itemStyle:{
                     normal:{color:"#3FBB49"},
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
  </body>
</html>

在这里插入图片描述

MrJson-架构师

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ECharts -堆叠柱状图

ECharts 教程基础篇ECharts数据可视化实验室，解读适合使用场景官网项目简介：ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。涵盖各行业图表，满足各种需求。项目地址：https://gitee.com/echarts/echarts现在公司刚分配一个任务，需要用到 echarts堆叠柱状图处理缺陷报表问题，以前也没有接触过，所以一边学习ECharts官网上的中文API（http://
复制链接

扫一扫