项目关键进度echarts 柱状配置项内容和展示

柱状图显示关键项进度

       var option = {
     backgroundColor: 'black',
     color: ['#2adecf'],
     textStyle: {
         color: 'rgb(222,222,222)',
     },
     tooltip: {
         trigger: 'axis',
         axisPointer: {
             type: 'shadow'
         }
     },
     legend: {
         show: false,
         data: ['计划完成日期', '实际完成'],
         textStyle: {
             color: '#FFFFFF'
         }
     },
     grid: {
         left: '3%',
         right: '3%',
         bottom: '3%',
         top: '15%',
         containLabel: true
     },
     xAxis: [{
         data: [
             "1#码头",
             "2#码头",
             "3#泊位",
             "4#泊位",
             "7#码头"
         ],
         axisLine: {
             show: true
         },
         splitLine: {
             show: false
         },
         axisTick: {
             show: false
         },
         axisLabel: {
             interval: 0,
             rotate: 0
         }
     }],
     yAxis: [{
             type: 'value',
             name: '',
             axisLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },
             splitLine: {
                 show: false
             },
             min: '2',
             max: '12',
             interval: 2,
             axisLabel: {
                 formatter: '{value}月'
             },
         },
         {
             type: 'value',
             name: '',
             show: false,
             axisLine: {
                 show: false
             },
             axisTick: {
                 show: false
             },
             splitLine: {
                 show: false
             },
             min: '0',
             max: '100',
             interval: 10,
             axisLabel: {}
         }
     ],
     series: [{
         name: '计划完成日期',
         type: 'bar',
         barWidth: '20%',
         label: { //图形上的文本标签
             normal: {
                 show: true,
                 position: 'top',
                 textStyle: {
                     color: '#fff',
                     fontStyle: 'normal'
                 },
                 formatter: '{c}月'
             },
         },
         itemStyle: {
             normal: {
                 color: new echarts.graphic.LinearGradient(
                     0, 1, 0, 0, [{
                         offset: 0,
                         color: '#719aff'
                     }, {
                         offset: 1,
                         color: '#51c3ff'
                     }]
                 )
             }
         },
         data: [
             9,
             11,
             10,
             9,
             8
         ]
     }, {
         name: '实际完成',
         type: 'bar',
         yAxisIndex: 1,
         barWidth: '20%',
         label: { //图形上的文本标签
             normal: {
                 show: true,
                 position: 'top',
                 textStyle: {
                     color: '#fff',
                     fontStyle: 'normal'
                 },
                 formatter: '{c}%'
             },
         },
         itemStyle: {
             normal: {
                 color: new echarts.graphic.LinearGradient(
                     0, 1, 0, 0, [{
                         offset: 0,
                         color: '#ffbf37'
                     }, {
                         offset: 1,
                         color: '#ffbf37'
                     }]
                 )
             }
         },
         data: [
             30,
             40,
             30,
             60,
             30
         ],

     }]
 }