Echarts在线免费图表

 
            // import arrow from '@/assets/images/arrow.png'
let chartData = [
   {
      name: 'xxx事项',
      value: 245,
   },
   {
      name: 'xxx事项',
      value: 211,
   },
   {
      name: 'xxx事项',
      value: 165,
   },
   {
      name: 'xxx事项',
      value: 145,
   },
   {
      name: 'xxx事项',
      value: 128,
   },
]
option = {
   backgroundColor: '#1c2879',
   xAxis: {
      splitLine: {
         show: false,
      },
      axisLabel: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitArea: { show: false },
      axisLine: {
         show: false,
      },
   },
   grid: {
      top: 0,
      bottom: 0,
      left: '5%',
   },
   yAxis: {
      inverse: true,
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      axisLabel: {
         textStyle: {
            color: '#fff',
            padding: [-15, 0, 35, 18],
         },
         formatter(value, index) {
            let str = '', num = 'TOP' + (index + 1)
            if (index === 0) {
               str = '{a| ' + num + '}{title| ' + value + '}'
            } else if (index === 1) {
               str = '{b| ' + num + '}{title| ' + value + '}'
            } else if (index === 2) {
               str = '{c| ' + num + '}{title| ' + value + '}'
            } else {
               str = '{d| ' + num + '}{title| ' + value + '}'
            }
            return str
         },
         rich: {
            a: {
               borderColor: '#EE6F7C',
               borderWidth: 1,
               borderRadius: [0, 10, 10, 0],
               padding: [3.5, 10, 1, -13],
               backgroundColor: 'rgba(238, 111, 124, 0.8)',
            },
            b: {
               borderColor: '#FFCF5F',
               borderWidth: 1,
               borderRadius: [0, 10, 10, 0],
               padding: [3.5, 10, 1, -13],
               backgroundColor: 'rgba(255, 207, 95, 0.7)',
            },
            c: {
               borderColor: '#00E8FF',
               borderWidth: 1,
               borderRadius: [0, 10, 10, 0],
               padding: [3.5, 10, 1, -13],
               backgroundColor: 'rgba(0, 232, 255, 0.7)',
            },
            d: {
               borderColor: '#1A90FF',
               borderWidth: 1,
               borderRadius: [0, 10, 10, 0],
               padding: [3.5, 10, 1, -13],
               backgroundColor: 'rgba(26, 144, 255, 0.7)',
            },
            title: {
               padding: [0, 0, 0, 3],
            },
         },
         align: 'left',
      },
      data: chartData.map((item) => item.name),
   },
   series: [
      {
         type: 'pictorialBar',
         symbol: 'rect',
         symbolRotate: 30,
         symbolRepeat: 'fixed',
         symbolClip: true,
         symbolOffset: [0, -1.5],
         symbolSize: [2, 12],
         symbolMargin: '3',
         itemStyle: {
            normal: {
               color: '#000726',
            },
         },
         label: {
            show: true,
            color: '#fff',
            fontFamily: 'Bebas',
            fontSize: 12,
            offset: [-9, -1.5],
            position: 'right',
            formatter(params) {
               let result = ''
               switch (params.dataIndex) {
                  case 0:
                     result = '{img|}{index0|' + params.value + '}{unit|件}'
                     break
                  case 1:
                     result = '{img|}{index1|' + params.value + '}{unit|件}'
                     break
                  case 2:
                     result = '{img|}{index2|' + params.value + '}{unit|件}'
                     break
                  default:
                     result = '{img|}{index3|' + params.value + '}{unit|件}'
                     break
               }
               return result
            },
            rich: {
               img: {
                  height: 18,
                  width: 20,
                  // backgroundColor: { image: arrow },这个图片自己切，这里上传不了（加了一个尾巴的形状）
               },
               unit: {
                  color: '#fff',
                  fontSize: 11,
               },
               index0: {
                  color: '#ee6f7c',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
               },
               index1: {
                  color: '#ffcf5f',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
               },
               index2: {
                  color: '#00e8ff',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
               },
               index3: {
                  color: '#fff',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
               },
            },
         },
         symbolBoundingData: Math.max(...chartData.map((item) => item.value)) * 1.3,
         data: chartData.map((item) => item.value),
         z: 2,
      },
      {
         type: 'bar',
         barWidth: 10,
         data: chartData.map((item) => item.value),
         itemStyle: {
            normal: {
               color: '#00F7F0',
            },
         },
         z: 1,
      },
      {
         type: 'bar',
         barGap: '-125%', // 设置外框粗细
         data: chartData.map((items) => Math.max(...chartData.map((item) => item.value)) * 1.3),
         barWidth: 15,
         itemStyle: {
            color: 'none',
            borderColor: 'rgba(64, 245, 245, 0.5)',
         },
         z: 0,
      },
   ],
};