初探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>
效果图：
