Echarts在线免费图表

 
            const resultData = [
   {
      value: 335,
      name: '测试文字比较长的情况隐藏',
   },
   {
      value: 1335,
      name: '2轮',
   },
   {
      value: 235,
      name: '3轮',
   },

   {
      value: 635,
      name: '4轮',
   },
]

option = {
   //你的代码
   backgroundColor: "#061740",
   dataZoom: [
      {
         type: 'slider', // 内置在坐标系中

         height: 0,
         zoomLock: true,
         realtime: true,
         show: false,
         startValue: 0, // 从头开始。
         endValue: 10, // 一次性展示 10个。
      },
   ],
   tooltip: {
      trigger: 'axis',
      formatter(param) {
         let html = ''
         if (param.length > 0) {
            const { value, marker } = param[0]
            html += `${marker}${value.name}:${value.value}个`
         }
         return html
      },
   },
   grid: {
      top: '15%',
      bottom: '5%',
      left: '5%',
      right: '5%',
      containLabel: true,
   },
   dataset: [
      {
         source: resultData,
         dimensions: ['name', 'value'],
      },
   ],
   xAxis: [
      {
         type: 'category',
         axisLabel: {
            interval: 0,
            color: '#fff',
            fontSize: 13,
            rotate: this.xRotate ? this.xRotate : 0,
            formatter(val) {
               const name = val.length > 6 ? `${val.substr(0, 5)}..` : val
               return name
            },
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: 'rgba(255, 255, 255, 0.4)',
            },
         },
         axisTick: {
            show: false,
         },
         axisPointer: {
            type: 'shadow',
         },
      },
   ],
   yAxis: [
      {
         type: 'value',
         nameTextStyle: {
            color: '#fff',
            padding: [0, 0, 0, -30],
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: 'rgba(255, 255, 255, 0.4)',
            },
         },
         axisLabel: {
            interval: 0,
            color: 'rgba(207,227,252,1)',
         },
         splitLine: {
            show: false,
            lineStyle: {
               type: 'dashed',
               color: '#004B97',
            },
         },
      },
   ],
   series: [

      {
         //柱体
         name: '',
         type: 'bar',
         barWidth: 27,
         barGap: '0%',
         itemStyle: {
            normal: {
               color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                     { offset: 1, color: 'rgba(47, 160, 255, 1)' },
                     { offset: 0, color: 'rgba(47, 160, 255, .1)' },
                  ],
               },
            },
         },
         encode: {
            x: 'name',
            y: 'value',
         },
      },
      {
         //柱子顶部
         name: '',
         type: 'pictorialBar',
         symbolSize: [29, 2],
         symbolOffset: [-1, -6],
         symbolPosition: 'end',
         label: {
            show: true,
            position: 'top',
            textStyle: {
               fontSize: 10,
               color: '#fff',
            },
         },
         itemStyle: {
            normal: {
               color: '#2FA0FF',
            },
         },
         encode: {
            x: 'name',
            y: 'value',
         },
      },
   ],
};