yangfeng
2023-12-08 de30afc054a9f72b49d2b81d4c7d6891a5e97e12
src/views/cockpitPage/components/DeviceChart.vue
@@ -57,6 +57,7 @@
      myChart = echarts.init(chartDom);
      let option;
      let lineColor = "#35ddc74d";
      let spirit = "/cockpitPage/order-bg.png";
      if (data) {
        option = {
          color: ["#00FFFF", "#dcb018"],
@@ -65,11 +66,19 @@
            axisPointer: {
              type: "none",
            },
            textStyle: {
              color: "#00FFFF",
            },
            borderColor: "#00FFFF",
            backgroundColor: "#238d8d6b",
            valueFormatter: function (value) {
              return value + "%";
            },
          },
          grid: {
            right: "80px",
            bottom: "60px",
            left: "60px",
            left: "70px",
            top: "30px",
          },
          dataZoom: [
@@ -79,6 +88,9 @@
              show: false,
              startValue: that.startValue, // 从头开始
              endValue: that.endValue, // 一次性展示几个
              zoomOnMouseWheel: false,
              moveOnMouseWheel: true,
              moveOnMouseMove: true,
            },
          ],
          legend: {
@@ -104,6 +116,7 @@
                // rotate:45,
                margin: 10,
                show: true,
                fontSize: 12,
                textStyle: {
                  color: function (params, index) {
                    let colorList = ["#dcb018", "#00FFFF"];
@@ -115,7 +128,7 @@
                  },
                },
                formatter: function (value) {
                  if (value.length > 6) {
                  if (value.length > 5) {
                    return `${value.slice(0, 4)}...`;
                  }
                  return value;
@@ -153,24 +166,44 @@
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: "#00FFFF",
                },
                formatter: "{value}%",
                formatter: function (value) {
                  return `${value}%`;
                },
              },
            },
          ],
          series: [
            {
              type: "bar",
              type: "pictorialBar",
              name: "",
              barWidth: "15",
              symbol: spirit,
              symbolRepeat: true,
              symbolMargin: "25%",
              symbolClip: true,
              symbolSize: [4, 11],
              barCategoryGap: "40%",
              label: {
                show: true,
                position: "right",
                color: "#00FFFF",
                formatter: function (params) {
                  if (params.dataIndex % 2 == 0) {
                    return `{a|${params.value}%}`;
                  } else {
                    return `{b|${params.value}%}`;
                  }
                },
                rich: {
                  a: {
                    color: "#00FFFF",
                  },
                  b: {
                    color: "#dcb018",
                  },
                },
              },
              itemStyle: {
                normal: {