Echarts在线免费图表

 
            
let unit = ['个', 'min']
option = {
   backgroundColor: '#000',
   grid: {
      top: '15%',
      left: '4%',
      right: '4%',
      bottom: '2%',
      containLabel: true,
   },
   tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.6)',
      borderColor: 'rgba(0,0,0,0.6)',
      confine: true,
      padding: 5, // 提示框浮层内边距，单位px
      textStyle: {
         color: '#FFFFFF',
         fontSize: 13,
      },
      formatter: function (params) {
         let str = '';
         for (let i = 0; i < params.length; i++) {
            str = str + (params[i].seriesName + ' ' + params[i].value + unit[i]) + '<br/>';
         }
         return str;
      },
   },
   legend: {
      show: true,
      icon: 'rect',
      orient: 'horizontal',
      top: '6%',
      y: 'center',
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
         color: '#FFFFFF',
         fontSize: 14,
      },
      data: [
         { name: '处理数量', icon: 'circle' },
         { name: '处理时长', icon: 'circle' },
      ],
   },
   xAxis: [
      {
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
         axisLabel: {
            // 坐标轴刻度标签的相关设置
            show: true, // 是否展示坐标轴label
            color: '#FFFFFF',
            fontSize: 14,
            interval: 'auto',
         },
         type: 'category',
         data: ['0422', '0423', '0424', '0425', '0426', '0427', '0428'],
      },
   ],
   yAxis: [
      {
         name: '(单位:' + unit[0] + ')',
         nameTextStyle: {
            color: '#efefef',
            fontSize: 14,
            align: 'right',
         },
         type: 'value',

         min: 0,
         axisLabel: {
            // 坐标轴刻度标签的相关设置
            show: true, // 是否展示坐标轴label
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 12,
            formatter: '{value}', // 格式化label
         },
         axisLine: {
            show: false,
            lineStyle: {
               color: 'rgba(0,0,0,0.5)',
            },
         },
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
      },
      {
         name: '(单位:' + unit[1] + ')',
         nameTextStyle: {
            color: '#efefef',
            fontSize: 14,
         },
         type: 'value',

         min: 0,
         axisLabel: {
            // 坐标轴刻度标签的相关设置
            show: true, // 是否展示坐标轴label
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 12,
            formatter: '{value}', // 格式化label
         },
         axisLine: {
            show: false,
            lineStyle: {
               color: 'rgba(0,0,0,0.5)',
            },
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: 'rgba(255,255,255,0.2)', // 线条颜色
               // width: 1,
               type: 'solid', // 线条样式，默认是实现，dashed是虚线
            },
         },
         axisTick: {
            show: false,
         },
      },
   ],
   series: [
      {
         name: '处理数量',
         type: 'pictorialBar',
         barGap: '0%',
         barWidth: 40,
         symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
         // barGap:10,
         color: '#247FFF',
         data: [71, 82, 89, 100, 73, 83, 72],
         itemStyle: {
            color: new echarts.graphic.LinearGradient(
               0,
               1,
               0,
               0,
               [
                  {
                     offset: 0,
                     color: 'rgba(49, 232, 255, 0.68)', // 0% 处的颜色
                  },
                  {
                     offset: 0.4,
                     color: 'rgba(149, 231, 212, 1)', // 100% 处的颜色
                  },
               ],
               false
            ),
         },
         emphasis: {
            disabled: true,
            focus: 'none',
         },
      },
      {
         yAxisIndex: 1,
         name: '处理时长',
         type: 'pictorialBar',
         barGap: '-30%',
         symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
         barWidth: 40,
         // barGap:10,
         color: '#247FFF',
         data: [92, 58, 26, 52, 100, 41, 70],
         itemStyle: {
            color: new echarts.graphic.LinearGradient(
               0,
               1,
               0,
               0,
               [
                  {
                     offset: 0,
                     color: 'rgba(255, 148, 148, 0.2)', // 0% 处的颜色
                  },
                  {
                     offset: 0.4,
                     color: 'rgba(255, 148, 148, 1)', // 100% 处的颜色
                  },
               ],
               false
            ),
         },
         emphasis: {
            disabled: true,
            focus: 'none',
         },
      },
   ],
}