Echarts在线免费图表

 
            let dataArr = [{
   value: 96,
   name: '销售进度-本年',
   itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
         {
            offset: 0,
            color: 'rgb(11,53,95)'
            },
            {
            offset: 1,
            color: '#0084FF'
            }
         ])
      }
   },
   {
   value: 90,
   name: '销售进度-本月',
   itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
         {
            offset: 0,
            color: '#1d4158'
            },
            {
            offset: 1,
            color: '#93E68F'
            }
         ])
      }
   },
   {
      value: 80,
      name: '税率销售进度-本年',
      itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
         {
            offset: 0,
            color: 'rgb(11,53,95)'
            },
            {
            offset: 1,
            color: '#0084FF'
            }
         ])
      }
   },
   {
   value: 60,
   name: '税率销售进度-本月',
   itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
         {
            offset: 0,
            color: '#1d4158'
            },
            {
            offset: 1,
            color: '#93E68F'
            }
         ])
      }
   }
];

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 + '%}';
            },
            rich: {
               title: {
                  fontSize: 14
               },
               index: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  padding: [0,0,0,10]
               }
            }
         }
      },
      {
         show: true,
         offset: 35,
         data: ['销售进度-本年','销售进度-本月','税率销售进度-本年','税率销售进度-本月'],
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         axisLabel: {
            show: false,
            margin: 0,
            interval: 0,
            inside: true,
            padding: [0, 0, -5, 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: [5, -5],
         symbolSize: [15, 15],
         zlevel: 2,
         silent: true
      },
      {
         type: 'bar',
         barGap: '-100%',
         yAxisIndex: 0,
         data: [100,100,100,100],
         barWidth: 15,
         itemStyle: {
            barBorderRadius: 0,
            color: '#132C5A'
         },
         z: 0,
         silent: true
      }
   ]
};