内容提交

longyvfengyun

2022-04-14 8ad376fc64ed19480dc80e7405e590a272a37012

内容提交

 src/components/myCharts/DivideCubeBar.vue

@@ -29,7 +29,9 @@
      this.setOption(option);
    },
    getOption(data) {
      let unit = this.unit;
      let xLabel = data.xLabel;
      let sName = this.name;
      let sData = data.sData;
      let yName = this.yName;
      let min = sData.length == 0?0:null;
@@ -89,7 +91,13 @@
      return {
        animation: false,
        tooltip:{
          show: false,
          show: true,
          formatter: function(params) {
            let result = sName+"<br/>";
            result = result+params.name+"：";
            result = result+sData[params.dataIndex];
            return result;
          }
        },
        grid: {
          top: "28px",
@@ -100,21 +108,7 @@
        },
        xAxis:[
          {
            type: 'category',
            data: xLabel,
            offset: 20, //x轴标签距离x轴距离
            axisTick: {
              //刻度线
              show: false,
              length: 9,
              alignWithLabel: true,
              lineStyle: {
                color: '#7DFFFD',
              },
            },
            axisLabel: {
              fontSize: 12, //x轴标签文字 大小
            },
          },
          {
            type: 'category',

 src/components/myCharts/DivideDotBar.vue

@@ -1,6 +1,7 @@
<script>
import ECharts from "echarts";
import BaseChart from "@/components/myCharts/BaseChart";
import getMaxValue from "@/assets/js/tools/getMaxValue";
export default {
  name: "DivideDotBar",
  extends: BaseChart,
@@ -27,19 +28,46 @@
      this.setOption(option);
    },
    getOption(data) {
      let unit = this.unit;
      let xLabel = data.xLabel;
      let sData = data.sData;
      let sName = this.name;
      let yName = this.yName;
      let min = sData.length == 0?0:null;
      let max = sData.length == 0?0:null;
      // sData = sData.map(item=>{
      //   return 10;
      // });
      max = getMaxValue(sData);
      const MAX = sData.map(item=>{
        return max*1.2>this.max?max*1.2:this.max;
      });
      let charts = this.$options.chart;
      let markPoint = sData.map((item, index) => {
        return {
          coord: [index, item],
          symbolSize(value, params) {
            let width = charts.getWidth()*0.98/sData.length/2+4;
            return [width, 1];
          },
          symbolOffset: [0, -2],
          symbol: "rect",
          itemStyle: {
            color: "#00feff"
          },
        };
      });

      return {
        animation: false,
        tooltip:{
          show: false
          show: true,
          formatter: function(params) {
            let result = sName+"<br/>";
            result = result+params.name+"：";
            result = result+sData[params.dataIndex];
            return result;
          }
        },
        grid: {
          top: "28px",
@@ -74,6 +102,9 @@
          {
            name: yName,
            type: "value",
            splitLine: {
              show: true
            }
          },
        ],
        series: [
@@ -94,16 +125,19 @@
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(199,190,90,0.8)",
                      color: "rgba(246,159,65,0.6)",
                    },
                    {
                      offset: 1,
                      color: "rgba(186,86,208,0.5)",
                      color: "rgba(182,114,254,0.6)",
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            markPoint: {
              data: markPoint
            },
            label: {
              show: false,
@@ -111,7 +145,7 @@
              distance: 10,
              fontSize: 12,
              color: "#FFFFFF"
            }
            },
          },
          {
            type: "pictorialBar",

 src/components/myCharts/DivideGradientBar.vue

@@ -49,6 +49,9 @@
            type: "value",
            min: min,
            max: max,
            splitLine: {
              show: true
            }
          },
        ],
        series: [

 src/pages/dataTest/components/lithiumPackTab.vue

@@ -14,7 +14,7 @@
          </div>
          <div class="mon-temp-bar">
            <flex-box title="锂电池包电流" size="mini">
              <divide-dot-bar ref="packCurr" name="锂电池包电流" unit="A"></divide-dot-bar>
              <divide-dot-bar ref="packCurr" name="锂电池包电流" unit="A" :max="1"></divide-dot-bar>
            </flex-box>
          </div>
        </div>