echart图案例

news2025/4/22 0:01:58

效果

 代码:

index.vue

<template>
  <div class="pageBox">
    <div class="oneLineBox">
      <div class="fourColorImgBox">
        <div class="titleBox">企业风险四色图</div>
        <div class="contentBox">
          <picView></picView>
        </div>
      </div>
      <div class="riskStatisticsBox">
        <div class="titleBox">风险统计</div>
        <div class="contentBox">
          <div class="selectGroupBox">
            <div class="categoryBox">
              <span>风险类别: </span>
              <a-select
                v-model:value="RiskPointType"
                @change="changePointType"
              
              >
                <a-select-option value="Device">设备设施</a-select-option>
                <a-select-option value="Operation">作业活动</a-select-option>
                <a-select-option value="ProcessNode">工业节点</a-select-option>
              </a-select>
            </div>
            <div class="gradeBox">
              <span>风险等级: </span>
              <a-select
                v-model:value="RiskLevelType"
                @change="changeLeveType"
             
              >
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="ExtremeRisk">重大风险</a-select-option>
                <a-select-option value="LargerRisk">较大风险</a-select-option>
                <a-select-option value="GeneralRisk">一般风险</a-select-option>
                <a-select-option value="LowRisk">低风险</a-select-option>
              </a-select>
            </div>
          </div>
          <div :class="!piedata.length ? 'emptyBox' : ''">
            <riskStatistics
              :piedata="piedata"
              v-if="piedata.length"
              :allCounts="allCounts"
            ></riskStatistics>
            <a-empty
              v-else
              :image="Empty.PRESENTED_IMAGE_SIMPLE"
              class="ant-empty-normal"
            />
          </div>
        </div>
      </div>
      <div class="riskStatisticsGroup">
        <a-tabs
          @change="changeTab"
          v-model:activeKey="activeKey"
          :tabBarStyle="{ paddingLeft: '20px' }"
        >
          <a-tab-pane key="department" tab="部门风险统计"></a-tab-pane>
          <a-tab-pane key="regional" tab="区域风险统计"></a-tab-pane>
        </a-tabs>
        <div class="contentBox">
          <div class="selectBox">
            <span
              >{{ activeKey == "department" ? "主管部门" : "区域" }}:
            </span>
            <a-select
              @click="openDepartment"
              :open="false"
              v-model:value="selectVal"
            ></a-select>
          </div>
         <div :class="departData.obj.length==0 ? 'emptyBox' : ''">
            <riskStatisticsGroup :departData="departData" v-if="departData.obj.length!=0"></riskStatisticsGroup>
            <a-empty
              v-else
              :image="Empty.PRESENTED_IMAGE_SIMPLE"
              class="ant-empty-normal"
            />
          </div>
        </div>
        <modealForm
          ref="modelFormR"
          @setParentRegionalValue="setParentRegionalValue"
          :FormStatekey="FormStatekey"
          :api1="getRegionTree"
          :api2="getViolationOrganizationRoot"
          :api3="getViolationOrganization"
        />
        <!-- <div class="departmentRiskBox">
            <div class="titleBox">部门风险统计</div>
            <div class="contentBox">部门风险统计图</div>
          </div>
          <div class="regionalRiskBox">
            <div class="titleBox">区域风险统计</div>
            <div class="contentBox">区域风险统计图</div>
          </div> -->
      </div>
    </div>
    <div class="twoLineBox">
      <div class="riskNoticeBox">
        <div class="titleBox">重大风险公示</div>
        <div class="contentBox">
          <TableList
            :loading="loading"
            ref="tablistRef"
            :hasImport="false"
            :hasExport="false"
            @getData="getData"
            :columns="columns"
            :MaxResultCount="8"
          ></TableList>
        </div>
      </div>
      <div class="byLawBox">
        <div class="titleBox">规章制度公示</div>
        <div class="contentBox">
          <TableList
            :loading="byLawloading"
            ref="byLawtablistRef"
            :hasImport="false"
            :hasExport="false"
            @getData="byLawgetData"
            :columns="byLawcolumns"
            :showHeader="false"
            :MaxResultCount="10"
          >
            <template #customtable="{ column, record }">
              <template v-if="column.key === 'icon'">
                <file-word-outlined
                  style="color: #1683ff"
                  v-if="
                    findFileType(record.FilePath[0]?.DisPlayName) == '.doc' ||
                    findFileType(record.FilePath[0]?.DisPlayName) == '.docx'
                  " />
                <file-ppt-outlined
                  style="color: #f57b11"
                  v-if="
                    findFileType(record.FilePath[0]?.DisPlayName) == '.ppt' ||
                    findFileType(record.FilePath[0]?.DisPlayName) == '.pptx'
                  " />
                <file-excel-outlined
                  style="color: #15c34f"
                  v-if="
                    findFileType(record.FilePath[0]?.DisPlayName) == '.xlsx' ||
                    findFileType(record.FilePath[0]?.DisPlayName) == '.xLs'
                  " />
                <file-pdf-outlined
                  style="color: #e83c35"
                  v-if="
                    findFileType(record.FilePath[0]?.DisPlayName) == '.pdf'
                  "
              /></template>
            </template>
            <template #operation="{ column, record }">
              <!-- <a> 预览</a>
              <a-divider type="vertical" /> -->
              <a @click="downLoadEvent(record)"> 下载</a>
            </template></TableList
          >
        </div>
      </div>
      <div class="activityScoreBox">
        <div class="titleBox">作业活动对比</div>
        <div class="contentBox">
          <div class="selectBox">
            <span>区域:</span>
            <a-select
              @click="openRegional"
              :open="false"
              v-model:value="workVal"
            ></a-select>
          </div>
         <div :class="workData.obj.length==0 ? 'emptyBox' : ''">
            <activityScore :workData="workData" v-if="workData.obj.length!=0"></activityScore>
            <a-empty
              v-else
              :image="Empty.PRESENTED_IMAGE_SIMPLE"
              class="ant-empty-normal"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { findFileType } from "@/utils/function/index.js";
