echart图案例

效果

 代码:

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.mfbz.cn/a/69517.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自建机房还是选择云服务器?以腾讯云为例

大企业是选择自购服务器自建机房还是使用腾讯云服务器&#xff1f;都说企业上云是趋势&#xff0c;自建机房是一次性支出&#xff0c;上云租赁云服务器等产品需要年年续费&#xff0c;大型企业有必要把数据中心迁移上云吗&#xff1f;腾讯云服务器网想说&#xff0c;自建机房购…

Postman 汉化及下载

Postman 是一款常用的 API 测试工具&#xff0c;可以方便地进行接口测试、调试和文档编写。本文将详细介绍如何下载安装 Postman 并汉化&#xff0c;包括每个步骤的详细说明。 下载安装 Postman 1、打开浏览器&#xff0c;访问 Postman 官网&#xff0c;下载适用于自己系统的…

强化学习-信任区域策略优化和近端策略优化(第7章)

来源书籍&#xff1a; TENSORFLOW REINFORCEMENT LEARNING QUICK START GUIDE 《TensorFlow强化学习快速入门指南-使用Python动手搭建自学习的智能体》 著者&#xff1a;[美]考希克巴拉克里希南&#xff08;Kaushik Balakrishnan&#xff09; 译者&#xff1a;赵卫东 出版…

Kendo UI for jQuery,一个现代的jQuery UI组件!

Kendo UI for jQuery是什么&#xff1f; Kendo UI for jQuery是完整的jQuery UI组件库&#xff0c;可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现代Web应用程序所需要的工具&#xff0c;从多个UI组件中选择&#xff0c;并轻松地将它们组…

图像多目标跟踪

目标跟踪&#xff08;Object Tracking&#xff09;是自动驾驶中常见的任务&#xff0c;根据跟踪目标数量的不同&#xff0c;目标跟踪可分为&#xff1a; 单目标跟踪&#xff08;Single Object Tracking&#xff0c;SOT&#xff09;多目标跟踪&#xff08;Multi-Objects Tracki…

餐馆包厢隔断装修该怎么去设计

餐馆包厢隔断装修设计需要综合考虑以下几个方面&#xff1a; 1. 功能布局&#xff1a;根据包厢的面积和形状来确定餐桌、椅子、电视等家具的摆放方式&#xff0c;保证客人的用餐舒适度和便利性。 2. 音响设备&#xff1a;安装合适的音响设备&#xff0c;提供一定的音乐背景&…

SQL 相关子查询 和 不相关子查询、Exists 、Not Exists、 多表连接(包含自连接)

不相关子查询 子查询的查询条件不依赖于父查询&#xff0c;称不相关子查询。子查询可以单独运行的 select stu_id,sex,age from student t where sex(select sexfrom studentwhere stu_id10023 )相关子查询 关联子查询 子查询的查询条件依赖于父查询&#xff0c;称为 相关子…

【c语言】 -- 指针进阶

&#x1f4d5;博主介绍&#xff1a;目前大一正在学习c语言&#xff0c;数据结构&#xff0c;计算机网络。 c语言学习&#xff0c;是为了更好的学习其他的编程语言&#xff0c;C语言是母体语言&#xff0c;是人机交互接近底层的桥梁。 本章来学习指针进阶。 让我们开启c语言学习…

家电用PCM板:市场现状研究分析与发展前景预测

家电PCM板属于一种兴起不久的功能性复合材料。属于家电复合外观材料中占比较大的一种。家电复合外观材料主要分为覆膜板&#xff08;VCM&#xff09;系列和有机涂层板&#xff08;PCM&#xff09;系列两大类&#xff1a;VCM系列表面复合各类功能性薄膜&#xff0c;可根据需要实…

与传统IT开发相比,低代码开发具备哪些优势?

