中國軟體杯---電力客戶行為分析---圖表聯動echarts-demo（flask）

来源:https://www.cnblogs.com/rainbow-1/archive/2022/03/29/16073055.html
-Advertisement-
Play Games

中國軟體杯 電力客戶行為分析 圖表聯動echarts-demo（flask） 題目鏈接（可下載原始CSV數據集）：http://www.cnsoftbei.com/plus/view.php?aid=715 註：其中引用的js文件自行查找 1）完整的原始數據（elec_0） 屬性含義： userid ...


中國軟體杯---電力客戶行為分析---圖表聯動echarts-demo（flask）

題目鏈接（可下載原始CSV數據集）：http://www.cnsoftbei.com/plus/view.php?aid=715

註：其中引用的js文件自行查找

1）完整的原始數據（elec_0）

屬性含義：

  1. userid：用戶id

  2. money_sum：用戶個人總繳費金額

  3. times：用戶個人繳費次數

  4. money_aver：用戶個人繳費平均金額

  5. std_money：全體用戶繳費平均金額

  6. std_times：全體用戶繳費平均次數

  7. usertype：初步判定用戶類型

ps：判斷用戶類型的依據：

/*
SQLyog Ultimate v10.00 Beta1
MySQL - 5.5.15 : Database - spark
*********************************************************************
*/


/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`spark` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `spark`;

/*Table structure for table `elec_0` */

DROP TABLE IF EXISTS `elec_0`;

