初探vue+nodejs+echarts展示图表

nodejs服务server.js代码：

 1 var express = require('express')
 2 
 3 var app = express()
 4 
 5 var fs = require('fs')
 6 
 7 var mysql = require('mysql')
 8 
 9 var cors = require('cors')
10 
11 // 设置跨域访问
12 app.all('*', function (req, res, next) {
13   res.header('Access-Control-Allow-Origin', '*')
14   res.header('Access-Control-Allow-Headers', 'X-Requested-With')
15   res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
16   res.header('X-Powered-By', ' 3.2.1')
17   res.header('Content-Type', 'application/json;charset=utf-8')
18   next()
19 })
20 
21 app.use(
22   cors({
23     origin: ['http://localhost:3000'],
24     methods: ['get', 'post'],
25     allowedHeaders: ['Content-Type', 'Authorization']
26   })
27 )
28 
29 const db = mysql.createConnection({
30   host: 'localhost',
31   user: 'root',
32   password: '******',
33   port: '3306',
34   database: 'tables'
35 })
36 
37 db.connect(err => {
38   if (err) throw err
39   console.log('连接成功')
40 })
41 
42 app.get('/schoolpm', (req, res) => {
43   let sql = 'SELECT school_name,qk_count FROM school_all ORDER BY qk_count desc LIMIT 5'
44   db.query(sql, (err, result) => {
45     if (err) {
46       console.log(err)
47     } else {
48       res.json(result)
49     }
50   })
51 })
52 
53 var server = app.listen(3000, function () {
54   var host = server.address().address
55   var port = server.address().port
56   console.log(host, port)
57 })

mysql表数据：

运行node服务测试接口：

html代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3   <head>
  4     <meta charset="UTF-8" />
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6     <title>123</title>
  7     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  8     <script src="node_modules/axios/dist/axios.min.js"></script>
  9     <script src="js/echarts.min.js"></script>
 10     <script src="js/main.js"></script>
 11     <style>
 12       .topSchool {
 13         background-color: rgba(0, 0, 59, 1);
 14         color: beige;
 15       }
 16       #topSchool-pie {
 17         height: 400px;
 18         width: 400px;
 19       }
 20     </style>
 21   </head>
 22   <body>
 23     <div id="schPm">
 24       <div class="topSchool">
 25         <h3>高校排名</h3>
 26         <div id="topSchool-pie"></div>
 27       </div>
 28     </div>
 29 
 30     <script>
 31       var highSchoolPM = new Vue({
 32         el: "#schPm",
 33         data: {
 34           pmList: []
 35         },
 36         created() {
 37           this.getData();
 38         },
 39         methods: {
 40           getData() {
 41             axios
 42               .get(`${api}/schoolpm`)
 43               .then(res => {
 44                 var obj = res.data;
 45                 // school_name替换为name,qk_count替换为value
 46                 obj.forEach(e => {
 47                   e.name = e.school_name;
 48                   e.value = e.qk_count;
 49                   delete e.qk_count;
 50                   delete e.school_name;
 51                 });
 52                 console.log(obj);
 53 
 54                 this.pmList = obj;
 55                 this.$nextTick(() => {
 56                   this.draw();
 57                 });
 58               })
 59               .catch(err => {
 60                 console.log(err);
 61               });
 62           },
 63           draw() {
 64             var _this = this;
 65             var myPM = echarts.init(document.getElementById("topSchool-pie"));
 66             var optionPM = {
 67               title: {
 68                 text: "前五名排名",
 69                 left: "center",
 70                 top: 20,
 71                 textStyle: {
 72                   color: "#ccc"
 73                 }
 74               },
 75 
 76               tooltip: {
 77                 trigger: "item",
 78                 formatter: "{a} <br/>{b} : {c} ({d}%)"
 79               },
 80 
 81               color: ["#0072ff", "#843bff", "#e6772d", "#0033ff", "#48dee6"],
 82 
 83               visualMap: {
 84                 show: false,
 85                 min: 80,
 86                 max: 600,
 87                 inRange: {
 88                   // colorLightness: [0, 1]
 89                 }
 90               },
 91               series: [
 92                 {
 93                   name: "高校期刊资源",
 94                   type: "pie",
 95                   radius: "55%",
 96                   center: ["50%", "50%"],
 97                   data: this.pmList.sort(function(a, b) {
 98                     return a.value - b.value;
 99                   }),
100                   roseType: "radius",
101                   labelLine: {
102                     smooth: 0.2,
103                     length: 10,
104                     length2: 20
105                   },
106                   itemStyle: {
107                     // color: '#c23531',
108                     shadowBlur: 200,
109                     shadowColor: "rgba(0, 0, 0, 0.5)"
110                   },
111 
112                   animationType: "scale",
113                   animationEasing: "elasticOut",
114                   animationDelay: function(idx) {
115                     return Math.random() * 200;
116                   }
117                 }
118               ]
119             };
120             myPM.setOption(optionPM);
121           }
122         }
123       });
124     </script>
125   </body>
126 </html>

效果图：