Echarts在线免费图表

 
            let option = {
      title: {
        text: '生产OEE',
        textStyle: {
            color: '#fff',
        }
    },
    backgroundColor: '#0c2d55',
    grid: {
      top: '20%',
      left: '5%',
      right: '5%',
      bottom: '8%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: "rgba(1, 13, 19, 0.5)",
      borderWidth: 1,
      axisPointer: {
        type: 'shadow',
        // label: {
        //   show: true,
        // },
      },
      formatter: function (params) {
        var str = "";
        if (params.length > 0) {
          str = params[0].name + "<br/>"
        }
        for (var i = 0; i < params.length; i++) {
          if (params[i].seriesName !== "") {
            str +=
              params[i].seriesName +
              ':' +
              params[i].value +
              "%<br/>";
          }
        }
        return str;
      },
      textStyle: {
        color: "rgba(212, 232, 254, 1)",
        // fontSize: fontChart(0.24),
      },
      extraCssText: "z-index:2"
    },
    legend: {
      left: "center",
      top: 30,
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 15,
      borderRadius: 4,
      textStyle: {
        color: "#FFF",
        fontFamily: "Alibaba PuHuiTi",
        fontSize: 14,
        fontWeight: 400,
      },
    },
    xAxis: {
      type: 'category',
      data: ['前第7天', '前第6天', '前第5天', '前第4天', '前第3天', '前第2天', '前1天', '当日', '本月', '本年'],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#FFF', //X轴文字颜色
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '(%)',
        nameGap: 30,  // 表现为上下位置
        nameTextStyle: {
          padding: [0, 0, 0, -30],
          color: "#FFF",
          fontFamily: "Alibaba PuHuiTi",
          fontSize: 14,
          fontWeight: 600,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#eeeeee',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#FFF',
          },
        },
      },
      {
        type: 'value',
        name: '能力OEE',
        nameTextStyle: {
          color: '#393939',
          padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
        },
        nameGap: 20,  // 表现为上下位置
        position: 'right',
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#393939',
          },
        },
        max: 100,
      },
    ],
    series: [
      {
        name: '时间稼动率',
        type: 'bar',
        barWidth: 14,
        itemStyle: {
          normal: {
            color: '#5B8FF9',
          },
        },
        data: [89, 87, 79, 78, 82, 81, 78, 77, 83, 79],
      },
      {
        name: '性能稼动率',
        type: 'bar',
        barWidth: 14,
        itemStyle: {
          normal: {
            color: '#6DC8EC',
          },
        },
        data: [91, 92, 88, 91, 87, 93, 91, 89, 92, 87],
      },
      {
        name: '合格率',
        type: 'bar',
        barWidth: 14,
        itemStyle: {
          normal: {
            color: '#5AD8A6',
          },
        },
        data: [78, 82, 79, 80, 83, 79, 85, 78, 83, 78],
      },     
      {
        name: '能力OEE',
        type: 'line',
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        showAllSymbol: true, //显示所有图形。
        symbol: 'circle', //标记的图形为实心圆
        symbolSize: 8, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: 'white',
          borderWidth: '2',
          borderColor: '#fac858',
        },
        lineStyle: {
          color: '#fac858',
        },
        data: [81, 84, 80, 83, 82, 81, 83, 82, 85, 81],
      },
    ],
  };