CPUecharts 配置项内容和展示

柱状图和折线图混合

      
 var colors = [
      "#5793f3",
      "#d14a61",
      "#675bba",
      "#FF8C00",
      "#458B00",
      "#0000EE"
    ];
option = {
    color: colors,
      title: {
        text: "CPU"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      grid: {
        right: "15%"
      },
      legend: {
        orient: "vertical",
        right: "20",
        top: "middle",
        data: [
          "server1",
          "server2",
          "server3",
          "server1CPU",
          "server2CPU",
          "server3CPU"
        ]
      },
      xAxis: [
        {
          type: "category",
          axisTick: {
            alignWithLabel: true
          },
          data: [
            "1月1日",
            "1月2日",
            "1月3日",
            "1月4日",
            "1月5日",
            "1月6日",
            "1月7日",
            "1月8日",
            "1月9日",
            "1月10日",
            "1月11日",
            "1月12日"
          ]
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "时长",
          scale: true,
          min: 0,
          max: 24,
          interval: 2,
          boundaryGap: [0.2, 0.2],
          axisLabel: {
            formatter: "{value}h"
          }
        },
        {
          type: "value",
          name: "CPU使用率",
          scale: true,
          min: 0,
          max: 100,
          interval: 10,
          splitLine: {
            show: false,
            color: "#FFEC8B",
            lineStyle: { type: "dashed" }
          },
          boundaryGap: [0.2, 0.2],
          axisLabel: {
            formatter: "{value}%"
          }
        }
      ],
      series: [
        {
          name: "server1",
          type: "bar",
          data: [14, 6, 22, 3, 16, 5, 6, 10, 16, 6, 15, 13]
        },
        {
          name: "server2",
          type: "bar",
          data: [14, 15, 23, 12, 5, 18, 1, 16, 3, 3, 15, 9]
        },
        {
          name: "server3",
          type: "bar",
          data: [9, 13, 4, 1, 17, 2, 7, 12, 7, 4, 7, 21]
        },
        {
          name: "server1CPU",
          yAxisIndex: 1,
          type: "line",
          data: [1, 54, 20, 31, 13, 48, 67, 30, 74, 41, 24, 59]
        },
        {
          name: "server2CPU",
          yAxisIndex: 1,
          type: "line",
          data: [54, 54, 4, 11, 68, 4, 46, 59, 24, 86, 50, 65]
        },
        {
          name: "server3CPU",
          yAxisIndex: 1,
          type: "line",
          data: [7, 65, 85, 27, 59, 77, 40, 82, 76, 34, 23, 52]
        }
      ]
};