1、单柱状图

option = {
   //你的代码
   backgroundColor: "#061740",
   tooltip: {
      backgroundColor: 'rgba(13, 64, 71, 0.50)',
      borderColor: 'rgba(143, 225, 252, 0.60)',
      padding: 8,
      textStyle: {
         color: '#fff',
      }
   },
   grid: {
      bottom: 50
   },

   xAxis: [
      {
         type: 'category',
         data: ['星期一', '星期二', '星期三','星期四','星期五'],
         offset: 10,
         axisLine: {                     // 轴线设置
            show: true,                   // 显示轴线
            lineStyle: {                  // 轴线样式设置
               color: "#C5C5C5", // 轴线颜色
               width: 1,                   // 轴线宽度
               type: "solid"              // 轴线类型-虚线
            }
         },
         axisLabel: {
            textStyle: {
               color: '#F5F5F5',  //更改坐标轴文字颜色
               fontSize: 12     //更改坐标轴文字大小
            }
         },
      }
   ],
   yAxis: [
      {
         splitLine: {
            show: true,
            lineStyle: {
               color: '#979797',
               type: [5, 10],
            },
         },
         axisLabel: {
            textStyle: {
               color: '#F5F5F5',  //更改坐标轴文字颜色
               fontSize: 12     //更改坐标轴文字大小
            }
         },

      },
   ],
   series: [
      // 数据1的柱状图1
      {
         name: '预计',
         type: 'bar',
         barWidth: 30,
         z: 1,
         label: {
            show: false
         },
         itemStyle: {
            opacity: 1, // 这个是 透明度
            color: {
               type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                  {
                     offset: 0,
                     color: '#CB9F60'
                  },
                  {
                     offset: 0.4,
                     color: '#CB9F60'
                  },
                  {
                     offset: 0.6,
                     color: '#F5C682'
                  },
                  {
                     offset: 1,
                     color: '#F5C682' // 100% 处的颜色
                  }
                  ],
                  global: false // 缺省为 false
            },
         },
         data: [100, 110, 120, 130, 140]
      },
      // 数据1顶部的样式
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: [0, -8],
         z: 2,
         itemStyle: {
            normal: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                     {
                        offset: 1,
                        color: '#FFE0B3'
                     }
                  ],
                  false
               ),
               label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [0, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         symbolPosition: 'end',
         data: [100, 110, 120, 130, 140]
      },
      // 数据1底部的样式
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: [0, -10],
         z: 1,
         itemStyle: {
            normal: {
               opacity: 1,
               color: {
                  type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                     {
                        offset: 0,
                        color: '#CB9F60'
                     },
                     {
                        offset: 0.4,
                        color: '#CB9F60'
                     },
                     {
                        offset: 0.6,
                        color: '#F5C682'
                     },
                     {
                        offset: 1,
                        color: '#F5C682' // 100% 处的颜色
                     }
                    ],
                    global: false // 缺省为 false
                  },
            
               label: {
                  show: false, // 开启显示
               }
            }
         },
         symbolPosition: 'end',
         data: [0,0,0,0,0] //项目中实际需要0改成1才显示圆圈
      },
   
   ]
};

2、双柱状图