import { message, Modal, Empty } from "ant-design-vue";
import { onMounted, ref, reactive } from "vue";
import modealForm from "./components/modalForm.vue";
import {
  getActivityScore,
  getDepartMarge,
  getRegionMarge,
} from "@/api/activityScore.js";
import { getRegionTree } from "@/api/regional";
import {
  getViolationOrganizationRoot,
  getViolationOrganization,
} from "@/api/uacapi";
import riskStatisticsGroup from "./components/riskStatisticsGroup.vue";
import activityScore from "./components/activityScore.vue";
import TableList from "@/components/ComtableListR.vue";
import { majorRisk, byLaw } from "@/api/home.js";
import picView from "@/components/Whiteboard/homePic.vue";
import { getRiskIchnography } from "@/api/riskHazardControl";
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

import axios from "axios";
// onMounted(() => {
//   getData();
//   byLawgetData();
//   getDataRisk();
// });

// 风险统计
import riskStatistics from "./components/riskStatistics.vue";
import { getRiskStatistics } from "@/api/riskStatistics.js";
const RiskPointType = ref("Device");
const RiskLevelType = ref("");
const piedata = ref([]);
const allCounts = ref(0);
const changePointType = () => {
  getDataRisk();
};
const changeLeveType = () => {
  getDataRisk();
};
const selectVal = ref();
const selectId = ref();
const workVal = ref();
const workId = ref("");
const getRegion = async () => {
  const res = await getRegionTree();
  workId.value = res.ChildrenNodes[0].CurrentNode.Id;
  workVal.value = res.ChildrenNodes[0].CurrentNode.DisplayName;
};
const cDname = ref();
const cDId = ref();
const getDepart = async () => {
  const id = await getViolationOrganizationRoot();
  const res = await getViolationOrganization({ id: id.items[0].id });
  cDname.value = res.currentNode.name;
  cDId.value = res.currentNode.id;
  selectId.value = res.currentNode.id;
  selectVal.value = res.currentNode.name;
};
const getDataRisk = () => {
  getRiskStatistics({
    RiskPointType: RiskPointType.value,
    RiskLevelType: RiskLevelType.value,
  })
    .then((res) => {
      piedata.value = res.map(function (item) {
        return {
          name: item.RiskPointStatisticGroupName,
          value:
            RiskLevelType.value == "ExtremeRisk"
              ? item.ExtremeCount
              : RiskLevelType.value == "LargerRisk"
              ? item.LargerCount
              : RiskLevelType.value == "GeneralRisk"
              ? item.GeneralCount
              : RiskLevelType.value == "LowRisk"
              ? item.LowCount
              : item.TotalCount,
        };
      });
      allCounts.value = res.reduce((prev, cur) => {
        return (
          prev +
          Number(
            RiskLevelType.value == "ExtremeRisk"
              ? cur.ExtremeCount
              : RiskLevelType.value == "LargerRisk"
              ? cur.LargerCount
              : RiskLevelType.value == "GeneralRisk"
              ? cur.GeneralCount
              : RiskLevelType.value == "LowRisk"
              ? cur.LowCount
              : cur.TotalCount
          )
        );
      }, 0);
    })
    .catch((err) => {
      console.log(err);
    });
};
// onMounted(() => {
//   getData();
//   //
// });

