Echarts在线免费图表

 
            let barColor = '#D4B538';
let barWidth = 300;
let hexToRgba = (hex, opacity) => {
   return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')';
}
let getColorValue = (rgba, index) => {
   var rgb = rgba.match(/(\d(\.\d+)?)+/g);
   return rgb[index];
}
if (barColor.indexOf('#') > -1) {
   barColor = hexToRgba(barColor, 1);
}
const name = ['甲', '已']
const value = [45, 55]
let sum = value.reduce((a, b) => {
   return a + b
}, 0)
option = {
   backgroundColor: "#000",
   tooltip: {
      trigger: 'none'
   },
   xAxis: {
      data: ['百分比'],
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         show: false,
      }
   },
   yAxis: {
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      axisLabel: {
         show: false
      }
   },
   series: [
      {
         name: '最上层立体圆',
         type: 'pictorialBar',
         symbolSize: [barWidth, 45],
         symbolOffset: [0, -20],
         z: 12,
         itemStyle: {
            normal: {
               color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.6)'
            }
         },
         data: [
            {
               value: sum,
               symbolPosition: 'end'
            }
         ]
      },
      {
         name: '中间立体圆',
         type: 'pictorialBar',
         symbolSize: [barWidth, 45],
         symbolOffset: [0, -20],
         z: 12,
         itemStyle: {
            normal: {
               color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.4)',
            }
         },
         data: [
            {
               value: value[0],
               symbolPosition: 'end'
            }
         ]
      },
      {
         name: '最底部立体圆',
         type: 'pictorialBar',
         symbolSize: [barWidth, 45],
         symbolOffset: [0, 20],
         z: 12,
         itemStyle: {
            normal: {
               color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.6)',
            }
         },
         data: [value[1]]
      },
      {
         //底部立体柱
         stack: '1',
         type: 'bar',
         name: name[0],
         itemStyle: {
            normal: {
               color: () =>
                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                     {
                        offset: 0,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.15)',
                     },
                     {
                        offset: 0.15,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + '0.7)'
                     },
                     {
                        offset: 0.5,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0)'
                     },
                     {
                        offset: 0.85,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.7)'
                     },
                     {
                        offset: 1,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.15)'
                     }
                  ])
            }
         },
         label: {
            distance: 15,
            show: true,
            position: 'right',
            formatter: '{a}\n{c}',
            fontSize: 50,
            color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',1)'
         },

         silent: true,
         barWidth: barWidth,
         barGap: '-100%',
         data: [value[0]]
      },
      {
         //上部立体柱
         stack: '1',
         type: 'bar',
         name: name[1],
         itemStyle: {
            normal: {
               color: () =>
                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                     {
                        offset: 0,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.15)'
                     },
                     {
                        offset: 0.15,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.3)'
                     },
                     {
                        offset: 0.5,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0)'
                     },
                     {
                        offset: 0.85,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.3)'
                     },
                     {
                        offset: 1,
                        color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',0.15)'
                     }
                  ])
            }
         },
         label: {
            distance: 15,
            show: true,
            position: 'right',
            formatter: '{a}\n{c}',
            fontSize: 50,
            color: 'rgba(' + getColorValue(barColor, 0) + ',' + getColorValue(barColor, 1) + ',' + getColorValue(barColor, 2) + ',1)'
         },
         silent: true,
         barWidth: barWidth,
         barGap: '-100%', // Make series be overlap
         data: [value[1]]
      }
   ]
};