hyj change shhuang

heyujie

2021-11-03 57094ef66e4afb413c39ecd181e65938315c195c

 src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue

@@ -1,32 +1,55 @@
<template>
  <div class="irregular-dataset">
    <div ref="multiBar" style="width: 100%;height: 300px;"></div>
    <div ref="multiBar" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script>
export default {
  data () {
  data() {
    return {
      options: {},
    }
    };
  },
  mounted () {
  mounted() {
    this.options = this.mockData();
    this.initMultiBar();
  },
  methods: {
    mockData () {

      var dimension = ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'];
      var yDatas = [[4, 23, 13, 0, 1, 1], [2, 16, 16, 0, 1, 1], [5, 20, 20, 0, 2, 1], [4, 19, 15, 0, 1, 2], [3, 16, 14, 1, 0, 4], [1, 17, 13, 0, 1, 1], [2, 9, 9, 0, 1, 2]];
      var categoryCount = 7;
    mockData() {
      var dimension = [
        "未鸣笛",
        "未手比",
        "未呼唤",
        "运行中睡觉",
        "未检查",
        "未应答",
      ];
      var yDatas = [
        [14, 23, 13, 20, 21, 11],
        [12, 16, 16, 20, 11, 21],
        [15, 20, 20, 10, 12, 21],
        [14, 19, 15, 20, 11, 22],
        [13, 16, 14, 21, 10, 14],
        [1, 17, 13, 0, 1, 1],
        [2, 9, 9, 0, 1, 2],
        [2, 9, 9, 0, 1, 2],
        [4, 23, 13, 0, 1, 1],
        [2, 16, 16, 0, 1, 1],
        [5, 20, 20, 0, 2, 1],
        [4, 19, 15, 0, 1, 2],
        [3, 16, 14, 1, 0, 4],
        [1, 17, 13, 0, 1, 1],
        [2, 9, 9, 0, 1, 2],
        [2, 9, 9, 0, 1, 2],
      ];
      var categoryCount = 16;
      var xAxisData = [];
      var customData = [];
      var legendData = [];
      var dataList = [];

      legendData.push('trend');
      legendData.push("trend");
      var encodeY = [];
      for (var i = 0; i < dimension.length; i++) {
        legendData.push(dimension[i]);
@@ -36,87 +59,123 @@

      for (var i = 0; i < categoryCount; i++) {
        //var val = yDatas[i];
        xAxisData.push('category' + i);
        xAxisData.push("category" + i);
        var customVal = [i];
        customData.push(customVal);

        for (var j = 0; j < dataList.length; j++) {
          var value = j === 0
            ? this.$echarts.number.round(yDatas[i][j], 2)
            : yDatas[i][j]
          var value =
            j === 0
              ? this.$echarts.number.round(yDatas[i][j], 2)
              : yDatas[i][j];
          dataList[j].push(value);
          customVal.push(value);
        }
      }
      return {
        title: {
          text: '违规情况统计',
          textStyle: {
            fontSize: 14
          }
        },
        color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
        color: [
          "rgb(157, 190, 245)",
          "rgb(98, 151, 242)",
          "rgb(179, 240, 229)",
          "rgb(254, 209, 146)",
          "rgb(254, 209, 146)",
          "rgb(237, 102, 62)",
        ],
        grid: {
          top: 50,
          left: 30,
          right: 20,
        },
        tooltip: {
          trigger: 'axis'
          trigger: "axis",
        },
        legend: {
          data: legendData,
          left: 'right',
          left: "right",
          //color: ['aqua','#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
        },
        dataZoom: [{
          type: 'slider',
          start: 50,
          end: 70
        }, {
          type: 'inside',
          start: 50,
          end: 70
        }],
        dataZoom: [
          {
            type: "slider",
            height: 10,
            end: 30,
            bottom: 0,
            backgroundColor: "#F4F6F9 ",
            showDetail: false,
            showDataShadow: false,
          },
        ],
        xAxis: {
          //data: xAxisData
          data: ['02-22', '02-23', '02-24', '02-25', '02-26', '02-27','02-28']
        },
        yAxis: {},
        series: [{
          type: 'custom',
          name: 'trend',
          color: 'aqua',
          renderItem: this.renderItem,
          itemStyle: {
            borderWidth: 2
          },
          encode: {
            x: 0,
            y: encodeY
          },
          data: customData,
          z: 1
        
        }].concat(dataList.map(function (data, index) {
        return {
            type: 'bar',
            animation: false,
            name: legendData[index + 1],
            itemStyle: {
                opacity: 0.7
          axisTick: false,
          axisLine: {
            lineStyle: {
              color: "rbg(241, 241, 240)",
              width: 1, //这里是为了突出显示加上的
            },
            data: data
        };
    }))
        
      }
          },

          data: [
            "02-22",
            "02-23",
            "02-24",
            "02-25",
            "02-26",
            "02-27",
            "02-28",
            "03-01",
            "03-02",
            "03-03",
            "03-04",
            "03-05",
            "03-06",
            "03-07",
            "03-08",
            "03-09",
          ],
        },
        yAxis: {
          axisTick: false,
          axisLine: {
            //y轴
            show: false,
          },
          splitLine: {
            //网格线
            lineStyle: {
              color: "rgb(230, 230, 230)",
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true, //隐藏或显示
          },
        },
        series: [].concat(
          dataList.map(function (data, index) {
            return {
              type: "bar",
              animation: false,
              barWidth: 8,
              name: legendData[index + 1],
              itemStyle: {
                opacity: 0.7,
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [8, 8, 0, 0],
                },
              },
              data: data,
            };
          })
        ),
      };
    },
    renderItem (params, api) {
    renderItem(params, api) {
      var xValue = api.value(0);
      var currentSeriesIndices = api.currentSeriesIndices();
      var barLayout = api.barLayout({
        barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1
        barGap: "30%",
        barCategoryGap: "20%",
        count: currentSeriesIndices.length - 1,
      });

      var points = [];
@@ -130,29 +189,29 @@
        }
      }
      var style = api.style({
        color: '#975fe4',
        color: "#975fe4",
        //stroke: api.visual('color'),
        stroke: 'aqua',
        fill: null
        stroke: "aqua",
        fill: null,
      });

      return {
        type: 'polyline',
        type: "polyline",
        shape: {
          points: points
          points: points,
        },

        style: style
        style: style,
      };
    },
    initMultiBar () {
    initMultiBar() {
      this.$nextTick(() => {
        let dom = this.$echarts.init(this.$refs['multiBar']);
        let dom = this.$echarts.init(this.$refs["multiBar"]);
        dom.setOption(this.options);
      })
    }
  }
}
      });
    },
  },
};
</script>

<style>