// 重大风险公告
// const riskCurrentPage = ref(1); //分页
let loading = ref(false);
let tablistRef = ref();
const columns = [
  {
    title: "风险点",
    dataIndex: "DisplayName",
    ellipsis: true,
    key: "DisplayName",
    align: "center",
  },
  {
    title: "所属区域",
    dataIndex: "RiskRegion",
    key: "RiskRegion",
    align: "center",
    ellipsis: true,
    customRender: ({ text }) => text?.DisplayName,
  },
  {
    title: "管辖部门",
    dataIndex: "ChargeOrganization",
    key: "ChargeOrganization",
    align: "center",
    ellipsis: true,
    customRender: ({ text }) => text?.DisplayName,
  },
  {
    title: "主管人",
    dataIndex: "ChargeUser",
    key: "ChargeUser",
    align: "center",
    ellipsis: true,
    customRender: ({ text }) => text?.DisplayName,
  },
];
let pageobj = reactive({ MaxResultCount: 8, SkipCount: 0 });
const getData = async (from, param2) => {
  if (param2) {
    pageobj.MaxResultCount = param2?.pageSize ? param2?.pageSize : 8;
    pageobj.SkipCount =
      ((param2?.current ? param2?.current : 1) - 1) *
      (param2?.pageSize ? param2?.pageSize : 8);
  }
  let params = {
    CurrentRiskLevelType: "ExtremeRisk",
    SkipCount: pageobj.SkipCount,
    MaxResultCount: pageobj.MaxResultCount,
  };
  loading.value = true;
  const res = await majorRisk(params);
  if (res.Items.length === 0 && pageobj.SkipCount > 0) {
    pageobj.SkipCount = pageobj.SkipCount - pageobj.MaxResultCount;
    tablistRef.value.setpage({
      current: pageobj.SkipCount / pageobj.MaxResultCount + 1,
      pageSize: pageobj.MaxResultCount,
    });
    getData();
  }
  loading.value = false;
  tablistRef.value.getData([...res.Items], Number(res.TotalCount));
};
// 部门风险统计、区域风险统计
let activeKey = ref("department");
// 点击选择器打开弹层
const modelFormR = ref(null);
let FormStatekey = ref("");
const openDepartment = () => {
  if (activeKey.value == "department") {
    modelFormR.value.selectDeclare("", "ViolationOrganization");
    FormStatekey.value = "ViolationOrganization";
  } else {
    modelFormR.value.selectDeclare("", "ViolationArea");
    FormStatekey.value = "ViolationArea";
  }
};
const openRegional = () => {
  modelFormR.value.selectDeclare("", "ViolationArea");
  FormStatekey.value = "workArea";
};
//弹窗点击确定
const setParentRegionalValue = (param, userModal) => {
  if (FormStatekey.value != "workArea") {
    selectId.value = param[0].id;
    selectVal.value = param[0].name;
    getDepartData();
  } else {
    workVal.value = param[0].name;
    workId.value = param[0].id;
    getWorkData();
  }
};
//切换tab清空选中值
const changeTab = (val) => {
  if (activeKey.value == "regional") {
    selectVal.value = workVal.value;
    selectId.value = workId.value;
  } else {
    selectId.value = cDId.value;
    selectVal.value = cDname.value;
  }
  getDepartData();
};
const workData = reactive({ obj: [] });
const getWorkData = async () => {
  workData.obj = await getActivityScore({ RiskRegionId: workId.value });
};

