Echarts在线免费图表

 
            let timeData = ['8', '9', '10', '11','12','13','14']
option = {
  title: {
    text: '工序达成率'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  legend: {
    data: ['混料', '注塑',"组装"],
    right: 20
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },
  grid: [
    {
      left: 60,
      right: 50,
      height: '35%'
    },
    {
      left: 60,
      right: 50,
      top: '55%',
      height: '35%'
    }
  ],
  xAxis: [
    {
      type: 'category',
      data: timeData,
      show:false
    },
    {
      gridIndex: 1,
      type: 'category',
      data: timeData,
    }
  ],
  yAxis: [
    {
      name: '达成率(%)',
      type: 'value',
    },
    {
      gridIndex: 1,
      name: '达成率(%)',
      type: 'value'
    }
  ],
  series: [
    {
      name: '混料',
      xAxisIndex:0,
      yAxisIndex:0,
      type: 'line',
      symbolSize: 8,
      data: [97,80,85,65,89,90,88]
    },
    {
      name: '注塑',
      yAxisIndex:0,
      type: 'line',
      symbolSize: 8,
      data: [97,92,96,91,97,95,93]
    },
    {
      name: '组装',
      yAxisIndex:0,
      type: 'line',
      symbolSize: 8,
      data: [96,95,100,98,99,87,99],
      itemStyle: {
            color: '#12C2C1',
         }
    },
    {
      name: '混料',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      symbolSize: 8,
      barWidth: '16',
      data: [97,80,85,65,89,90,88]
    },
     {
      name: '注塑',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      symbolSize: 8,
      barWidth: '16',
      data: [97,92,96,91,97,95,93]
    },
     {
      name: '组装',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      symbolSize: 8,
      barWidth: '16',
      data: [96,95,100,98,99,87,99],
      itemStyle: {
            color: '#12C2C1',
         }
    }
  ]
};