• Echarts图表 多表联动及图表数据还原

    项目场景：

    提示：多表联动、地市下区县数据联动、图表数据还原

    例如：

    需求描述

    需求一：例如点击南昌市展示该市下所有的区县的系统总数，同时【部门图表】展示对应南昌市下所有区下部门系统数量排行前15；点击南昌市某个区县，【部门图表】展示对于某个区县下所有区下部门系统数量排行前15；

    需求二：点击重置按钮，一切回到最初的起点

    需求分析：

    需求一代码：

    需求二代码

    解决方案：

    代码一：

    1. <template>
    2.   <div :id="echartId" :style="{width: '100%', height: '100%'}">div>
    3. template>
    4. <script>
    5.   export default {
    6.     name: "EchartPic",
    7.     props:{
    8.       echartId: '',
    9.       echartData:[]
    10.     },
    11.     data() {
    12.       return {};
    13.     },
    14.     mounted() {
    15.       this.drawLine();
    16.     },
    17.     methods: {
    18.       drawLine() {
    19.         let data = new Array();
    20.         for (let x of this.echartData) {
    21.           let y = {
    22.             name : x.name,
    23.             value : x.number
    24.           }
    25.  
    26.           data.push(y)
    27.         }
    28.         var echarts = require("echarts");
    29.         var myChart = echarts.init(document.getElementById(this.echartId));
    30.         let that = this
    31.         myChart.setOption({
    32.           grid: {
    33.             left: "6%",
    34.             right: "4%",
    35.             bottom: "10%",
    36.             top: "8%",
    37.             containLabel: true
    38.           },
    39.           tooltip: {
    40.             //提示框，可以在全局也可以在
    41.             trigger: "item", //提示框的样式
    42.             formatter: "{a} 
      {b}: {c} ({d}%)"      ,
    43.             color: "#000", //提示框的背景色
    44.             textStyle: {
    45.               //提示的字体样式
    46.               color: "#fff"
    47.             }
    48.           },
    49.           toolbox: {
    50.             show: true,
    51.             feature: {
    52.               mark: { show: true },
    53.               dataView: { show: true, readOnly: false },
    54.               myTool1: {
    55.                 show: true,
    56.                 title: "还原",
    57.                 icon:
    58.                     "M509.166933 230.4A281.6 281.6 0 1 0 793.6 512a280.302933 280.302933 0 0 0-65.672533-180.770133 25.6 25.6 0 0 1 39.253333-32.904534A331.502933 331.502933 0 0 1 844.8 512c0 183.808-148.992 332.8-332.8 332.8S179.2 695.808 179.2 512c0-177.493333 138.922667-322.491733 313.924267-332.288l-45.056-45.056a25.6 25.6 0 1 1 36.181333-36.215467l96.5632 96.529067a25.6 25.6 0 0 1 0 36.215467l-96.5632 96.529066a25.6 25.6 0 1 1-36.181333-36.181333l61.098666-61.098667z",
    59.                 onclick: () => {
    60.                   if(that.echartId == 'myChart1'){
    61.                     that.$emit("getSystemCityData");
    62.                   }else if(that.echartId == 'myChart3'){
    63.                     that.$emit("getCatalogCityData");
    64.                   }
    65.                 },
    66.               },
    67.               saveAsImage: { show: true }
    68.             }
    69.           },
    70.           series: [
    71.             {
    72.               name: "数量",
    73.               type: "pie", //环形图的type和饼图相同
    74.               radius: ["50%", "70%"], //饼图的半径，第一个为内半径，第二个为外半径
    75.               avoidLabelOverlap: false,
    76.               color: ["#02cab3", "#4885ff", "#fec67c", "#54c2fc", "#9991f6"],
    77.               label: {
    78.                 normal: {
    79.                   //正常的样式
    80.                   show: true,
    81.                   position: "left"
    82.                 },
    83.                 emphasis: {
    84.                   //选中时候的样式
    85.                   show: true,
    86.                   textStyle: {
    87.                     fontSize: "16",
    88.                     fontWeight: "bold"
    89.                   }
    90.                 }
    91.               }, //提示文字
    92.               labelLine: {
    93.                 normal: {
    94.                   show: false
    95.                 }
    96.               },
    97.               data: data
    98.             }
    99.           ]
    100.         });
    101.         myChart.on('click', function(params) {
    102.           if(that.echartId == 'myChart1'){
    103.             that.$emit("getSystemCityData", params);
    104.           }else if(that.echartId == 'myChart3'){
    105.             that.$emit("getCatalogCityData", params);
    106.           }
    107.         });
    108.         window.addEventListener("resize", function () {
    109.           myChart.resize();
    110.         });
    111.  
    112.       }
    113.     }
    114.   };
    115. script>
    116.  
    117. <style scoped="true">
    118. style>

    代码二：

    1. <template>
    2.   <div class="mainBox" style="height: 950px;background-color: #fff;">
    3.     <div style="padding-top: 10px">
    4.       <el-row :gutter="100">
    5.         <el-col :span="6" v-for="item in titleData" :key="item.dict_key">
    6.           <div :class="item.className">
    7.             <el-row>
    8.               <el-col :span="10">
    9.                 <div class="iconCircle">
    10.                   <i class="el-icon-postcard">i>
    11.                 div>
    12.               el-col>
    13.               <el-col :span="14">
    14.                 <div class="echartsTitleContent">
    15.                   <div>{{item.title}}div>
    16.                   <div>{{item.number}}div>
    17.                 div>
    18.               el-col>
    19.             el-row>
    20.           div>
    21.         el-col>
    22.       el-row>
    23.     div>
    24.     <div class="linebox">
    25.       <div>系统div>
    26.     div>
    27.     <div style="margin-top: 20px;">
    28.       <el-row :gutter="10">
    29.         <el-col :span="12">
    30.           <div class="echartsTopBox">
    31.             <div class="echartsTopTitle">地市div>
    32.             <div class="echartsBox">
    33.               <EchartPic echartId="myChart1" :echartData="systemCity" @getSystemCityData="systemCityMethod" :key="echartKey1"/>
    34.             div>
    35.           div>
    36.         el-col>
    37.         <el-col :span="12">
    38.           <div class="echartsTopBox">
    39.             <div class="echartsTopTitle">部门div>
    40.             <div class="echartsBox" style="padding: 0px 10px 10px 10px;">
    41.               <EchartBar echartId="myChart2" :echartData="systemDept"  @getSystemDept="systemDeptMethod"  :key="echartKey2"/>
    42.             div>
    43.           div>
    44.         el-col>
    45.       el-row>
    46.     div>
    47.     <div class="linebox">
    48.       <div>资源目录div>
    49.     div>
    50.     <div style="margin-top: 20px;">
    51.       <el-row :gutter="10">
    52.         <el-col :span="12">
    53.           <div class="echartsBottomBox">
    54.             <div class="echartsTopTitle">地市div>
    55.             <div class="echartsBoxBottom">
    56.               <EchartPic echartId="myChart3" :echartData="resourceCity"  @getCatalogCityData="resourceCityMethod"  :key="echartKey3"/>
    57.             div>
    58.           div>
    59.         el-col>
    60.         <el-col :span="12">
    61.           <div class="echartsBottomBox">
    62.             <div class="echartsTopTitle">部门div>
    63.             <div class="echartsBoxBottom">
    64.               <EchartBar echartId="myChart4" :echartData="resourceDept"  @getCatalogDeptData="resourceDeptMethod"  :key="echartKey4"/>
    65.             div>
    66.           div>
    67.         el-col>
    68.       el-row>
    69.     div>
    70.   div>
    71. template>
    72. <script>
    73.   import {getDataList,getSystemDept,getResourceDept,getResourceCity,getSystemCity} from "@/api/homePage/index";
    74.   import EchartBar from "@/components/echarts/echartBar";
    75.   import EchartPic from "@/components/echarts/echartPic";
    76.   import * as echarts from "echarts";
    77.  
    78.   export default {
    79.     name: "homePage",
    80.     components: {
    81.       EchartBar,
    82.       EchartPic,
    83.     },
    84.     data() {
    85.       return {
    86.         titleData: [],
    87.         systemDept:[],
    88.         systemCity:[],
    89.         resourceDept:[],
    90.         resourceCity:[],
    91.         echartKey1:0,
    92.         echartKey2:0,
    93.         echartKey3:0,
    94.         echartKey4:0,
    95.       };
    96.     },
    97.     created() {
    98.     },
    99.     mounted() {
    100.       this.loadCountNum();
    101.     },
    102.     methods: {
    103.       loadCountNum() {
    104.         getDataList().then(res => {
    105.           let arry = ['echartsTitleBox1',' echartsTitleBox2','echartsTitleBox3','echartsTitleBox4']
    106.           res.data.forEach((item,index) =>{
    107.             item.className = arry[index] //拼接class值
    108.             if(item.name == 'cityCount'){
    109.               item.title = '地市'
    110.             }else if(item.name == 'deptCount'){
    111.               item.title = '部门'
    112.             }else if(item.name == 'systemCount'){
    113.               item.title = '系统'
    114.             }else if(item.name == 'resoureCount'){
    115.               item.title = '资源目录'
    116.             }
    117.           })
    118.           this.titleData = res.data
    119.         });
    120.         this.systemCityMethod();
    121.         this.systemDeptMethod();
    122.         this.resourceCityMethod();
    123.         this.resourceDeptMethod();
    124.       },
    125.       systemCityMethod(param = ''){
    126.         if(param == ''){
    127.           getSystemCity().then(res => {
    128.             this.systemCity = res.data
    129.             this.echartKey1++
    130.           });
    131.         }else{
    132.           getSystemCity(param.data.name).then(res => {
    133.             //市区下可点击区县
    134.             if(res.data.length != 0){
    135.               this.systemCity = res.data
    136.               this.echartKey1++
    137.             }
    138.           });
    139.         }
    140.         this.systemDeptMethod(param);
    141.       },
    142.       systemDeptMethod(param = ''){
    143.         if(param == '') {
    144.           getSystemDept().then(res => {
    145.             this.systemDept = res.data
    146.             this.echartKey2++
    147.           });
    148.         }else{
    149.           getSystemDept(param.data.name).then(res => {
    150.             if(res.data.length != 0) {
    151.               this.systemDept = res.data
    152.               this.echartKey2++
    153.             }
    154.           });
    155.         }
    156.       },
    157.       resourceCityMethod(param = ''){
    158.         if(param == '') {
    159.           getResourceCity().then(res => {
    160.             this.resourceCity = res.data
    161.             this.echartKey3++
    162.           });
    163.         }else{
    164.           getResourceCity(param.data.name).then(res => {
    165.             if(res.data.length != 0) {
    166.               this.resourceCity = res.data
    167.               this.echartKey3++
    168.             }
    169.           });
    170.         }
    171.         this.resourceDeptMethod(param);
    172.       },
    173.       resourceDeptMethod(param = ''){
    174.         if(param == '') {
    175.           getResourceDept().then(res => {
    176.             this.resourceDept = res.data
    177.             this.echartKey4++
    178.           });
    179.         }else{
    180.           getResourceDept(param.data.name).then(res => {
    181.             if(res.data.length != 0) {
    182.               this.resourceDept = res.data
    183.               this.echartKey4++
    184.             }
    185.           });
    186.         }
    187.       },
    188.     }
    189.   };
    190.  
    191. script>
    192.  
    193. <style scoped="true">
    194.   .mainBox {
    195.     padding-top: 30px;
    196.     padding-left: 30px;
    197.     padding-right: 30px;
    198.   }
    199.  
    200.   .echartsTitleBox1 {
    201.     width: 100%;
    202.     height: 110px;
    203.     background-color: #00a0e9;
    204.     border-radius: 10px;
    205.     /*margin-top: 20px;*/
    206.   }
    207.  
    208.   .echartsTitleBox2 {
    209.     width: 100%;
    210.     height: 110px;
    211.     background-color: #13b5b1;
    212.     border-radius: 10px;
    213.     /*margin-top: 20px;*/
    214.   }
    215.  
    216.   .echartsTitleBox3 {
    217.     width: 100%;
    218.     height: 110px;
    219.     background-color: #00b7ee;
    220.     border-radius: 10px;
    221.     /*padding-top: 20px;*/
    222.   }
    223.  
    224.   .echartsTitleBox4 {
    225.     width: 100%;
    226.     height: 110px;
    227.     background-color: #f19149;
    228.     border-radius: 10px;
    229.     /*margin-top: 20px;*/
    230.   }
    231.  
    232.   .iconCircle {
    233.     width: 60px;
    234.     height: 60px;
    235.     line-height: 60px;
    236.     border-radius: 50%;
    237.     border: 1px solid #fff;
    238.     margin: 0 auto;
    239.     margin-top: 23px;
    240.     display: flex;
    241.     align-items: center;
    242.     justify-content: center;
    243.   }
    244.  
    245.   .iconCircle > i {
    246.     font-size: 40px;
    247.     color: #fff;
    248.   }
    249.  
    250.   .echartsTitleContent {
    251.     margin-top: 23px;
    252.   }
    253.  
    254.   .echartsTitleContent div {
    255.     font-size: 20px;
    256.     color: #fff;
    257.   }
    258.  
    259.   .echartsTitleContent div:last-child {
    260.     margin-top: 5px;
    261.   }
    262.  
    263.   .linebox {
    264.     height: 60px;
    265.     border-bottom: 1px solid #e5e5e5;
    266.     /*margin-top: 10px;*/
    267.   }
    268.  
    269.   .linebox div {
    270.     font-size: 20px;
    271.     height: 60px;
    272.     width: 100px;
    273.     text-align: center;
    274.     line-height: 60px;
    275.     border-bottom: 3px solid #0059c1;
    276.     color: #0059c1;
    277.     font-weight: 600;
    278.   }
    279.  
    280.   .echartsTopBox {
    281.     height: 300px;
    282.     border: 1px solid #e5e5e5;
    283.     border-radius: 10px;
    284.   }
    285.  
    286.   .echartsBottomBox {
    287.     height: 300px;
    288.     border: 1px solid #e5e5e5;
    289.     border-radius: 10px;
    290.   }
    291.  
    292.   .echartsTopTitle {
    293.     font-size: 18px;
    294.     text-align: center;
    295.     margin-top: 10px;
    296.     font-weight: 600;
    297.   }
    298.  
    299.   .echartsBox {
    300.     width: 100%;
    301.     height: 280px;
    302.   }
    303.  
    304.   .echartsBoxBottom {
    305.     width: 100%;
    306.     height: 280px;
    307.   }
    308.  
    309.   @media screen and (max-width: 1400px) and (min-width: 1300px) {
    310.     .echartsBoxBottom {
    311.       height: 250px;
    312.     }
    313.  
    314.     .echartsBox {
    315.       height: 250px;
    316.     }
    317.   }
    318. style>

  • 相关阅读:
    生活锦囊——优美小句
    把握鸿蒙生态机遇，共创智能应用未来
    洛谷C++简单题小练习day12—寻找最小值小程序
    mmcls 多标签模型部署在torch serve
    vw+rem自适应布局
    QML 带框最大化显示方法
    使用双动态令牌混合器学习全局和局部动态以进行视觉识别
    Python采集世界大学排行榜，做数据可视化，来看看你的大学上榜没
    Zabbix Proxy分布式监控
    sql注入(7), python 实现盲注爆破数据库名, 表名, 列名
  • 原文地址：https://blog.csdn.net/qq_38144121/article/details/126153066