Echarts在线免费图表

 
            var data = [
      {name: "圆柱体1", value: 20},
      {name: "圆柱体2", value: 13},
   ],
   xAxisText = [],
   dataList = [];
data.forEach((item, index) => {
   xAxisText.push(item.name);
   dataList.push(item.value);
})

const data2 = [
   {name: "圆柱体1", value: 1},
   {name: "圆柱体2", value: 1},
]

option = {
   color: ['#1A64F8'],
    backgroundColor: '#115599',
   tooltip: {
      show: false
   },
   grid: {
      left: '10%',
      right: 10,
      top: '35%',
      bottom: '10%',
   },
   xAxis: [
      {
         type: 'category',
         data: xAxisText,
         axisTick: {
            show: true
         },
         axisLabel: {
            interval: 0,
            color: '#fff',
            margin: 20,
            align: 'center',
            fontSize: 16
         },
         axisLine: {
            show: true,
            lineStyle: {
                color: '#fff'
            }
         }

      }
   ],
   yAxis: {
      axisLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      axisLabel: {
         show: true,
         color: 'rgba(255, 255, 255, 0.85)'
      },
      splitLine: {
         show: true,
         lineStyle: {
               type: 'dashed',
               color: 'rgba(255, 255, 255, 0.2)'
            }
      }
   },
   series: [
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [50, 8],
         symbolOffset: [0, -19],
         symbolPosition: 'end',
         z: 12,
         label: {
            normal: {
               show: true,
               position: 'top',
               // fontWeight: 'bold',
               color: '#fff',
               fontSize: 14
            }
         },
         itemStyle: {
            normal: {
               color: (params) => {
                  // let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  //    offset: 0,
                  //    color: 'rgba(254, 174, 162, 1)',
                  // },
                  // {
                  //    offset: 1,
                  //    color: 'rgba(253, 114, 112, 1)',
                  // },
                  // ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  //    offset: 0,
                  //    color: 'rgba(123, 200, 255, 1)',
                  // },
                  // {
                  //    offset: 1,
                  //    color: 'rgba(53, 157, 245, 1)',
                  // },
                  // ])]
                  let colors=['rgba(255, 182, 134, 1)', '#0b8cd6']
                  return colors[params.dataIndex]
               },
               barBorderRadius: [30, 30, 0, 0] //圆角大小
            },
         },
         data: dataList
      },
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [50, 12],
         symbolOffset: [0, -4],
         symbolPosition: 'end',
         z: 12,
         itemStyle: {
            normal: {
               color: (params) => {
                  let colors=['rgba(255, 255, 255, 1)', 'rgba(53, 157, 245, 1)']
                  return colors[params.dataIndex]
               },
               barBorderRadius: [30, 30, 0, 0] //圆角大小
            },
         },
         data: dataList
      },
      {
         stack: '1',
         type: 'bar',
         showBackground: false,
         backgroundStyle: {
            color: 'rgba(216, 229, 247, 0.55)',
            borderRadius: [6, 6, 0, 0]
         },
         itemStyle: {
            normal: {
               color: (params) => {
                  let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: 'rgba(254, 174, 162, 1)',
                  },
                  {
                     offset: 1,
                     color: 'rgba(253, 114, 112, 1)',
                  },
                  ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: 'rgba(20, 162, 237, 0.7)',
                  },
                  {
                     offset: 1,
                     color: 'rgba(20, 162, 237, 0.1)',
                  },
                  ])]
                  return colors[params.dataIndex]
               },            
            },
         },
         barWidth: '50',
         data: dataList
      },
      {
      //上部立体柱
      stack: '1',
      type: 'bar',
      itemStyle: {
            normal: {
               color: (params) => {
                  let colors=['rgba(253, 114, 112, 1)', 'rgba(53, 157, 245, 1)']
                  return colors[params.dataIndex]
               },
            },
         },
      silent: true,
      barWidth: 50,
      data: data2
    }
   ]
}