深圳全飞鸿

标题: echart 之bar的一种案例 [打印本页]
作者: zhgc    时间: 2021-12-18 17:41
标题: echart 之bar的一种案例


  1.         function char2() {

  3.                         var myChart = echarts.init($("#echart5")[0]);

  5.                         option = {
  6.                                   //backgroundColor: '#00265f',
  7.                                         tooltip : {
  8.                                                         trigger: 'axis',
  9.                                                         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
  10.                                                                         type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  11.                                                         }
  12.                                         },
  13.                                         grid: {show:'true',borderWidth:'0'},
  14.                                         legend: {
  15.                                                         data:['缺勤','在岗','上班未上岗'],
  16.                                                         textStyle : {
  17.                                                                 fontSize: 12,
  18.                                                                 color : '#ffffff'
  19.                                                         },
  20.                                                         icon:"rect",
  21.                                                         itemWidth:10,
  22.                                                         itemHeight:10,
  23.                                                         bottom:"0%"
  24.                                         },

  26.                                         calculable :false,
  27.                                         xAxis : [
  28.                                                         {
  29.                                                                         type : 'value',
  30.                                                                         show:false,
  31.                                                                         axisLabel: {
  32.                                                                                         show: true,
  33.                                                                                         textStyle: {
  34.                                                                                                         color: '#fff'
  35.                                                                                         }
  36.                                                                         },
  37.                                                                         splitLine:{
  38.                                                                                 "show": false,
  39.                                                                                         lineStyle:{
  40.                                                                                                         color:['#f2f2f2'],
  41.                                                                                                         width:0,
  42.                                                                                                         type:'solid'
  43.                                                                                         }
  44.                                                                         }

  46.                                                         }
  47.                                         ],
  48.                                         yAxis : [
  49.                                                         {
  50.                                                                         type : 'category',
  51.                                                                         data : ['组装一课','组装二课','组装三课','组装四课','组装五课'],
  52.                                                                         axisLabel: {
  53.                                                                                         show: true,
  54.                                                                                         textStyle: {
  55.                                                                                                                  color: 'rgba(255,255,255,.5)',
  56.                                                                                                 fontSize:'12',
  57.                                                                                                         }
  58.                                                                         },
  59.                                                                         splitLine:{
  60.                                                                                         lineStyle:{
  61.                                                                                                         width:0,
  62.                                                                                                         type:'solid'
  63.                                                                                         }
  64.                                                                         }
  65.                                                         }
  66.                                         ],
  67.                                         series : [
  68.                                                         {
  69.                                                                         name:'缺勤',
  70.                                                                         type:'bar',
  71.                                                                         stack: '总量',
  72.                                                                         itemStyle : {
  73.                                                                                 normal: {
  74.                                                                                         label : {show: true, position: 'insideRight'},
  75.                                                                                         color:'#623AD1',
  76.                                                                                         opacity: 1,
  77.                                                                                         barBorderRadius: 6,
  78.                                                                         }},
  79.                                                                         data:[21, 17, 13,8,13]
  80.                                                         },
  81.                                                         {
  82.                                                                         name:'在岗',
  83.                                                                         type:'bar',
  84.                                                                         stack: '总量',
  85.                                                                         itemStyle : {
  86.                                                                                 normal: {
  87.                                                                                         label : {show: true, position: 'insideRight'},
  88.                                                                                         color:'#2f89cf',
  89.                                                                                         opacity: 1,
  90.                                                                                         barBorderRadius: 6,
  91.                                                                         }},
  92.                                                                         data:[122, 93, 117,100,98]
  93.                                                         },
  94.                                                         {
  95.                                                                         name:'上班未上岗',
  96.                                                                         type:'bar',
  97.                                                                         stack: '总量',
  98.                                                                         itemStyle : {
  99.                                                                                 normal: {
  100.                                                                                         label : {show: true, position: 'insideRight'},
  101.                                                                                         color:'#c23531',
  102.                                                                                         opacity: 1,
  103.                                                                                         barBorderRadius: 6,
  104.                                                                         }},
  105.                                                                         data:[21,8,13,25,17]
  106.                                                         },

  108.                                         ]
  109.                         };

  111.                         myChart.setOption(option);
  112.                         window.addEventListener('resize', function () {myChart.resize();})

  114.         }
复制代码




欢迎光临 深圳全飞鸿 (http://www.nagomes.com/disc/) Powered by Discuz! X3.2