Echarts在线免费图表

 
            let xAxisData = ["中国境内", "新加坡", "香港", "英国", "美国"]
let seriesData = [100, 200, 300, 400, 300]

let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]

var obj = {
   0: '2.25%',
   1: '41.54%',
   2: '32.88%',
   3: '16.77%',
   4: '5.43%',
};
option = {
   backgroundColor: '#0c2d55',
   grid: {
      left: '15%',
      right: '15%',
      top: '15%',
      bottom: '18%',
      containLabel: true,
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'none'
      },
      formatter: function (params) {
         return params[0].name + ': ' + params[0].value;
      }
   },
   xAxis: {
      data: xAxisData,
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: {
         interval: 0,
         fontSize: 24,
         color: "#fff",
         fontFamily: 'siyuan',
         margin: 15,
         fontWeight: 'bold'
      },
   },
   yAxis: {
      splitLine: { show: false },
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: { show: false }
   },
   color: ['#e54035'],
   series: [{
      name: 'hill',
      type: 'pictorialBar',
      barCategoryGap: '-130%',
      symbolClip: true,
      // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
      itemStyle: {
         normal: {
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               colorStops: [{
                  offset: 0,
                  // color: '#F7C233'
                  color: colorArr[1][0]
               },
               {
                  offset: 1,
                  // color: 'rgba(217,215,153,0.35)'
                  color: colorArr[1][1]
               }
               ],
               global: false //  缺省为  false
            }
         },
         emphasis: {
            opacity: 1
         },
         //             borderColor: "#d1ae36",
         //    borderWidth: 4
      },
      label: {
         show: true,
         position: 'top',
         offset: [0, 0],
         color: 'red',
         formatter: '{c}',
         fontSize: 24,
         color: "#fff",
         fontFamily: 'siyuan',
         fontWeight: 'bold'
      },
      emphasis: {
         itemStyle: {
            opacity: 1
         }
      },
      // data: [123, 60, 25, 18, 12,],
      data: seriesData,
      z: 10
   }]
};