Echarts在线免费图表

 
            let total = 0;
let maleValue = 35;
let femaleValue = 15;
total = maleValue + femaleValue;

let malePercent = total === 0 ? 0 : parseFloat((maleValue / total * 100).toFixed(2));
let femalePercent = total === 0 ? 0 : parseFloat((femaleValue / total * 100).toFixed(2));
let option = {
   backgroundColor: '#00266b',
   legend: {},
   //在坐标系内绘制
   grid: [{
      left: '7%',
      bottom: '15%',
      top: '45%',
      right: '7%',
      containLabel: true
   }],
   //x 轴
   xAxis: {
      max: 100,
      splitLine: {
         show: false
      },
      axisLabel: {
         show: false
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
   },
   //y 轴
   yAxis: {
      data: ['a'],
      axisLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      splitLine: {
         show: false
      },
      axisLabel: {
         show: false
      }
   },
   //展示层
   series: [
      //目标数据
      {
         type: 'pictorialBar',
         symbolBoundingData: 100,
         symbolRotate: -15,
         symbolSize: [4, 16],
         symbolOffset: [4, 0],
         symbolMargin: 1.5,
         barWidth: 20,
         itemStyle: {
            normal: {
               color: '#17bdfd'
            }
         },
         z: 20,
         label: {
            show: true,
            position: 'left',
            align: 'left',
            distance: 16,
            color: '#5cf6fa',
            fontSize: 12,
            offset: [20, -25],
            formatter() {
               return '男 ' + malePercent + '% ' + maleValue + '人'
            }
         },
         data: [
            {
               value: malePercent,
               symbol: 'rect',
               symbolClip: true,
               symbolRepeat: true,
            }
         ]
      },
      //背景数据
      {
         type: 'pictorialBar',
         symbolBoundingData: 100,
         symbolRotate: -15,
         symbolSize: [4, 16],
         symbolOffset: [4, 0],
         symbolMargin: 1.5,
         barWidth: 20,
         z: 15,
         itemStyle: {
            normal: {
               color: '#ffa732'
            }
         },
         label: {
            show: true,
            position: 'right',
            align: 'right',
            distance: 16,
            color: '#feca54',
            fontSize: 12,
            offset: [-20, -25],
            formatter() {
               return '女 ' + femalePercent + '% ' + femaleValue + '人'
            }
         },
         data: [{
            symbol: 'rect',
            value: 100,
            symbolClip: true,
            symbolRepeat: true,
         }]
      },
      {
         type: 'pictorialBar',
         symbolBoundingData: 100,
         barWidth: 20,
         z: 1,
         itemStyle: {
            normal: {
               color: '#003781',
               borderWidth: 1,
               borderColor: '#0096ff',
            }
         },
         data: [{
            symbol: 'rect',
            value: 100,
         }]
      }
   ]
};