Echarts在线免费图表

 
            let xAxisData = ['生产计划1', '生产计划2', '生产计划3', '生产计划4', '生产计划5', '生产计划6', '生产计划7', '生产计划8', '生产计划9', '生产计划10', '生产计划11', '生产计划12', '生产计划（进行中）'];
let legendData = ['预计出产率', '已完成出产率'];
let serieData = [];
let metaDate = [
   ['', 58, 58.5, 59.3, 58, 57, 56, 55.5, 55.8, 56, 56.1, 56.2, 59],
   [58, 59, 61, 54, 53, 51, 51, 53, 58, 58, 57, 57]
];

for (let v = 0; v < legendData.length; v++) {
   let serie = {
      name: legendData[v],
      type: 'line',
      symbol: "circle",
      symbolSize: 10,
      data: metaDate[v]
   };
   serieData.push(serie);
}
let colors = ["#f59a23", "#1890ff "];
option = {
   // backgroundColor: '#eee',
   legend: {
      show: true, left: "right", data: legendData, y: "5%",
      itemWidth: 18, itemHeight: 12, textStyle: { color: "#000", fontSize: 14 },
   },
   color: colors,
   grid: { left: '2%', top: "12%", bottom: "5%", right: "5%", containLabel: true },
   tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
   xAxis: [
      {
         type: 'category',
         axisLine: { show: true, lineStyle: { color: '#000' } },
         axisLabel: { interval: 0, textStyle: { color: '#000', fontSize: 14 } },
         axisTick: { show: false },
         data: xAxisData,
      },
   ],
   yAxis: [
      {
         type: 'value',
         name: "出产率（Kg/㎡）",
         nameTextStyle: {
            color: "#000",
            fontFamily: "Alibaba PuHuiTi",
            fontSize: 14,
            // fontWeight: 600,
            padding: [0, 0, 0, 30]
         },
         axisTick: { show: false },
         splitLine: { show: false },
         axisLabel: { textStyle: { color: '#000', fontSize: 14 } },
         axisLine: { show: true, lineStyle: { color: '#000' } },
      },
   ],
   series: serieData
};