option = {
   //你的代码
   backgroundColor: "#061740",
   tooltip: {
      backgroundColor: 'rgba(13, 64, 71, 0.50)',
      borderColor: 'rgba(143, 225, 252, 0.60)',
      padding: 8,
      textStyle: {
         color: '#fff',
      }
   },
   grid: {
      bottom: 50
   },
   legend: {
      data: ['预计', '实际'],
      icon: 'rect',
      itemWidth: 14,
      itemHeight: 14,
      right: 5,
      selectedMode: false, //取消图例上的点击事件
      textStyle: {
         fontSize: 14,
         color: '#FFFFFF'
      }
   },
   xAxis: [
      {
         type: 'category',
         data: ['星期一', '星期二', '星期三','星期四','星期五'],
         offset: 10,
         axisLine: {                     // 轴线设置
            show: true,                   // 显示轴线
            lineStyle: {                  // 轴线样式设置
               color: "#C5C5C5", // 轴线颜色
               width: 1,                   // 轴线宽度
               type: "solid"              // 轴线类型-虚线
            }
         },
         axisLabel: {
            textStyle: {
               color: '#F5F5F5',  //更改坐标轴文字颜色
               fontSize: 12     //更改坐标轴文字大小
            }
         },
      }
   ],
   yAxis: [
      {
         splitLine: {
            show: true,
            lineStyle: {
               color: '#979797',
               type: [5, 10],
            },
         },
         axisLabel: {
            textStyle: {
               color: '#F5F5F5',  //更改坐标轴文字颜色
               fontSize: 12     //更改坐标轴文字大小
            }
         },

      },
   ],
   // series: seriesData,
   series: [
      // 数据1的柱状图1
      {
         name: '预计',
         type: 'bar',
         barWidth: 30,
         z: 1,
         label: {
            show: false
         },
         itemStyle: {
            opacity: 1, // 这个是 透明度
            color: {
               type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                  {
                     offset: 0,
                     color: '#CB9F60'
                  },
                  {
                     offset: 0.4,
                     color: '#CB9F60'
                  },
                  {
                     offset: 0.6,
                     color: '#F5C682'
                  },
                  {
                     offset: 1,
                     color: '#F5C682' // 100% 处的颜色
                  }
                  ],
                  global: false // 缺省为 false
            },
         },
         data: [100, 110, 120, 130, 140]
      },
      // 数据1顶部的样式
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['-60%', -8],
         z: 2,
         itemStyle: {
            normal: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                     {
                        offset: 1,
                        color: '#FFE0B3'
                     }
                  ],
                  false
               ),
               label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [-20, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         symbolPosition: 'end',
         data: [100, 110, 120, 130, 140]
      },
      // 数据1底部的样式
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['-60%', -10],
         z: 1,
         itemStyle: {
            normal: {
               opacity: 1,
               color: {
                  type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                     {
                        offset: 0,
                        color: '#CB9F60'
                     },
                     {
                        offset: 0.4,
                        color: '#CB9F60'
                     },
                     {
                        offset: 0.6,
                        color: '#F5C682'
                     },
                     {
                        offset: 1,
                        color: '#F5C682' // 100% 处的颜色
                     }
                    ],
                    global: false // 缺省为 false
                  },
            
               label: {
                  show: false, // 开启显示
               }
            }
         },
         symbolPosition: 'end',
         data: [0,0,0,0,0] //项目中实际需要0改成1才显示圆圈
      },
      // 数据2的柱状图2
      {
         name: '实际',
         type: 'bar',
         barWidth: 30,
         z: 2,
         itemStyle: {
            // lenged文本
            opacity: 1, // 这个是 透明度
            color: {
               type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#C56062'
                     },
                     {
                        offset: 0.4,
                        color: '#C56062'
                     },
                     {
                        offset: 0.6,
                        color: '#EA777A'
                     },
                     {
                        offset: 1,
                        color: '#EA777A' // 100% 处的颜色
                     }
                  ],
                  global: false // 缺省为 false
               },
          
         },
         data: [90, 100,105, 110, 120]
      },
      // 数据2的顶部
      {
         name: '', // 头部
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['60%', -8],
         z: 12,
         symbolPosition: 'end',
         itemStyle: {
            normal: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient( 
                  0,
                  1,
                  1,
                  0,
                  [
                     {
                        offset: 1,
                        color: '#FE9C9F'
                     }
                  ],
                  false
               ),
               label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [20, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         data: [90, 100,105, 110, 120]
      },
     // 数据2的底部小圆圈
      {
         name: '', // 头部
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['60%', -10],
         z: 1,
         symbolPosition: 'end',
         itemStyle: {
            normal: {
               opacity: 1,
               color: {
                  type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 1,
                     y2: 0,
                     colorStops: [
                     {
                        offset: 0,
                        color: '#C56062'
                     },
                     {
                        offset: 0.4,
                        color: '#C56062'
                     },
                     {
                        offset: 0.6,
                        color: '#EA777A'
                     },
                     {
                        offset: 1,
                        color: '#EA777A' // 100% 处的颜色
                     }
                  ],
                  global: false // 缺省为 false
               },
               label: {
                  show: false, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [20, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         data: [0, 0, 0,0,0]
      },
   ]
};

3、三柱状图

option = {
   //你的代码
   backgroundColor: "#061740",
   tooltip: {
      backgroundColor: 'rgba(13, 64, 71, 0.50)',
      borderColor: 'rgba(143, 225, 252, 0.60)',
      padding: 8,
      textStyle: {
         color: '#fff',
      }
   },
   grid: {
      bottom: 50
   },
   legend: {
      icon: 'rect',
      itemWidth: 14,
      itemHeight: 14,
      right: 5,
      selectedMode: false, //取消图例上的点击事件
      textStyle: {
         fontSize: 14,
         color: '#FFFFFF'
      }
   },
   xAxis: [
      {
         type: 'category',
         data: ['星期一', '星期二', '星期三','星期四','星期五'],
         offset: 10,
         axisLine: {                     // 轴线设置
            show: true,                   // 显示轴线
            lineStyle: {                  // 轴线样式设置
               color: "#C5C5C5", // 轴线颜色
               width: 1,                   // 轴线宽度
               type: "solid"              // 轴线类型-虚线
            }
         },
         axisLabel: {
            textStyle: {
               color: '#F5F5F5',  //更改坐标轴文字颜色
               fontSize: 12     //更改坐标轴文字大小
            }
         },
      }
   ],
   yAxis: [
      {
         splitLine: {
            show: true,
            lineStyle: {
               color: '#979797',
               type: [5, 10],
            },
         },
         axisLabel: {
            textStyle: {
               color: '#F5F5F5',  //更改坐标轴文字颜色
               fontSize: 12     //更改坐标轴文字大小
            }
         },

      },
   ],
   // series: seriesData,
   series: [
      // 数据1的柱状图1
      {
         name: '预计',
         type: 'bar',
         barWidth: 30,
         z: 1,
         label: {
            show: false
         },
         itemStyle: {
            opacity: 1, // 这个是 透明度
            color: {
               type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                  {
                     offset: 0,
                     color: '#CB9F60'
                  },
                  {
                     offset: 0.4,
                     color: '#CB9F60'
                  },
                  {
                     offset: 0.6,
                     color: '#F5C682'
                  },
                  {
                     offset: 1,
                     color: '#F5C682' // 100% 处的颜色
                  }
                  ],
                  global: false // 缺省为 false
            },
         },
         data: [100, 110, 120, 130, 140]
      },
      // 数据1顶部的样式
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['-120%', -8],
         z: 2,
         itemStyle: {
            normal: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                     {
                        offset: 1,
                        color: '#FFE0B3'
                     }
                  ],
                  false
               ),
               label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [-40, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         symbolPosition: 'end',
         data: [100, 110, 120, 130, 140]
      },
      // 数据1底部的样式
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['-120%', -10],
         z: 1,
         itemStyle: {
            normal: {
               opacity: 1,
               color: {
                  type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                     {
                        offset: 0,
                        color: '#CB9F60'
                     },
                     {
                        offset: 0.4,
                        color: '#CB9F60'
                     },
                     {
                        offset: 0.6,
                        color: '#F5C682'
                     },
                     {
                        offset: 1,
                        color: '#F5C682' // 100% 处的颜色
                     }
                    ],
                    global: false // 缺省为 false
                  },
              
               label: {
                  show: false, // 开启显示
               }
            }
         },
         symbolPosition: 'end',
         data: [0,0,0,0,0] //项目中实际需要0改成1才显示圆圈
      },
      // 数据2的柱状图2
      {
         name: '实际',
         type: 'bar',
         barWidth: 30,
         z: 2,
         itemStyle: {
            // lenged文本
            opacity: 1, // 这个是 透明度
            color: {
               type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#C56062'
                     },
                     {
                        offset: 0.4,
                        color: '#C56062'
                     },
                     {
                        offset: 0.6,
                        color: '#EA777A'
                     },
                     {
                        offset: 1,
                        color: '#EA777A' // 100% 处的颜色
                     }
                  ],
                  global: false // 缺省为 false
               },
           
         },
         data: [90, 100,105, 110, 120]
      },
      // 数据2的顶部
      {
         name: '', // 头部
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['0%', -8],
         z: 12,
         symbolPosition: 'end',
         itemStyle: {
            normal: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient( 
                  0,
                  1,
                  1,
                  0,
                  [
                     {
                        offset: 1,
                        color: '#FE9C9F'
                     }
                  ],
                  false
               ),
               label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [0, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         data: [90, 100,105, 110, 120]
      },
     // 数据2的底部小圆圈
      {
         name: '', // 头部
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['0%', -10],
         z: 1,
         symbolPosition: 'end',
         itemStyle: {
            normal: {
               opacity: 1,
               color: {
                  type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 1,
                     y2: 0,
                     colorStops: [
                     {
                        offset: 0,
                        color: '#C56062'
                     },
                     {
                        offset: 0.4,
                        color: '#C56062'
                     },
                     {
                        offset: 0.6,
                        color: '#EA777A'
                     },
                     {
                        offset: 1,
                        color: '#EA777A' // 100% 处的颜色
                     }
                  ],
                  global: false // 缺省为 false
               },
               label: {
                  show: false, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [20, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         data: [0, 0, 0,0,0]
      },
       // 数据3的柱状图3
      {
         name: '实际1',
         type: 'bar',
         barWidth: 30,
         z: 2,
         itemStyle: {
            // lenged文本
            opacity: 1, // 这个是 透明度
            color: {
               type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#C56062'
                     },
                     {
                        offset: 0.4,
                        color: '#C56062'
                     },
                     {
                        offset: 0.6,
                        color: '#EA777A'
                     },
                     {
                        offset: 1,
                        color: '#EA777A' // 100% 处的颜色
                     }
                  ],
                  global: false // 缺省为 false
               },
         
         },
         data: [90, 100,105, 110, 120]
      },
      // 数据3的顶部
      {
         name: '', // 头部
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['120%', -8],
         z: 12,
         symbolPosition: 'end',
         itemStyle: {
            normal: {
               opacity: 1,
               color: new echarts.graphic.LinearGradient( 
                  0,
                  1,
                  1,
                  0,
                  [
                     {
                        offset: 1,
                        color: '#FE9C9F'
                     }
                  ],
                  false
               ),
               label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [40, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         data: [90, 100,105, 110, 120]
      },
     // 数据3的底部小圆圈
      {
         name: '', // 头部
         type: 'pictorialBar',
         symbolSize: [30, 15],
         symbolOffset: ['120%', -10],
         z: 1,
         symbolPosition: 'end',
         itemStyle: {
            normal: {
               opacity: 1,
               color: {
                  type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 1,
                     y2: 0,
                     colorStops: [
                     {
                        offset: 0,
                        color: '#C56062'
                     },
                     {
                        offset: 0.4,
                        color: '#C56062'
                     },
                     {
                        offset: 0.6,
                        color: '#EA777A'
                     },
                     {
                        offset: 1,
                        color: '#EA777A' // 100% 处的颜色
                     }
                  ],
                  global: false // 缺省为 false
               },
               label: {
                  show: false, // 开启显示
                  position: 'top', // 在上方显示
                  offset: [20, 0],
                  textStyle: {
                     // 数值样式
                     color: '#FFFFFF',
                     fontSize: 14,
                     top: 50
                  },
                  formatter: function (param) {
                     return param.data
                  }
               }
            }
         },
         data: [0, 0, 0,0,0]
      },
   ]
};