const departData = reactive({ obj: [] });
const getDepartData = async () => {
  if (activeKey.value == "department") {
    departData.obj = await getDepartMarge({
      RiskOrganizationId: selectId.value,
    });
  } else {
    departData.obj = await getRegionMarge({ RiskRegionId: selectId.value });
  }

  // console.log(departData.obj);
};
// 规章制度公告
let byLawloading = ref(false);
let byLawtablistRef = ref();
const byLawcolumns = [
  {
    title: "图标",
    dataIndex: "icon",
    key: "icon",
    align: "right",
    width: 20,
  },
  {
    title: "文件名",
    dataIndex: "FilePath",
    ellipsis: true,
    key: "FilePath",
    align: "left",
    customRender: ({ text }) => text[0].DisPlayName,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    align: "right",
    width: 60,
  },
];
let byLawpageobj = reactive({ MaxResultCount: 10, SkipCount: 0 });
const byLawgetData = async (from, param2) => {
  if (param2) {
    byLawpageobj.MaxResultCount = param2?.pageSize ? param2?.pageSize : 10;
    byLawpageobj.SkipCount =
      ((param2?.current ? param2?.current : 1) - 1) *
      (param2?.pageSize ? param2?.pageSize : 10);
  }
  let params = {
    IsTop: true,
    SkipCount: byLawpageobj.SkipCount,
    MaxResultCount: byLawpageobj.MaxResultCount,
  };
  loading.value = true;
  const res = await byLaw(params);
  if (res.Items.length === 0 && byLawpageobj.SkipCount > 0) {
    byLawpageobj.SkipCount =
      byLawpageobj.SkipCount - byLawpageobj.MaxResultCount;
    byLawtablistRef.value.setpage({
      current: byLawpageobj.SkipCount / byLawpageobj.MaxResultCount + 1,
      pageSize: byLawpageobj.MaxResultCount,
    });
    byLawgetData();
  }
  loading.value = false;
  byLawtablistRef.value.getData([...res.Items], Number(res.TotalCount));
};
const downLoadEvent = (param2) => {
  //下载操作
  if (
    Array.isArray(param2.FilePath) &&
    param2?.FilePath?.length &&
    param2?.FilePath[0]?.FileId
  ) {
    axios
      .get(
        window.defaultconfig.fileUrl +
          "/api/FileManage/Download" +
          `?Id=${param2.FilePath[0].FileId}`,
        { responseType: "arraybuffer" }
      )
      .then((res) => {
        const blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        const objectUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.download = param2.FilePath[0].DisPlayName;
        a.href = objectUrl;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      })
      .catch((error) => {
        message.error("系统异常,请联系管理员");
      });
  } else {
    message.error("文件不存在,无法下载");
  }
};
onMounted(async () => {
  getData();
  byLawgetData();
  getDataRisk();
  await getDepart();
  await getRegion();
  await getWorkData();
  await getDepartData();
});
</script>
<style lang="less" scoped>
:deep(.ant-empty) {
  margin-top: 50px;
}
.pageBox {
  display: flex;
  flex-wrap: wrap;
  .oneLineBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .fourColorImgBox {
      flex: 1;
      background-color: #fff;
      // padding: 10px;
      border: solid 1px #e8e8e8;
      margin-right: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      .contentBox {
        padding: 0 10px;
      }
    }
    .riskStatisticsBox {
      flex: 1;
      background-color: #fff;
      // padding: 10px;
      border: solid 1px #e8e8e8;
      margin-right: 10px;
      margin-bottom: 10px;
      .ant-empty-normal {
        margin: auto;
        width: 100%;
      }
      .contentBox {
        height: 100%;
      }
      .emptyBox {
        height: 80%;
        display: flex;
      }
      .selectGroupBox {
        display: flex;
        margin-left: 3%;
        .categoryBox {
          flex: 0 0 40%;
          flex-wrap: nowrap;
          display: flex;
          align-items: center;
        }
        .gradeBox {
          flex: 0 0 40%;
          flex-wrap: nowrap;
          display: flex;
          align-items: center;
        }
      }
    }
    .riskStatisticsGroup {
      flex: 1;
      background-color: #fff;
      // padding: 0 10px 10px;
      border: solid 1px #e8e8e8;
      margin-bottom: 10px;
      .contentBox {
        height: 100%;
        margin: 0 10px 10px;
        .selectBox {
          text-align: right;
        }
      }
      .ant-empty-normal {
        margin: auto;
        width: 100%;
      }
      .emptyBox {
        height: 80%;
        display: flex;
      }
    }
  }
  .twoLineBox {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .riskNoticeBox {
      flex: 1;
      background-color: #fff;
      // padding: 10px;
      border: solid 1px #e8e8e8;
      margin-right: 10px;
      margin-bottom: 10px;
      .contentBox {
        padding: 0 18px;
      }
    }
    .byLawBox {
      flex: 1;
      background-color: #fff;
      // padding: 10px;
      border: solid 1px #e8e8e8;
      margin-right: 10px;
      margin-bottom: 10px;
      .contentBox {
        padding: 0 18px;
      }
    }
    .activityScoreBox {
      flex: 1;
      background-color: #fff;
      // padding: 10px;
      border: solid 1px #e8e8e8;
      margin-bottom: 10px;
       .ant-empty-normal {
        margin: auto;
        width: 100%;
      }
      .emptyBox {
        height: 80%;
        display: flex;
      }
      .contentBox {
        // padding: 0 10px 0 10px;
        // margin: 0 10px 10px;
        height: 80%;
        padding-left: 20px;
        .selectBox {
          margin-right: 10px;
          text-align: right;
        }
      }
    }
  }
  // 公共样式
  .titleBox {
    padding: 12px 20px;
    border-bottom: solid 1px #f0f0f0;
    margin-bottom: 16px;
    font-size: 16px;
  }
  :deep(.ant-select-selector) {
    min-width: 120px;
  }
  .tableBox {
    margin-top: 0 !important;
    :deep(.ant-table-wrapper) {
      min-height: auto !important;
    }
  }
  :deep(.ant-tabs-tab) {
    font-size: 16px !important;
  }
}
</style>

