Echarts学习堆叠柱状图柱子样式颜色及透明度宽度间隔修改

最新推荐文章于 2024-07-30 09:48:52 发布

默飞丶

最新推荐文章于 2024-07-30 09:48:52 发布

阅读量5.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_41156424/article/details/102372401

版权

!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="${ctx!}/echarts-3.8.0/dist/echarts.min.js"></script>
</head>
<body class="gray-bg">
 <div  class="bodymain">

<div class="row">

         <!-- 第一步，准备一个容器 给它一个id(名字取得很随意。。。) -->
           <div id="ddzzt" style="width:100%;height:511px;margin:-50px auto"></div>
                </div>
    </div> 
       <script type="text/javascript">

var gjAll;
    var zcAll;

      var account = 0;

        $(document).ready(function () {

// 第二步，初始化echarts实例


        ddzztChart = echarts.init(document.getElementById("ddzzt"));

    // 第三步，指定图表的配置项和数据
var ddzztoption = {
  tooltip : {     // 这是弹窗提示组件
       trigger: 'item',
       formatter: "{b} <br/>{a} : {c}"
   },
   grid: { // 调整其位置
       left: '5%',
       right: '5%',
       containLabel: true
   },
   xAxis : [ {
           type : 'category',
           data : ['类别'],
           axisLine: {  // 控制x轴线的样式
                  lineStyle: {
                       type: 'solid',
                      color: '#CECECE',
                       width:'1' } 
                    }
       } ],
   yAxis : [ { // 控制y轴
           type : 'value',
           axisLine: {
                   lineStyle: {
                       type: 'solid',
                        color: '#CECECE',
                       width:'1'
                   }
                 }
        }],
   series : [
       {
           name:'攻击',
           type:'bar',
           stack:'攻击', // 需要堆叠的柱子请配置相同的stack!
           data:[],
           itemStyle: {
normal: {
color: 'rgba(237,125,49, 0.8)', 

//这里修改了柱子的颜色以及透明度，注意如果要修改透明度，一定要配置在itemStyle里面，直接写在外面不起作用。

}
},
           barWidth: 140, // 控制柱子的宽度
           barGap:'70%' // 控制柱子的间隔
       },
       {
           name:'攻击总数减攻击数',
           type:'bar',
           stack: '攻击',
           data:[],
          itemStyle: {
normal: {
color: 'rgba(157,163,223, 0.8)',
}
},
           barWidth: 140,
           barGap:'70%'
       },
       {
           name:'正常',
           type:'bar',
           stack: '正常',
           data:[],
           itemStyle: {
normal: {
color: 'rgba(33,173,184, 0.8)',
}
},
           barWidth: 140,
           barGap:'70%'
       },
       {
           name:'正常总数减正常数',
           type:'bar',
           stack: '正常',
           data:[],
           itemStyle: {
normal: {
color: 'rgba(157,163,223, 0.8)',
}
},
           barWidth: 140,
           barGap:'70%'
       }
   ]
};

        ddzztChart.setOption(ddzztoption); 

        btChart = echarts.init(document.getElementById("bt"));
    var btoption = {
   tooltip : {
       trigger: 'item',
       formatter: "{a} <br/>{b} : {c} ({d}%)"
   },
   color:['#21adb8','#ED7D31'],
   legend: {
       left: 'center',
       data: ['正常','攻击'],
       textStyle:{
              fontSize:15,
              color:'#fff'
          }
   },
   series : [
       {
           name: '类别',
           type: 'pie',
           radius : '70%',
           center: ['50%', '60%'],
           data:[],
           itemStyle: {
               emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           }
       }
   ]
};

    // 使用刚指定的配置项和数据显示图表。
 ddzztChart.setOption(ddzztoption); 
});

    // 服务端获取数据动态加载图表。
 function getNodeDetail(id) {
  $.ajax({
    type: "GET",
    dataType: "json",
    url: "${ctx!}/admin/process/json/tree/details/" + id,
    success: (data) => {
      if(typeof(data.scoreDistribution["0"])=="undefined"){var gj=0;} 
      else {var gj=parseInt(data.scoreDistribution["0"].recordCount);}
if(typeof(data.scoreDistribution["1"])=="undefined"){var zc=0;}
else{var zc=parseInt(data.scoreDistribution["1"].recordCount);}
if(account ==0){
gjAll = gj;
zcAll = zc;
account++;
}
      ddzztChart.setOption({
       series: [{
           name: '正常',
           data: [zc]
       },
       {
           name: '攻击',
           data: [gj]
       },
       {
           name: '正常总数减正常数',
           data: [zcAll-zc]
       },
       {
           name: '攻击总数减攻击数',
           data: [gjAll-gj]
       }]
    });
      }
    });  
 }

    </script>
</body>
</html>