D3根据查询结果，生成图

最新推荐文章于 2022-07-22 11:45:34 发布

可乐*不渴

最新推荐文章于 2022-07-22 11:45:34 发布

阅读量312

点赞数

本文链接：https://blog.csdn.net/qq_45725046/article/details/105834135

版权

本文介绍如何利用D3.js库，根据数据库查询得到的数据动态生成交互式图表，包括数据处理、图表绘制及交互功能的实现。

摘要由CSDN通过智能技术生成

<template>
<div style="padding：30px；">
cel-row>
<el-col：span="11"
<label for-"name2"style-"width：38%"受影响系统模块：</label>
<el-input placeholder="故障：输入模块编号"
v-model-"listOuery.num style="width：58%
id="name2"
<el-button type="primary"class="buttonMargin"@click-"searchModule"查询k/el-button>
</el-col>
<el-col：span="6">
<label for="name3"style="width：38%"搜索深度：/label>
<el-input placeholder="输入搜索深度"
v-model-"listQuery.deep"
style="width：60%"
id="name3"
</el-col
<el-col：span="4"
<el-button style="margin-left：15px！important；margin-bottom：30px；"type="primary'
icon="el-icon-search"@click-"createD3（）"v-loading.fullscreen.lock-"fullscreenLoading"生成图</el-button>
</el-col
</el-row>
<el-button id="zoom-in">放大d3图</el-button>
<el-button id="zoom-out">缩小d3图</el-button>
<div slot="screenfullSlot" class="svgLyy" >
</div>
<div class="bottom-inf>
<span class="a" >{
   {
   late.a}}</span>
<span class="b">{
   {
   late.b}}/span>
<span class="c">{
   {
   late.c}}</span>
<span class="b">{
   {
   late.d}}</span>
<span class="c">{
   {
   late.e}}</span>
<span class="b">{
   {
   late.f}}</span>
<span class="c">{
   {
   late.g}}</span>
<span class="b">{
   {
   late.h}}</span>
<span class="c">{
   {
   late.i}}</span>
<span class="b">{
   {
   late.j}}</span>
<span class="c">{
   {
   late.k}}</span>
</div>
</div>
<--点击查询弹框-->
<el-dialog：title="title"：visible.sync-"dialogFormVisible
<el-row type-"flex"
<！--查询一>
el-colx
<！--根据系统名称查询模块编号
cel-select v-model-"moduleQuery.sysNameCn filterable remote reserve-keyword placeholder="系统中文名称
：remote-method-"getModuleList
@change-"onChange:loading="loading
@focus="onFocus styles"width：24%
el-option v-for="item in options
：key="item.value
：label="`系统中文名称：$（item.sysNamecn）xa0\xa0 模块名称：${item.modeNamecn}xa0\xa0模块编号：${item.modeId}`"
：value-"item.modeld"
</el-option>
</el-select>
/div>
</template>
<script>
import  {
   UdNotice } trom'udesk-vue import{findAffectedSystemsByModule}from'@/api/sysRelations'
import*as d3 from"d3"；
export default{
   
data（）{
   return{
   
fullscreenLoading：false 
list：[]，options:[]，
Loading：false，total：0，dialogFormVisible：false，dialogFormVisible：false，title:"查询模块编号
moduleQuery:{
   
//рage：1，
//limit：10，
sysNameCn:"",
sysNameEn："",
modeNameCn:"",
modeNameEn："",
modeld："",
sysId："",
}
listQuery：{
   num:undefined，deep:undefined