Echarts在线免费图表

 
            let dataArr = [{
   value: 96,
   name: '未穿反光衣',
   itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
         {
            offset: 0,
            color: '#1d456f'
            },
            {
            offset: 1,
            color: '#3e96c3'
            }
         ])
      }
   },
   {
   value: 90,
   name: '未戴安全帽',
   itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
         {
            offset: 0,
            color: '#1d456f'
            },
            {
            offset: 1,
            color: '#3e96c3'
            }
         ])
      }
   },
   {
      value: 80,
      name: '戴安全帽',
      itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
         {
            offset: 0,
            color: '#1d456f'
            },
            {
            offset: 1,
            color: '#3e96c3'
            }
         ])
      }
   },
   {
   value: 60,
   name: '穿反光衣',
   itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
         {
            offset: 0,
            color: '#1d456f'
            },
            {
            offset: 1,
            color: '#3e96c3'
            }
         ])
      }
   }
];

let lab = '//img.isqqw.com/profile/upload/2023/11/15/fabee49f-3e3b-45a6-a5d5-2780f5684bde.png';

option = {
   backgroundColor: '#021334',

   xAxis: {
      show: false
   },
   tooltip: {
      show: true
   },
   yAxis: [
      {
         triggerEvent: true,
         show: true,
         data: ['未穿反光衣','未戴安全帽','戴安全帽','穿反光衣'],
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         axisLabel: {
            interval: 0,
            inside: true,
            color: '#fff',
            margin: 0,
            padding: [0, 0, 10, 0],
            align: 'left',
            verticalAlign: 'bottom',
            formatter: function (value, index) {
               // return '{title|' + value + '}:{index|' + dataArr[index].value + '%}';
               return `{title|${value}}: {index|  ${dataArr[index].value }%}`;
              
            },
            rich: {
               // 此title对应的是 formatter|前的title
               title: {
                  fontSize: 14
               },
               // 此index对应的是 formatter|前的index
               index: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  // padding: [0,0,0,600],
                  // backgroundColor:'red',
                  align: 'left',
                  width: '100%',
               }
            }
         }
      },
      {
         show: true,
         offset: 35,
         data: ['1','2','3','4'],
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         axisLabel: {
            show: true,
            margin: 0,
            interval: 0,
            inside: true,
            padding: [0, 30, 25, 0],
            color: '#fff',
            fontSize: 14,
            align: 'right'
         }
      }
   ],
   series: [
      {
         type: 'bar',
         barMinWidth: '5',
         yAxisIndex: 0,
         data: dataArr,
         barWidth: 2,
         z: 1,
         itemStyle: {
            normal: {
               barBorderRadius: 20
            }
         }
      },
      {
         data: dataArr,
         type: 'pictorialBar',
         barMaxWidth: 20,
         symbolPosition: 'end',
         symbol: 'image://' + lab,
         symbolOffset: [10, 0],
         symbolSize: [20, 20],
         zlevel: 2,
         silent: true
      },
      {
         type: 'bar',
         barGap: '-100%',
         yAxisIndex: 0,
         data: [100,100,100,100],
         barWidth: 5,
         itemStyle: {
            barBorderRadius: 0,
            color: '#132C5A'
         },
         z: 0,
         silent: true
      }
   ]
};