Echarts在线免费图表

 
            var barWidth = 30;
let Ydata1 = [198, 546, 1771]
let Ydata2 = [121, 629, 3484]
let xData = ['一月', '二月', '三月']
var color2 = {
   x: 0,
   y: 0,
   x2: 0,
   y2: 1,
   type: 'linear',
   global: false,
   colorStops: [
      {
         //第一节下面
         offset: 0,
         color: '#1C98CD',
      },
      {
         offset: 1,

         color: 'rgba(61,187,255,.16)',
      },
   ],
};
var color1 = {
   x: 0,
   y: 0,
   x2: 0,
   y2: 1,
   type: 'linear',
   global: false,
   colorStops: [
      {
         //第一节下面
         offset: 0,
         color: '#E7AB47',
      },
      {
         offset: 1,
         color: 'rgba(255,164,41,.16)',
      },
   ],
};
option = {
   backgroundColor: '#0D2048', //背景色
   legend: {
      data: ['1', '2'],
      icon: 'circle',
      top: "10%",
      right: "center",
      textStyle: {
         color: '#fff',
         fontWeight: 'normal',
         fontSize: 12,
      },
   },
   //提示框
   tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
         type: 'none',
      },
   },
   grid: {
      top: '18%',
      left: '5%',
      bottom: '10%',
      right: '5%',
      containLabel: true,
   },
   animation: false,
   xAxis: [
      {
         type: 'category',
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true,
            textStyle: {
               color: "#019bdd",
            },
            lineStyle: {
               color: "#019bdd", //刻度线的颜色
            },
         },
         axisLabel: {
            inside: false,
            textStyle: {
               color: '#fff',
               fontWeight: 'normal',
               fontSize: 12,
            },
            margin: 20, //刻度标签与轴线之间的距离。
         },
         data: xData,
      },
      {
         type: 'category',
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            show: false,
         },
         splitArea: {
            show: false,
         },
         splitLine: {
            show: false,
         },
         data: xData,
      },
   ],
   yAxis: [
      {
         show: true,
         type: 'value',
         axisLabel: {
            show: true,
            textStyle: {
               color: '#fff',
            },
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: "#064e78",
            },
         },
         axisLine: {
            show: true,
            textStyle: {
               color: "#019bdd",
            },
            lineStyle: {
               color: "#019bdd", //刻度线的颜色
            },
         },
      },
   ],
   series: [
      {
         name: '1',
         type: 'pictorialBar',
         symbolSize: [barWidth, 10],
         symbolOffset: ['-81%', -5],
         symbolPosition: 'end',
         z: 15,
         color: '#ffa876',
         zlevel: 2,
         data: Ydata1,
      },
      {
         name: '2',
         type: 'pictorialBar',
         symbolSize: [barWidth, 10],
         symbolOffset: ['81%', -5],
         symbolPosition: 'end',
         z: 15,
         color: '#3aa8ff',
         zlevel: 2,
         data: Ydata2,
      },

      {
         name: '1',
         type: 'bar',
         barGap: '60%',
         barWidth: barWidth,
         itemStyle: {
            //
            // color: '',
            color: color1,
            borderColor: color1,
            borderWidth: 1,
            borderType: 'solid',
         },
         label: {
            show: true,
            position: 'top',
            // color: 'rgba(119,167,255,1)',
            color: '#fff',
            fontSize: 12,
            textAlign: 'center',
         },
         zlevel: 2,
         data: Ydata1,
      },
      {
         name: '2',
         type: 'bar',
         barGap: '60%',
         barWidth: barWidth,
         itemStyle: {
            // color: 'rgba(255,164,41,.16)',
            color: color2,
            borderColor: color2,
            borderWidth: 1,
            borderType: 'solid',
         },
         label: {
            show: true,
            position: 'top',
            color: '#fff',
            fontSize: 12,
            textAlign: 'center',
         },
         zlevel: 2,
         data: Ydata2,
      },
      {
         name: '黄色底座',
         type: 'pictorialBar',
         symbolSize: [barWidth, 10],
         symbolOffset: ['-81%', 5],
         z: 12,
         color: '#ffa876',
         data: [
            {
               name: '',
               value: '100',
            },
            {
               name: '',
               value: '100',
            },
            {
               name: '',
               value: '100',
            },
         ],
      },
      {
         name: '蓝色底座',
         type: 'pictorialBar',
         symbolSize: [barWidth, 10],
         symbolOffset: ['81%', 5],
         z: 12,
         color: '#3aa8ff',
         show: false,
         data: [
            {
               name: '',
               value: '100',
            },
            {
               name: '',
               value: '100',
            },
            {
               name: '',
               value: '100',
            }
         ],
      }
   ],
};