riskStatisticsGroup.vue

<template>
  <div id="main" style="height: 400px"></div>
</template>
<script setup>
import { onMounted, nextTick, ref, watch } from "vue";
import * as echarts from "echarts";
import { Empty } from "ant-design-vue";
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const props = defineProps({
  departData: {
    type: Object,
    default: () => {},
  },
});
const xdata = ref([]);
const dataFirst = ref([]);
const dataSec = ref([]);
const dataThist = ref([]);
const dataFour = ref([]);
function loaddata(data1, data2, data3, data4, data5) {
  nextTick(() => {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;
    window.addEventListener("resize", () => {
      // 监听浏览器窗口大小改变
      // 浏览器变化执行动作
      if (myChart) {
        myChart.resize();
      }
    });

    option = {
      dataZoom: [
        {
          type: "slider",
          realtime: true, // 拖动时,是否实时更新系列的视图
          startValue: 0,
          endValue: 5,
          width: 5,
          height: "90%",
          top: "5%",
          right: 0,
          // orient: 'vertical', // 设置横向还是纵向, 但是官方不太建议如此使用,建议使用 yAxisIndex 具体指明
          yAxisIndex: [0, 1], // 控制y轴滚动对象
          fillerColor: "#0093ff", // 滚动条颜色
          borderColor: "rgba(17, 100, 210, 0.12)",
          backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
          handleSize: 0, // 两边手柄尺寸
          showDataShadow: false, //是否显示数据阴影 默认auto
          showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          zoomLock: true,
          moveHandleStyle: {
            opacity: 0,
          },
        },
        {
          type: "inside",
          // width: 0,
          startValue: 0,
          endValue: 10,
          minValueSpan: 10,
          yAxisIndex: [0],
          zoomOnMouseWheel: false, // 关闭滚轮缩放
          moveOnMouseWheel: true, // 开启滚轮平移
          moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
        },
      ],

      title: {
        text: "",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        x: "center",
        y: "bottom",
        // pageIconSize: 8,
        // itemWidth: 18,
        // itemHeight: 8
        type: "scroll",
      },
      grid: {
        top: "3%",
        left: "3%",
        right: "15%",
        bottom: "13%",
        containLabel: true,
      },
      xAxis: {
        name: "数量(个)",
        nameLocation: "end",
        type: "value",
        show: true,
        minInterval: 1,
        axisTick: {
          alignWithLabel: true,
        },
        axisTick: {
          show: true, // 不显示坐标轴刻度线
        },
        axisLine: {
          show: true, // 不显示坐标轴线
        },
        axisLabel: {
          show: true, // 不显示坐标轴上的文字
        },
        splitLine: {
          show: true, // 不显示网格线
        },
      },
      yAxis: {
        type: "category",
        data: data1,
      },
      series: [
        {
          name: "重大风险",
          type: "bar",
          data: data2,
          color: "#ff0000",
        },
        {
          name: "较大风险",
          type: "bar",
          data: data3,
          color: "#ff6100",
        },
        {
          name: "一般风险",
          type: "bar",
          data: data4,
          color: "#ffff00",
        },
        {
          name: "低风险",
          type: "bar",
          data: data5,
          color: "#0000ff",
        },
      ],
    };

    option && myChart.setOption(option);
  });
}

