echart 之bar的一种案例

zhgc

1. function echarts_2() {
   
2.     // 基于准备好的dom，初始化echarts实例
   
3.     var myChart = echarts.init(document.getElementById('echart2'));
   
4.     option = {
   
5.                         //  backgroundColor: '#00265f',
   
6.                         tooltip: {
   
7.                                 trigger: 'axis',
   
8.                                 axisPointer: { type: 'shadow'}
   
9.                         },
   
10.                         grid: {
    
11.                                 left: '0%',
    
12.                         top:'10px',
    
13.                                 right: '0%',
    
14.                                 bottom: '4%',
    
15.                                 containLabel: true
    
16.                         },
    
17.                         xAxis: [{
    
18.         type: 'category',
    
19.               data: ['08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
    
20.         axisLine: {
    
21.           show: true,
    
22.                                         lineStyle: {
    
23.             color: "rgba(255,255,255,.1)",
    
24.             width: 1,
    
25.             type: "solid"
    
26.           },
    
27.         },
    
28.                
    
29.         axisTick: {
    
30.             show: false,
    
31.         },
    
32.                                 axisLabel:  {
    
33.                                         interval: 0,
    
34.                                         // rotate:50,
    
35.                                         show: true,
    
36.                                         splitNumber: 15,
    
37.                                         textStyle: {
    
38.                                                 color: "rgba(255,255,255,.6)",
    
39.                                                 fontSize: '12',
    
40.                                         },
    
41.                                 },
    
42.                         }],
    
43.                         yAxis: [{
    
44.                                         type: 'value',
    
45.                                         axisLabel: {
    
46.                                                  //formatter: '{value} %'
    
47.                                 show:true,
    
48.                                  textStyle: {
    
49.                                                 color: "rgba(255,255,255,.6)",
    
50.                                                                                         fontSize: '12',
    
51.                                                                         },
    
52.                                         },
    
53.                                         axisTick: {
    
54.                                                         show: false,
    
55.                                         },
    
56.                                         axisLine: {
    
57.                                                         show: true,
    
58.                                                         lineStyle: {
    
59.                                                                         color: "rgba(255,255,255,.1        )",
    
60.                                                                         width: 1,
    
61.                                                                         type: "solid"
    
62.                                                         },
    
63.                                         },
    
64.                                         splitLine: {
    
65.                                                         lineStyle: {
    
66.                                                                  color: "rgba(255,255,255,.1)",
    
67.                                                         }
    
68.                                         }
    
69.                         }],
    
70.                         series: [
    
71.                         {
    
72.                                 type: 'bar',
    
73.                                 data: [1500, 1200, 600, -200, 300, 300, 900, 1200, 600, 200, 300],
    
74.                                 barWidth:'35%', //柱子宽度
    
75.                                 // barGap: 1, //柱子之间间距
    
76.                                 itemStyle: {
    
77.                                         normal: {
    
78.                                                 color:'#27d08a',
    
79.                                                 opacity: 1,
    
80.                                                 barBorderRadius: 5,
    
81.                                         }
    
82.                                 }
    
83.                         }
    
84.                        
    
85.                 ]
    
86.         };
    
87.       
    
88.         // 使用刚指定的配置项和数据显示图表。
    
89.         myChart.setOption(option);
    
90.         window.addEventListener("resize",function(){
    
91.             myChart.resize();
    
92.         });
    
93.     }

复制代码