Echarts在线免费图表

 
            var option = {
   grid: {
      top: 40,
      bottom: 40,
      left: 40,
      right: 40
   },
   tooltip: {
      trigger: 'axis',
      position: function (point, params, dom, rect, size) {
         return [point[0] - 100, '10%'] //返回x、y（横向、纵向）两个点的位置
      },
      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>
          <div>${data[2].marker} ${data[2].seriesName}: ${data[2].value}</div>
          <div>${data[3].marker} ${data[3].seriesName}: ${data[3].value}</div>
          <div>${data[4].marker} ${data[4].seriesName}: ${data[4].value}%</div>
          <div>${data[5].marker} ${data[5].seriesName}: ${data[5].value}%</div>
          <div>${data[6].marker} ${data[6].seriesName}: ${data[6].value}%</div>
          <div>${data[7].marker} ${data[7].seriesName}: ${data[7].value}%</div>
          `
         return html
      }
      // trigger: 'item',
      // formatter: `{a} {b} {c}`
   },
   calculable: true,
   legend: {
      show: false,
      data: ['工单数量', '环比']
   },
   xAxis: [
      {
         type: 'category',
         axisLabel: {
            // rotate: 45 // 旋转角度
         },
         data: [
            'A',
            'B',
            'C',
            'D',
         ]
      }
   ],
   yAxis: [
      {
         type: 'value',
         name: '数量',
         axisLabel: {
            formatter: '{value}'
         }
      },
      {
         type: 'value',
         name: '环比',
         axisLabel: {
            formatter: '{value}%'
         }
      }
   ],
   series: [
      {
         name: '第一周',
         type: 'bar',
         label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
               console.log(params)
               return params.seriesName + '\n' + params.value;
            }
         },
         data: [10, 20, 30, 40]
      },
      {
         name: '第二周',
         type: 'bar',
         label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
               console.log(params)
               return params.seriesName + '\n' + params.value;
            }
         },
         data: [20, 30, 40, 50]
      },
      {
         name: '第三周',
         type: 'bar',
         label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
               console.log(params)
               return params.seriesName + '\n' + params.value;
            }
         },
         data: [30, 40, 50, 60]
      },
      {
         name: '第四周',
         type: 'bar',
         label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
               console.log(params)
               return params.seriesName + '\n' + params.value;
            }
         },
         data: [40, 50, 60, 70]
      },
      {
         name: '第一周环比',
         type: 'line',
         yAxisIndex: 1,
         label: {
            show: true,
            position: 'top',
            formatter: `{c}%`
         },
         data: [10, 20, 30, 40]
      },
      {
         name: '第二周环比',
         type: 'line',
         yAxisIndex: 1,
         label: {
            show: true,
            position: 'top',
            formatter: `{c}%`
         },
         data: [20, 30, 40, 50]
      },
      {
         name: '第三周环比',
         type: 'line',
         yAxisIndex: 1,
         label: {
            show: true,
            position: 'top',
            formatter: `{c}%`
         },
         data: [30, 40, 50, 60]
      },
      {
         name: '第四周环比',
         type: 'line',
         yAxisIndex: 1,
         label: {
            show: true,
            position: 'top',
            formatter: `{c}%`
         },
         data: [40, 50, 60, 70]
      },
   ]
}