watch(
  () => props.departData,
  () => {
    xdata.value = [];
    dataFirst.value = [];
    dataSec.value = [];
    dataThist.value = [];
    dataFour.value = [];
    props.departData.obj.forEach((e) => {
      xdata.value.push(e.RiskPointStatisticGroupName);
      dataFirst.value.push(e.ExtremeCount);
      dataSec.value.push(e.LargerCount);
      dataThist.value.push(e.GeneralCount);
      dataFour.value.push(e.LowCount);
      // ydata.value.push(e.Score);
    });
    loaddata(
      xdata.value,
      dataFirst.value,
      dataSec.value,
      dataThist.value,
      dataFour.value
    );
  },
  { deep: true, immediate: true }
);
</script>
<style lang="less" scoped>
// #main {
//   margin-top: 16px;
//   height: 400px !important;
// }
</style>

activityScore.vue

<template>
  <div id="activeId"></div>
</template>
<script setup>
import { onMounted, nextTick, ref, watch } from "vue";
import * as echarts from "echarts";
import { Empty } from "ant-design-vue";
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const props = defineProps({
  workData: {
    type: Object,
    default: () => {},
  },
});
const xdata = ref([]);
const ydata = ref([]);
// console.log(333, props.workData.obj);
// props.workData.obj.forEach((e) => {
//   console.log(444, e);
// });
// props.workData((item) => {

// });
function loaddata(data1, data2) {
  nextTick(() => {
    var chartDom = document.getElementById("activeId");
    var myChart = echarts.init(chartDom);
    var option;
    window.addEventListener("resize", () => {
      // 监听浏览器窗口大小改变
      // 浏览器变化执行动作
      if (myChart) {
        myChart.resize();
      }
    });

    option = {
      grid: {
        top: "3%",
        left: "3%",
        right: "15%",
        bottom: "13%",
        containLabel: true,
      },

      dataZoom: [
        {
          type: "slider",
          realtime: true, // 拖动时,是否实时更新系列的视图
          startValue: 0,
          endValue: 5,
          width: 5,
          height: "90%",
          top: "5%",
          right: 0,
          // orient: 'vertical', // 设置横向还是纵向, 但是官方不太建议如此使用,建议使用 yAxisIndex 具体指明
          yAxisIndex: [0, 1], // 控制y轴滚动对象
          fillerColor: "#0093ff", // 滚动条颜色
          borderColor: "rgba(17, 100, 210, 0.12)",
          backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
          handleSize: 0, // 两边手柄尺寸
          showDataShadow: false, //是否显示数据阴影 默认auto
          showDetail: false, // 拖拽时是否展示滚动条两侧的文字
          zoomLock: true,
          moveHandleStyle: {
            opacity: 0,
          },
        },
        {
          type: "inside",
          // width: 0,
          startValue: 0,
          endValue: 10,
          minValueSpan: 10,
          yAxisIndex: [0],
          zoomOnMouseWheel: false, // 关闭滚轮缩放
          moveOnMouseWheel: true, // 开启滚轮平移
          moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
        },
      ],
      yAxis: {
        type: "category",
        data: data1,
      },
      xAxis: {
        type: "value",
        name: "分值", //名称。
        show: true,
        minInterval: 1,
        axisTick: {
          show: true, // 不显示坐标轴刻度线
        },
        axisLine: {
          show: true, // 不显示坐标轴线
        },
        axisLabel: {
          show: true, // 不显示坐标轴上的文字
        },
        splitLine: {
          show: true, // 不显示网格线
        },
      },
      color: ["#5494f2"],
      series: [
        {
          data: data2,
          type: "bar",
        },
      ],
    };

    option && myChart.setOption(option);
  });
}