CREATE TABLE `elec_0` (
  `userid` varchar(45) DEFAULT NULL,
  `money_sum` varchar(45) DEFAULT NULL,
  `times` varchar(45) DEFAULT NULL,
  `money_aver` varchar(45) DEFAULT NULL,
  `std_money` varchar(45) DEFAULT NULL,
  `std_times` varchar(45) DEFAULT NULL,
  `usertype` varchar(45) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/*Data for the table `elec_0` */

insert  into `elec_0`(`userid`,`money_sum`,`times`,`money_aver`,`std_money`,`std_times`,`usertype`) values ('1000000001','1189','10','118.9','707.26','6.66','高價值型客戶'),('1000000002','490','7','70','707.26','6.66','大眾型客戶'),('1000000003','1180','7','168.571','707.26','6.66','高價值型客戶'),('1000000004','621','8','77.625','707.26','6.66','大眾型客戶'),('1000000005','1500','7','214.286','707.26','6.66','高價值型客戶'),('1000000006','1010','7','144.286','707.26','6.66','高價值型客戶'),('1000000007','1106','7','158','707.26','6.66','高價值型客戶'),('1000000008','1074','7','153.429','707.26','6.66','高價值型客戶'),('1000000009','970','7','138.571','707.26','6.66','高價值型客戶'),('1000000010','773','8','96.625','707.26','6.66','高價值型客戶'),('1000000011','748','7','106.857','707.26','6.66','高價值型客戶'),('1000000012','911','7','130.143','707.26','6.66','高價值型客戶'),('1000000013','835','7','119.286','707.26','6.66','高價值型客戶'),('1000000014','749','7','107','707.26','6.66','高價值型客戶'),('1000000015','700','7','100','707.26','6.66','大眾型客戶'),('1000000016','784','8','98','707.26','6.66','高價值型客戶'),('1000000017','780','7','111.429','707.26','6.66','高價值型客戶'),('1000000018','641','7','91.5714','707.26','6.66','大眾型客戶'),('1000000019','729','6','121.5','707.26','6.66','潛力型客戶'),('1000000020','899','7','128.429','707.26','6.66','高價值型客戶'),('1000000021','757','7','108.143','707.26','6.66','高價值型客戶'),('1000000022','534','6','89','707.26','6.66','低價值型客戶'),('1000000023','493','5','98.6','707.26','6.66','低價值型客戶'),('1000000024','904','7','129.143','707.26','6.66','高價值型客戶'),('1000000025','651','7','93','707.26','6.66','大眾型客戶'),('1000000026','777','7','111','707.26','6.66','高價值型客戶'),('1000000027','631','7','90.1429','707.26','6.66','大眾型客戶'),('1000000028','571','6','95.1667','707.26','6.66','低價值型客戶'),('1000000029','691','7','98.7143','707.26','6.66','大眾型客戶'),('1000000030','671','7','95.8571','707.26','6.66','大眾型客戶'),('1000000031','655','7','93.5714','707.26','6.66','大眾型客戶'),('1000000032','519','6','86.5','707.26','6.66','低價值型客戶'),('1000000033','545','6','90.8333','707.26','6.66','低價值型客戶'),('1000000034','721','7','103','707.26','6.66','高價值型客戶'),('1000000035','769','7','109.857','707.26','6.66','高價值型客戶'),('1000000036','645','6','107.5','707.26','6.66','低價值型客戶'),('1000000037','627','7','89.5714','707.26','6.66','大眾型客戶'),('1000000038','534','6','89','707.26','6.66','低價值型客戶'),('1000000039','750','7','107.143','707.26','6.66','高價值型客戶'),('1000000040','656','7','93.7143','707.26','6.66','大眾型客戶'),('1000000041','683','6','113.833','707.26','6.66','低價值型客戶'),('1000000042','612','7','87.4286','707.26','6.66','大眾型客戶'),('1000000043','640','7','91.4286','707.26','6.66','大眾型客戶'),('1000000044','601','6','100.167','707.26','6.66','低價值型客戶'),('1000000045','711','7','101.571','707.26','6.66','高價值型客戶'),('1000000046','711','6','118.5','707.26','6.66','潛力型客戶'),('1000000047','654','7','93.4286','707.26','6.66','大眾型客戶'),('1000000048','678','6','113','707.26','6.66','低價值型客戶'),('1000000049','589','7','84.1429','707.26','6.66','大眾型客戶'),('1000000050','568','7','81.1429','707.26','6.66','大眾型客戶'),('1000000051','597','6','99.5','707.26','6.66','低價值型客戶'),('1000000052','766','7','109.429','707.26','6.66','高價值型客戶'),('1000000053','694','7','99.1429','707.26','6.66','大眾型客戶'),('1000000054','459','6','76.5','707.26','6.66','低價值型客戶'),('1000000055','788','7','112.571','707.26','6.66','高價值型客戶'),('1000000056','714','7','102','707.26','6.66','高價值型客戶'),('1000000057','711','7','101.571','707.26','6.66','高價值型客戶'),('1000000058','685','7','97.8571','707.26','6.66','大眾型客戶'),('1000000059','740','8','92.5','707.26','6.66','高價值型客戶'),('1000000060','730','7','104.286','707.26','6.66','高價值型客戶'),('1000000061','683','7','97.5714','707.26','6.66','大眾型客戶'),('1000000062','773','7','110.429','707.26','6.66','高價值型客戶'),('1000000063','628','7','89.7143','707.26','6.66','大眾型客戶'),('1000000064','520','6','86.6667','707.26','6.66','低價值型客戶'),('1000000065','734','7','104.857','707.26','6.66','高價值型客戶'),('1000000066','699','6','116.5','707.26','6.66','低價值型客戶'),('1000000067','689','7','98.4286','707.26','6.66','大眾型客戶'),('1000000068','711','7','101.571','707.26','6.66','高價值型客戶'),('1000000069','548','6','91.3333','707.26','6.66','低價值型客戶'),('1000000070','667','8','83.375','707.26','6.66','大眾型客戶'),('1000000071','742','7','106','707.26','6.66','高價值型客戶'),('1000000072','798','7','114','707.26','6.66','高價值型客戶'),('1000000073','404','4','101','707.26','6.66','低價值型客戶'),('1000000074','636','7','90.8571','707.26','6.66','大眾型客戶'),('1000000075','629','7','89.8571','707.26','6.66','大眾型客戶'),('1000000076','725','7','103.571','707.26','6.66','高價值型客戶'),('1000000077','720','7','102.857','707.26','6.66','高價值型客戶'),('1000000078','592','5','118.4','707.26','6.66','低價值型客戶'),('1000000079','597','6','99.5','707.26','6.66','低價值型客戶'),('1000000080','603','7','86.1429','707.26','6.66','大眾型客戶'),('1000000081','680','7','97.1429','707.26','6.66','大眾型客戶'),('1000000082','508','5','101.6','707.26','6.66','低價值型客戶'),('1000000083','748','7','106.857','707.26','6.66','高價值型客戶'),('1000000084','1289','7','184.143','707.26','6.66','高價值型客戶'),('1000000085','569','7','81.2857','707.26','6.66','大眾型客戶'),('1000000086','325','4','81.25','707.26','6.66','低價值型客戶'),('1000000087','651','7','93','707.26','6.66','大眾型客戶'),('1000000088','538','7','76.8571','707.26','6.66','大眾型客戶'),('1000000089','388','5','77.6','707.26','6.66','低價值型客戶'),('1000000090','612','6','102','707.26','6.66','低價值型客戶'),('1000000091','761','7','108.714','707.26','6.66','高價值型客戶'),('1000000092','254','3','84.6667','707.26','6.66','低價值型客戶'),('1000000093','463','5','92.6','707.26','6.66','低價值型客戶'),('1000000094','626','6','104.333','707.26','6.66','低價值型客戶'),('1000000095','999','7','142.714','707.26','6.66','高價值型客戶'),('1000000096','916','7','130.857','707.26','6.66','高價值型客戶'),('1000000097','649','6','108.167','707.26','6.66','低價值型客戶'),('1000000098','735','6','122.5','707.26','6.66','潛力型客戶'),('1000000099','853','6','142.167','707.26','6.66','潛力型客戶'),('1000000100','943','7','134.714','707.26','6.66','高價值型客戶');

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

2）環形圖數據（user_type）

用戶類型分析數據

/*
SQLyog Ultimate v10.00 Beta1
MySQL - 5.5.15 : Database - spark
*********************************************************************
*/


/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`spark` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `spark`;

/*Table structure for table `user_type` */

DROP TABLE IF EXISTS `user_type`;

CREATE TABLE `user_type` (
  `usertype` varchar(45) DEFAULT NULL,
  `userid` varchar(45) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/*Data for the table `user_type` */

insert  into `user_type`(`usertype`,`userid`) values ('高價值型客戶','1000000001'),('大眾型客戶','1000000002'),('高價值型客戶','1000000003'),('大眾型客戶','1000000004'),('高價值型客戶','1000000005'),('高價值型客戶','1000000006'),('高價值型客戶','1000000007'),('高價值型客戶','1000000008'),('高價值型客戶','1000000009'),('高價值型客戶','1000000010'),('高價值型客戶','1000000011'),('高價值型客戶','1000000012'),('高價值型客戶','1000000013'),('高價值型客戶','1000000014'),('大眾型客戶','1000000015'),('高價值型客戶','1000000016'),('高價值型客戶','1000000017'),('大眾型客戶','1000000018'),('潛力型客戶','1000000019'),('高價值型客戶','1000000020'),('高價值型客戶','1000000021'),('低價值型客戶','1000000022'),('低價值型客戶','1000000023'),('高價值型客戶','1000000024'),('大眾型客戶','1000000025'),('高價值型客戶','1000000026'),('大眾型客戶','1000000027'),('低價值型客戶','1000000028'),('大眾型客戶','1000000029'),('大眾型客戶','1000000030'),('大眾型客戶','1000000031'),('低價值型客戶','1000000032'),('低價值型客戶','1000000033'),('高價值型客戶','1000000034'),('高價值型客戶','1000000035'),('低價值型客戶','1000000036'),('大眾型客戶','1000000037'),('低價值型客戶','1000000038'),('高價值型客戶','1000000039'),('大眾型客戶','1000000040'),('低價值型客戶','1000000041'),('大眾型客戶','1000000042'),('大眾型客戶','1000000043'),('低價值型客戶','1000000044'),('高價值型客戶','1000000045'),('潛力型客戶','1000000046'),('大眾型客戶','1000000047'),('低價值型客戶','1000000048'),('大眾型客戶','1000000049'),('大眾型客戶','1000000050'),('低價值型客戶','1000000051'),('高價值型客戶','1000000052'),('大眾型客戶','1000000053'),('低價值型客戶','1000000054'),('高價值型客戶','1000000055'),('高價值型客戶','1000000056'),('高價值型客戶','1000000057'),('大眾型客戶','1000000058'),('高價值型客戶','1000000059'),('高價值型客戶','1000000060'),('大眾型客戶','1000000061'),('高價值型客戶','1000000062'),('大眾型客戶','1000000063'),('低價值型客戶','1000000064'),('高價值型客戶','1000000065'),('低價值型客戶','1000000066'),('大眾型客戶','1000000067'),('高價值型客戶','1000000068'),('低價值型客戶','1000000069'),('大眾型客戶','1000000070'),('高價值型客戶','1000000071'),('高價值型客戶','1000000072'),('低價值型客戶','1000000073'),('大眾型客戶','1000000074'),('大眾型客戶','1000000075'),('高價值型客戶','1000000076'),('高價值型客戶','1000000077'),('低價值型客戶','1000000078'),('低價值型客戶','1000000079'),('大眾型客戶','1000000080'),('大眾型客戶','1000000081'),('低價值型客戶','1000000082'),('高價值型客戶','1000000083'),('高價值型客戶','1000000084'),('大眾型客戶','1000000085'),('低價值型客戶','1000000086'),('大眾型客戶','1000000087'),('大眾型客戶','1000000088'),('低價值型客戶','1000000089'),('低價值型客戶','1000000090'),('高價值型客戶','1000000091'),('低價值型客戶','1000000092'),('低價值型客戶','1000000093'),('低價值型客戶','1000000094'),('高價值型客戶','1000000095'),('高價值型客戶','1000000096'),('低價值型客戶','1000000097'),('潛力型客戶','1000000098'),('潛力型客戶','1000000099'),('高價值型客戶','1000000100');

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

實現環形圖和表格圖表聯動（聯動實現方式一）

4種用戶類型數統計

liandong.html 完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖表聯動（環形圖）</title>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div id="main" style="height: 400px;width: 600px"></div>
    <table class="table table-bordered table-hover" id="table">
        <thead>
            <tr>
                <th>用戶類型</th>
                <th>用戶人數</th>
            </tr>
        </thead>
        <tbody>
            <tr id="tr1">
                <td>{{ data[0][0] }}</td>
                <td>{{ data[0][1] }}</td>
            </tr>
            <tr id="tr2">
                <td>{{ data[1][0] }}</td>
                <td>{{ data[1][1] }}</td>
            </tr>
            <tr id="tr3">
                <td>{{ data[2][0] }}</td>
                <td>{{ data[2][1] }}</td>
            </tr>
            <tr id="tr4">
                <td>{{ data[3][0] }}</td>
                <td>{{ data[3][1] }}</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
        // 頁面載入函數
        $(function () {
            //進行echarts的初始化
            var myEcharts = echarts.init(document.getElementById("main"));
            var option = {
                // 定義標題
                title : {
                    text:"圖表聯動demo",
                    textStyle: {
                        color:'#deb252',
                        size:10
                    }
                },
                // 滑鼠懸停顯示數據
                tooltip:{
                },
                //圖例
                legend : {
                    top: '10%',
                    left: 'center',
                    {#data: {{ data1|tojson }}#}
                },
                //數據
                series :[
                    {
                        radius:['55%','70%'], //半徑
                        label:{
                            normal:{
                                // 取消在原來的位置顯示
                                show:false,
                                // 在中間顯示
                                position:'center'
                            },
                            // 高亮扇區
                            emphasis:{
                                show:true,
                                textStyle:{
                                    fontSize:30,
                                    fontWeight:'bold'
                                }
                            }
                        },
                        data:[
                                // 對應圖例的值
                                {name:'高價值型客戶',value:{{ data2[0] }}},
                                {name:'大眾型客戶',value:{{ data2[1] }}},
                                {name:'潛力型客戶',value:{{ data2[2] }}},
                                {name:'低價值型客戶',value:{{ data2[3] }}}

                            ],
                        type:'pie',
                        //關掉南丁格爾圖
                        //roseType:'radius'
                    }
                ]
            };
            // 設置配置項
            myEcharts.setOption(option);

            // 設置echarts的點擊事件
            myEcharts.on('click',function (params) {
                // 獲取table下所有的tr
                let trs = $("#table tbody tr");
                for (let i = 0;i<trs.length;i++){
                    // 獲取tr下所有的td
                    let tds = trs.eq(i).find("td");
                    // 先把之前的標記的success去掉
                    $("#table tbody tr").eq(i).removeClass('success');
                    // 如果點擊圖示的名字和table下的某一個行的第一個td的值一樣
                    if (params.name == tds.eq(0).text()){
                        //設置success狀態
                        $("#table tbody tr").eq(i).addClass('success');
                        // 跳轉到頁面指定的id位置
                        $("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000);
                    }
                }
            });

            // 當滑鼠落在tr時，顯示浮動
            $("#table tbody").find("tr").on("mouseenter",function () {
                // 獲得當前匹配元素的個數
                let row = $(this).prevAll().length;
                // 獲得當前tr下td的名字
                let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
                // 設置浮動
                myEcharts.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//選中高亮
            });
            // 當滑鼠移開tr時候取消浮動
            $("#table tbody").find("tr").on("mouseleave",function () {
                // 獲得當前匹配元素的個數
                let row = $(this).prevAll().length;
                // 獲得當前tr下td的名字
                let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
                // 設置浮動
                myEcharts.dispatchAction({ type: 'hideTip', name:name});//選中高亮
            });
        });
    </script>
</body>
</html>

實現聯動的js代碼：

  1. 實現滑鼠點擊環形圖表格高亮
            // 設置echarts的點擊事件
            myEcharts.on('click',function (params) {
                // 獲取table下所有的tr
                let trs = $("#table tbody tr");
                for (let i = 0;i<trs.length;i++){
                    // 獲取tr下所有的td
                    let tds = trs.eq(i).find("td");
                    // 先把之前的標記的success去掉
                    $("#table tbody tr").eq(i).removeClass('success');
                    // 如果點擊圖示的名字和table下的某一個行的第一個td的值一樣
                    if (params.name == tds.eq(0).text()){
                        //設置success狀態
                        $("#table tbody tr").eq(i).addClass('success');
                        // 跳轉到頁面指定的id位置
                        $("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000);
                    }
                }
            });
  1. 實現滑鼠懸停在表格上環形圖高亮
			// 當滑鼠落在tr時，顯示浮動
            $("#table tbody").find("tr").on("mouseenter",function () {
                // 獲得當前匹配元素的個數
                let row = $(this).prevAll().length;
                // 獲得當前tr下td的名字
                let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
                // 設置浮動
                myEcharts.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//選中高亮
            });
            // 當滑鼠移開tr時候取消浮動
            $("#table tbody").find("tr").on("mouseleave",function () {
                // 獲得當前匹配元素的個數
                let row = $(this).prevAll().length;
                // 獲得當前tr下td的名字
                let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
                // 設置浮動
                myEcharts.dispatchAction({ type: 'hideTip', name:name});//選中高亮
            });

其中需要註意的幾個地方：

  • 獲取某表格中所有的tr

    let trs = $("#table tbody tr");

  • 遍歷所有的tr，trs.length是該列表的長度。

  • 獲取某一行的所有單元格td

    let tds = trs.eq(i).find("td");

  • 修改某處的CSS樣式（移除或添加）

    $("#table tbody tr").eq(i).removeClass('xxx');

    $("#table tbody tr").eq(i).addClass('xxx');

  • 跳轉頁面的制定id位置

    $("html,body").animate({scrollTop:$("#table tbody tr").eq(i).offset().top},1000);

app.py的路由代碼

@app.route('/liandong')
def liandong():
        data1 = []
        data2 = []
        sql = 'select usertype,count(*) from user_type group by usertype'
        db = mysql_util.MysqlHelper(database='spark', user='root', passwd='000429', port=3306, host='127.0.0.1')
        data = db.all(sql)
        for i in data:
                data1.append(i[0])
                data2.append(i[1])
        print("圖表聯動（路由）！")
        return render_template("liandong.html", data=data, data1=data1, data2=data2)

utils/mysql_util.py 資料庫操作工具代碼

import pymysql
class MysqlHelper():
    def __init__(self, host, port, database, user, passwd, charset='utf8'):
        self.host = host
        self.port = port
        self.db = database
        self.user = user
        self.password = passwd
        self.charset = charset

    def open(self):
        # 連接資料庫
        self.conn = pymysql.connect(host=self.host, port=self.port, db=self.db,
                                    user=self.user, passwd=self.password, charset=self.charset)
        # 創建游標對象
        self.cursor = self.conn.cursor()

    # 關閉
    def close(self):
        self.cursor.close()
        self.conn.close()

    # 增加、修改、刪除命令語句
    def cud(self, sql, params=(), msg="操作成功！"):
        try:
            self.open()
            # 處理邏輯數據，傳入sql語句以及參數化
            self.cursor.execute(sql, params)
            # 執行事務
            self.conn.commit()
            self.close()
            # 這樣可以修改輸出的操作成功信息提示
            print(msg)
            return msg
        except Exception as e:
            self.conn.rollback()
            print("錯誤", e)
            return e

    # 查詢所有數據,多個值
    def all(self, sql, params=()):
        try:
            self.open()
            self.cursor.execute(sql, params)
            data = self.cursor.fetchall()
            self.close()
            return data
        except Exception as e:
            print("錯誤", e)

if __name__ == '__main__':
    db = MysqlHelper(database='spark', user='root', passwd='000429', port=3306, host='127.0.0.1')
    sql = 'select * from user_type;'
    data = db.all(sql)
    print(data)

​ 可以看到這種方式是存在瑕疵的，最完美的實現方式應該是不設置點擊事件，而是全部由滑鼠懸停來觸發圖表變化。

最終實現效果：

3）實現南丁格爾玫瑰圖和表格圖表聯動（聯動實現方式二）

INSERT INTO user_top5 SELECT *,(times-std_times)*money_aver AS std_top5 FROM elec_0 ORDER BY std_top5 DESC LIMIT 5;

可能最有潛力成為高價值型用戶的TOP5

數據來源：用每個用戶自己的繳費次數 減去 全部用戶的平均繳費次數 然後乘以該用戶自己的平均繳費金額 最後取前五名

/*
SQLyog Ultimate v10.00 Beta1
MySQL - 5.5.15 : Database - spark
*********************************************************************
*/


/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`spark` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `spark`;

/*Table structure for table `user_top5` */

DROP TABLE IF EXISTS `user_top5`;

CREATE TABLE `user_top5` (
  `userid` varchar(45) DEFAULT NULL,
  `money_sum` varchar(45) DEFAULT NULL,
  `times` varchar(45) DEFAULT NULL,
  `money_aver` varchar(45) DEFAULT NULL,
  `std_money` varchar(45) DEFAULT NULL,
  `std_times` varchar(45) DEFAULT NULL,
  `usertype` varchar(45) DEFAULT NULL,
  `std_top5` varchar(45) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

/*Data for the table `user_top5` */

insert  into `user_top5`(`userid`,`money_sum`,`times`,`money_aver`,`std_money`,`std_times`,`usertype`,`std_top5`) values ('1000000001','1189','10','118.9','707.26','6.66','高價值型客戶','397.126'),('1000000016','784','8','98','707.26','6.66','高價值型客戶','131.32'),('1000000010','773','8','96.625','707.26','6.66','高價值型客戶','129.4775'),('1000000059','740','8','92.5','707.26','6.66','高價值型客戶','123.94999999999999'),('1000000070','667','8','83.375','707.26','6.66','大眾型客戶','111.72249999999998');

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

為了簡便處理，沒有連接資料庫，而是直接在界面上完成了圖表聯動（數據固定填寫在html頁面上）。

meigui.html 完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖表聯動（玫瑰圖）</title>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <script src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    *{
        margin:0px;
        padding:0px;
    }
    .mycss1{
        float:left;
        width:49%;
        border:1px solid #F00;
        height: 600px;
    }
    .mycss2{
        float:left;
        width:49%;
        border:1px solid #F00;
        height: 600px;
    }
    </style>
</head>
<body>
    <div id="main" class="mycss1" ></div>
    <div class="mycss2" >
    <table class="table table-bordered table-hover" id="table">
        <thead>
            <tr>
                <th>用戶ID</th>
                <th>加權規則繳費金額</th>
            </tr>
        </thead>
        <tbody>
            <tr id="tr1">
                <td>1000000001</td>
                <td>397.126</td>
            </tr>
            <tr id="tr2">
                <td>1000000016</td>
                <td>131.32</td>
            </tr>
            <tr id="tr3">
                <td>1000000010</td>
                <td>129.4775</td>
            </tr>
            <tr id="tr4">
                <td>1000000059</td>
                <td>123.94999999999999</td>
            </tr>
            <tr id="tr5">
                <td>1000000070</td>
                <td>111.72249999999998</td>
            </tr>
        </tbody>
    </table>
    </div>

</body>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      legend: {
        top: 'bottom'
      },
        // 滑鼠懸停顯示數據
       tooltip:{

       },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: '潛在高價值用戶Top5',
          type: 'pie',
          radius: [50, 250],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 397.126, name: '1000000001' },
            { value: 131.32, name: '1000000016' },
            { value: 129.4775, name: '1000000010' },
            { value: 123.94999999999999, name: '1000000059' },
            { value: 111.72249999999998, name: '1000000070' },
          ]
        }
      ]
    };

    option && myChart.setOption(option);
</script>
<!--  圖表聯動 -->
<script>
    //滑鼠懸浮在表格上，玫瑰圖高亮！
            // 當滑鼠落在tr時，顯示浮動
            $("#table tbody").find("tr").on("mouseenter",function () {
                // 獲得當前匹配元素的個數
                let row = $(this).prevAll().length;
                // 獲得當前tr下td的名字
                let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
                // 設置浮動
                myChart.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//選中高亮
            });
            // 當滑鼠移開tr時候取消浮動
            $("#table tbody").find("tr").on("mouseleave",function () {
                // 獲得當前匹配元素的個數
                let row = $(this).prevAll().length;
                // 獲得當前tr下td的名字
                let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
                // 設置浮動
                myChart.dispatchAction({ type: 'hideTip', name:name});//選中高亮
            });
    //----------------------------------------------------------------------------------------
    //滑鼠懸停玫瑰圖上，表格高亮！
            myChart.on('mouseOver', function (params) {
                let trs=$("#table tbody").find("tr")
                let row = trs.prevAll().length; //4 這裡獲取的是該tr之前的行數，一共5行，如果是第5行則最多有4行
                for (i=0;i<=row;i++){
                    let name = $("#table tbody").find("tr").eq(i).find("td").eq(0).text();
                    if(name == params.name){
                        $("#table tbody").children().eq(i).css("background", "rgba(176, 196, 222,1)")
                    }
                }
            });

            myChart.on('mouseOut', function (params) {
                let trs=$("#table tbody").find("tr")
                let row = trs.prevAll().length;
                for (i=0;i<=row;i++){
                    let name = $("#table tbody").find("tr").eq(i).find("td").eq(0).text();
                    if(name == params.name){
                        $("#table tbody").children().eq(i).css("background", "rgba(176, 196, 222,0.1)")
                    }
                }
            });
</script>
</html>

實現聯動的js代碼

<!--  圖表聯動 -->
<script>
    //滑鼠懸浮在表格上，玫瑰圖高亮！
            // 當滑鼠落在tr時，顯示浮動
            $("#table tbody").find("tr").on("mouseenter",function () {
                // 獲得當前匹配元素的個數
                let row = $(this).prevAll().length;
                // 獲得當前tr下td的名字
                let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
                // 設置浮動
                myChart.dispatchAction({ type: 'showTip',seriesIndex: 0, name:name});//選中高亮
            });
            // 當滑鼠移開tr時候取消浮動
            $("#table tbody").find("tr").on("mouseleave",function () {
                // 獲得當前匹配元素的個數
                let row = $(this).prevAll().length;
                // 獲得當前tr下td的名字
                let name = $("#table tbody").find("tr").eq(row).find("td").eq(0).text();
                // 設置浮動
                myChart.dispatchAction({ type: 'hideTip', name:name});//選中高亮
            });
    //----------------------------------------------------------------------------------------
    //滑鼠懸停玫瑰圖上，表格高亮！
            myChart.on('mouseOver', function (params) {
                let trs=$("#table tbody").find("tr")
                let row = trs.prevAll().length; //4 這裡獲取的是該tr之前的行數，一共5行，如果是第5行則最多有4行
                for (i=0;i<=row;i++){
                    let name = $("#table tbody").find("tr").eq(i).find("td").eq(0).text();
                    if(name == params.name){
                        $("#table tbody").children().eq(i).css("background", "rgba(176, 196, 222,1)")
                    }
                }
            });

            myChart.on('mouseOut', function (params) {
                let trs=$("#table tbody").find("tr")
                let row = trs.prevAll().length;
                for (i=0;i<=row;i++){
                    let name = $("#table tbody").find("tr").eq(i).find("td").eq(0).text();
                    if(name == params.name){
                        $("#table tbody").children().eq(i).css("background", "rgba(176, 196, 222,0.1)")
                    }
                }
            });
</script>

這個方法實現了懸停動態效果，使用 myChart.on('mouseOver', function (params)和myChart.on('mouseOut', function (params) 滑鼠狀態監聽方法代替了 myEcharts.on('click',function (params) 的滑鼠點擊事件方法。

最終實現效果：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS全埋點解決方案-應用退出和啟動
    前言 ​ 通過應用程式退出事件，可以分析應用程式的平均使用時長；通過應用程式的啟動事件，可以分析日活和新增。我們可以通過全埋點方式 SDK 實現應用程式的退出和啟動事件。 一、全埋點的簡介 ​ 目前、全埋點採集可以採集一下4個事件。 1、$AppEnd 事件：應用程式退出事件 2、$AppStart ...
  • 拿捏了！這樣的購物體驗才深得用戶心
    如何把我們最熟悉的購物變得簡單、直接、充滿想象力？ 有的時候用戶想要一聲令下就能看到自己心儀的商品，有的時候用戶需要一個智能購物管家來管理自己常用的卡券，甚至還想要在股掌之間、分秒之際就掌握商品全貌信息。對於用戶日益豐富的想象力，移動應用開發者能做些什麼呢？ 詳情請看視頻 【繪“聲”繪“色”】 線上 ...
  • 【Harmony OS】【JAVA UI】鴻蒙怎麼實現無限輪播功能
    關於 HarmonyOS 開發中鴻蒙的無線輪播功能（效果圖如下）是一個很常見的功能，在鴻蒙中怎麼實現呢？今天寫一個demo來記錄一下該功能的實現，主要分為“準備工作”，“圖片輪播”，“無線輪播”，“運行效果”四個方面進行實 1. 準備工作 1.1 想要實現無線輪播功能需要查看PageSlider和“ ...
  • transition和animation的區別是什麼？
    一、transition（過渡、轉變的意思） transition 屬性是一個簡寫屬性，用於設置四個過渡屬性： 1. transition-property：設置過渡效果的屬性名稱（預設值是all）； 2. transition-duration：設置過渡完成所需要的時間（預設值是0）； 3. tr ...
  • AJAX（Web數據交互方式）
    使用 Ajax 技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面，這使得程式能夠更快地回應用戶的操作。 ...
  • JS—關於排序
    一、冒泡排序 原理：相鄰兩元素之間兩兩比較，比較出大值進行賦值互換，再依次與相鄰的元素比較，層層遞進。#互換元素位置，相互賦值。 時間複雜度：最好O(n)，最差O(n^2) 1、比較相鄰的兩個元素，如果前一個比後一個大，則交換位置。2、比較完第一輪的時候，最後一個元素是最大的元素。3、這時候最後一個 ...
  • JS JSON格式化列印：JSON.stringify方法
    具體示例 //代碼 console.log(JSON.stringify({ x: 5, y: 6 },null,2)); //輸出結果 { "x": 5, "y": 6 } JSON.stringify() 介紹 JSON.stringify()方法將一個JavaScript對象或值轉換為JSON ...
  • VuePress 博客搭建系列 33 篇正式完結！
    前言 VuePress 博客搭建系列是我寫的第 6 個系列文章，前 5 個系列分別是 JavaScript 深入系列，JavaScript 專題系列、underscore 系列、ES6 系列、TypeScript 系列。 VuePress 博客搭建系列共計 33 篇，講解使用 VuePress 搭建 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類