目录 一、低代码来源 二、低代码开发的特征 1、可视化建模 2、组件丰富 3、完整应用生命周期支持 4、私有化部署 三、对比传统系统开发&#xff0c;低代码开发具备哪些优势&#xff1f; 01.使需求方参与开发过程 02.助力开发人员节省更多时间 03.跨平台部署多端应用 04.助力企业…

c刷题(二)

目录 加减混合运算 计算n的k次方 计算非负整数各位之和 字符串逆序 双指针 递归 矩阵计算 矩阵转置 加减混合运算 题目&#xff1a;计算1 / 1 - 1 / 2 1 / 3 - 1 / 4 1 / 5 …… 1 / 99 - 1 / 100 的值&#xff0c;打印出结果。 一般情况我们可以写个循环然后在用条…

win10 安装ubuntu子系统并安装宝塔

1、安装子系统 2、ubuntu 中安装宝塔 这里需要注意的&#xff1a; 大部分文章上写的是“面板账户登录信息”不能直接访问&#xff0c;要改成127.0.0.1&#xff1a;8888去访问。 这种情况适合“面板账户登录信息”端口就是8888。 想我的就是32757 这时你就要用 http://127.0.0…

开启想象翅膀:轻松实现文本生成模型的创作应用,支持LLaMA、ChatGLM、UDA、GPT2、Seq2Seq、BART、T5、SongNet等模型,开箱即用

开启想象翅膀&#xff1a;轻松实现文本生成模型的创作应用&#xff0c;支持LLaMA、ChatGLM、UDA、GPT2、Seq2Seq、BART、T5、SongNet等模型&#xff0c;开箱即用 TextGen: Implementation of Text Generation models 1.介绍 TextGen实现了多种文本生成模型&#xff0c;包括&a…

Leetcode 977. 有序数组的平方

题目&#xff1a; Leetcode 977. 有序数组的平方 描述&#xff1a; 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序 思路&#xff1a; 双指针法 数组其实是有序的&#xff0c; 只不过负数平方之…

Unity使用C# Protobuf源码

目录 第一步&#xff1a;下载源码 第二步&#xff1a;运行C#构建文件 第三步&#xff1a;处理报错&#xff08;如果你已安装对应的SDK则不会报错&#xff09; 第四步&#xff1a;复制库文件到你的工程 第一步&#xff1a;下载源码 protobuf github源码https://github.com/p…

pom文件---maven

027-Maven 命令行-实验四-生成 Web 工程-执行生成_ev_哔哩哔哩_bilibili 27节.后续补充 一.maven下载安装及配置 1)maven下载 2) settings文件配置本地仓库 3)settings配置远程仓库地址 4)配置maven工程的基础JDK版本 5)确认JDK环境变量配置没问题,配置maven的环境变量 验证…

React Native连接Zebra斑马打印机通过发送CPCL指令打印(Android 和 iOS通用)

自 2015 年发布以来&#xff0c;React Native 已成为用于构建数千个移动应用程序的流行跨平台移动开发框架之一。通常&#xff0c;我们有开发人员询问如何将 Link-OS SDK 与 React Native 应用程序集成&#xff0c;以便在 Zebra 打印机上打印标签。在本教程中&#xff0c;我们将…

Linux基础与应用开发系列九:各类系统函数

open_close函数 OPEN函数 头文件&#xff1a; #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> 函数原型&#xff1a; 当文件存在时 int open(const char* pathname,int flags) 当文件不存在时 int open (const char* pathname,int f…

使用 React Native CLI 创建项目

React Native 安装的先决条件和设置 需要掌握的知识点 掌握 JavaScript 基础知识掌握 React 相关基础知识掌握 TypeScript 相关基础知识 安装软件前需要首先安装Chocolatey。Chocolatey 是一种流行的 Windows 包管理器。 安装 nodejs 和 JDK choco install -y nodejs-lts …

【Docker】Docker中network的概要、常用命令、网络模式以及底层ip和容器映射变化的详细讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…