watch(
  () => props.workData,
  () => {
    xdata.value = [];
    ydata.value = [];
    props.workData.obj.forEach((e) => {
      xdata.value.push(e.RiskPointName);
      ydata.value.push(e.Score);
    });
    loaddata(xdata.value, ydata.value);
  },
  { deep: true, immediate: true }
);
</script>
<style lang="less" scoped>
#activeId {
  height: 300px;
  margin-top: 16px;
  // margin-left: 10px;
  // padding-left:10px ;
  // box-sizing: border-box;
}
</style>

另一个饼图组件在上上篇文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/864455.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

蝉妈妈:2023年抖音电商半年报(附下载)

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 平台流量竞争从愈发激烈变为趋于愈加缓和商家直攝总时长与观众君播总时长的总体趋势并没有愈加激烈&#xff0c;从23年上半年各自流量的同比增速来看&#xff0c;观众看摄总时长增速高于商家直攝总时…

AD域机器KMS自动激活

1、打开AD域控&#xff0c;点击DNS管理 2、创建其它记录 3、选择服务位置 SRV 4、输入相关信息 服务&#xff1a;_VLMCS协议&#xff1a;_TCP权重&#xff1a;100端口号&#xff1a;1688KMS服务器地址&#xff1a;10.3.0.211 5、成功&#xff0c;这时域内主机重启后&#xff0…

全自动猫砂盆市场调查:2022年全球全自动猫砂盆市场销售额达到了2.31亿美元

全自动猫砂盆是一种使用先进技术来自动清洁的猫砂盆。这些猫砂盆通常有传感器或计时器&#xff0c;可以检测到猫何时使用了猫砂盆并启动清洁程序。一些型号的猫砂盆还加入了自清洁机制&#xff0c;通过耙子或筛子来清除猫砂的结块和碎片。 全自动猫砂盆的设计旨在减少维护猫砂…

vue3+antv x6自定义节点样式

先大致定下节点样式&#xff0c;需要展示标题&#xff0c;输入/输出连接桩&#xff0c; 参考样子大概是 https://x6.antv.antgroup.com/examples/showcase/practices#class 这是根据antv x6配置 非自定义节点 图表案例 结果 数据格式大概是 nodes:[{title:鸟,id:node1,ports…

逐步分解,一文教会你如何用 jenkins+docker 实现主从模式

♥ 前 言 jenkins 主从模式想必大家都不陌生&#xff0c;大家在学习过程中为了学习方便都在自己本地搭建了 jenkins 环境&#xff0c;然后通过 javaweb 方式实现&#xff0c;对于 docker 下实现主从模式大家好像兴趣挺大。今天就通过这篇文章给大家讲讲怎么玩&#xff0c;希…

【JavaEE进阶】Bean 作用域和生命周期

文章目录 一. 关于Bean作用域的实例1. lombok2. 实例代码 二. 作用域定义1. Bean的六种作用域2. 设置作用域 三. Spring 执行流程和 Bean 的生命周期1. Spring 执行流程2. Bean生命周期 一. 关于Bean作用域的实例 注意在此例子中需要用到lombok 1. lombok lombok是什么? Lo…

android ndk clang交叉编译ffmpeg动态库踩坑

1.ffmpeg默认使用gcc编译&#xff0c;在android上无法使用&#xff0c;否则各种报错&#xff0c;所以要用ndk的clang编译 2.下载ffmpeg源码 修改configure文件&#xff0c;增加命令 cross_prefix_clang 修改以下命令 cc_default"${cross_prefix}${cc_default}" cxx…

Jmeter请求接口返回值乱码解决

乱码示例 解决步骤&#xff1a; 1.打开Jmeter安装目录下的bin目录&#xff0c;找到jmeter.properties 2.使用记事本或其他编译工具打开jmeter.properties文件&#xff0c;然后全局搜索sampleresult.default.encoding 3.在文件中添加sampleresult.default.encodingutf-8,保存…

C++入门篇7---string类

所谓的string类&#xff0c;其实就是我们所说的字符串&#xff0c;本质和c语言中的字符串数组一样&#xff0c;但是为了更符合C面向对象的特性&#xff0c;特地将它写成了一个单独的类&#xff0c;方便我们的使用 对其定义有兴趣的可以去看string类的文档介绍&#xff0c;这里…

