heyujie
2021-11-03 57094ef66e4afb413c39ecd181e65938315c195c
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
export default {
  /* grid: {
    x: 30,
    y: 40,
    x2: 30,
    y2: 50,
    containLabel: true,
  }, */
  xAxis: {
    type: "category",
    boundaryGap: true,
    data: ["未鸣笛", "未手比", "未呼唤", "运行中睡觉", "未检查", "未应答"],
    axisTick: {
      //y轴刻度线
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rbg(241, 241, 240)",
        width: 1, //这里是为了突出显示加上的
      },
    },
  },
  yAxis: {
    type: "value",
    axisTick: {
      //y轴刻度线
      show: false,
    },
    axisLine: {
      //y轴
      show: false,
    },
    axisLabel: {
      padding: [0, 10, 0, 0], // 四个数字分别为上右下左与原位置距离
    },
    splitLine: {
      //网格线
      lineStyle: {
        color: "rgb(230, 230, 230)",
        type: "dashed", //设置网格线类型 dotted:虚线   solid:实线
      },
      show: true, //隐藏或显示
    },
  },
  series: [
    /*  {
      data: [22, 50, 18, 18, 32, 8],
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#26d4b4",
      },
      showSymbol: false,
    }, */
    {
      data: [22, 50, 18, 18, 32, 8],
      type: "bar",
      barWidth: 16,
      itemStyle: {
        //通常情况下:
        normal: {
          barBorderRadius: [8, 8, 0, 0],
          //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组中的颜色
          color: function(params) {
            var colorList = [
              "rgb(45, 82, 215)",
              "rgb(98, 151, 242)",
              "rgb(157, 190, 245)",
              "rgb(98, 151, 242)",
              "rgb(47, 108, 213)",
              "rgb(45, 82, 215)",
            ];
            return colorList[params.dataIndex];
          },
        },
        //鼠标悬停时:
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
  tooltip: {
    show: true,
    trigger: "axis",
  },
};