Echarts在线免费图表

 
            var option = {
   grid: {
      top: 40,
      bottom: 40,
      left: 40,
      right: 40
   },
   tooltip: {
      trigger: 'axis',
      formatter: function (data) {
         console.log(data)
         let html = ``
         html = `
          <div>${data[0].name}</div>
          <div>${data[0].marker} ${data[0].seriesName}: ${data[0].value}</div>
          <div>${data[1].marker} ${data[1].seriesName}: ${data[1].value}%</div>
          `
         return html
      }
   },
   calculable: true,
   legend: {
      data: ['工单数量', '占比']
   },
   xAxis: [
      {
         type: 'category',
         axisLabel: {
            rotate: 45 // 旋转角度
         },
         data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
         ]
      }
   ],
   yAxis: [
      {
         type: 'value',
         name: '数量',
         axisLabel: {
            formatter: '{value}'
         }
      },
      {
         type: 'value',
         name: '占比',
         axisLabel: {
            formatter: '{value}%'
         }
      }
   ],
   series: [
      {
         name: '工单数量',
         type: 'bar',
         label: {
            show: true,
            position: 'inside'
         },
         data: [
            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
         ]
      },
      {
         name: '占比',
         type: 'line',
         yAxisIndex: 1,
         label: {
            show: true,
            position: 'top',
            formatter: `{c}%`
         },
         data: [
            2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
         ]
      }
   ]
}