【在树莓派上安装cpolar内网穿透实战】

文章目录 前言1.在树莓派上安装cpolar2.查询cpolar版本号3.激活本地cpolar客户端4.cpolar记入配置文件 前言 树莓派作为一个超小型的电脑系统&#xff0c;虽然因其自身性能所限&#xff0c;无法如台式机或笔记本等准系统一样&#xff0c;运行大型软件或程序&#xff08;指望用…

ecology-自定义浏览按钮实现多处引用可定制不同查询条件。

1.新建ecode代码&#xff0c;前置加载&#xff0c;代码内容&#xff1a; ecodeSDK.overwritePropsFnQueueMapSet(WeaBrowser,{ //组件名fn:(newProps)>{ //newProps代表组件参数 if(newProps.type162 || newProps.type161){//console.log("自定义浏览框");if(!ne…

日常BUG——使用Long类型作id,后端返回给前段后精度丢失问题

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;日常BUG、BUG、问题分析☀️每日 一言 &#xff1a;存在错误说明你在进步&#xff01; 一、问题描述 数据库long类型Id: 前端返回的Id实体类: Data ApiModel("xxx") public class …

数据结构顺序表

今天主要讲解顺序表&#xff0c;实现顺序表的尾插&#xff0c;头插&#xff0c;头删&#xff0c;还有尾删等操作&#xff0c;和我们之前写的通讯录的增删查改有类似的功能。接下来让我们开始我们的学习吧。 1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特…

保证接口数据安全的10种方式

我们日常开发中&#xff0c;如何保证接口数据的安全性呢&#xff1f;个人觉得&#xff0c;接口数据安全的保证过程&#xff0c;主要体现在这几个方面&#xff1a;一个就是数据传输过程中的安全&#xff0c;还有就是数据到达服务端&#xff0c;如何识别数据&#xff0c;最后一点…

安达发|企业如何提高生产实现精细化管理

随着市场竞争的加剧&#xff0c;企业如何提高生产效率和降低成本成为了关键。本文将探讨生产计划排程表的制定方法&#xff0c;帮助企业实现精细化管理&#xff0c;提升竞争力。 在传统的生产管理中&#xff0c;企业往往依赖于人工经验和直觉来制定生产计划&#xff0c;导致生产…

docker复现Nginx配置漏洞

目录 1.docker环境搭建 2.复现过程 2.1CRLF(carriage return/line feed)注入漏洞 2.2.目录穿越 2.3.add_header覆盖 1.docker环境搭建 1.安装docker apt-get update apt-get install docker.ioyum install docker.io 2.下载并解压docker环境Nginx配置漏洞安装包 链接&am…

最强的表格组件—AG Grid使用以及License Key Crack

PS: 想要官方 License Key翻到最后面 Ag Grid简介 Ag-Grid 是一个高级数据网格&#xff0c;适用于JavaScript/TypeScript应用程序&#xff0c;可以使用React、Angular和Vue等流行框架进行集成。它是一种功能强大、灵活且具有高度可定制性的表格解决方案&#xff0c;提供了丰富…

23款奔驰AMG GT50升级原厂HUD抬头显示系统,增加您的行车安全性

HUD是平视显示器的简称&#xff0c;它原先是运用在航空器上的飞行辅助仪器。指飞行员不需要低头&#xff0c;就能够看到他需要的重要资讯。由于HUD的方便性以及能够提高飞行安全&#xff0c;这项技术后来也发展到汽车行业。汽车搭载的HUD抬头数字显示功能&#xff0c;是利用光学…

类的默认成员函数(C++)

类的默认成员函数 1.构造函数特性 2.析构函数特性 3.拷贝构造函数特性 4.赋值重载函数运算符重载赋值运算符重载 const成员函数取地址运算符重载 1.构造函数 构造函数是一个特殊的成员函数&#xff0c;名字与类名相同&#xff0c;创建类类型对象时由编译器自动调用&#xff0c…

怎么制作gif动态图?gif图片在线制作攻略分享

现在许多品牌和营销活动也使用gif动态图来吸引用户注意力、提升品牌形象或传递特定的信息&#xff0c;那么gif制作的过程到底难不难呢&#xff1f;其实只需要使用gif图片在线制作工具就非常简单了&#xff0c;下面以图片制作gif&#xff08;https://www.gif.cn&#xff09;为例…