echart 之bar的一种案例

zhgc

1.         function char2() {
   
2. 
   
3.                         var myChart = echarts.init($("#echart5")[0]);
   
4. 
   
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.                                         },
    
25. 
    
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.                                                                         }
    
45. 
    
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.                                                         },
     
107. 
     
108.                                         ]
     
109.                         };
     
110. 
     
111.                         myChart.setOption(option);
     
112.                         window.addEventListener('resize', function () {myChart.resize();})
     
113. 
     
114.         }

复制代码