vue_echarts可视化

爱不是简单的几个字，爱要付诸行动。

始准备环境：

1.安装 node

node下载链接
在cmd中去敲
查看: node --version

npm --version

升级：npm i -g npm

2.vuecli:vue 脚手架安装

vue install -g @vue/cli

查看：

vue --version

3.创建vue项目

cmd：

vue create 项目名称

选择：

4.vscode编译器打开项目，必须是上面那个项目名程所对应得文件夹

5.查看vue项目结构

6.vue项目支持库

npm i 库名

7.vue项目的运行

npm run serve

开始编写代码

一、html和css

在APP.vue文件中的，如果比赛要求自定vue文件，文件名首字母必须大写。

html

HTML代码写在App.vue中的

 <templete>写HTML代码</templete>

css代码

scc代码写到App.vue

<style>写css代码</style>

二、APP.vue中

<script>写核心代码</script>

导入axios

相当于我们之前的ajax

import axios from ‘axios’

固定格式

export default{
//1.通用的定义
name:'Echars',
	data(){
		return{}
	},
// 2.功能函数，重写系统定义函数mounted():当dom渲染完成后触发
	moubted(){
		this:$nextTick(()=>{
		//自定义函数放在这里
		this.loadData_1()
		})
		},
	//3.自定义函数，加载echarts数据的函数，初始化echarts的函数
	methods:{
	loadData_1(){
	//数据是通过ajax方式请求来的，这里使用axios.get(数据接口)方法根据接口获取数据
	axios.get('/api/abc1').then(res => {//这里很重要，不要写错
	//讲echarts中的option放在这里
	const myoption= {
	//从echarts官网上复制option代码
	};
	this.init1(myoption)
	})
	};
	//初始化echarts
	init1(data1){
	const myChart =window.echarts.init(document.getElementById('l-img'))
	}
}

三、新建文件夹node-server，新建文件夹app.js并写入代码

定义第一个图表的数据接口

app.get('/api/abc1'.(req,res)=>{
	const data = {
	name:["python","java","hadoop","scala","spark"],
	value:[90,50,85,97,64]
	}
	res.json(data) //将数据转换为json格式
	})

四、设置跨域：在目录新建文件vue.config.js

module.exports = {
	devServer:{
		port:8000,
		proxy:{
			'/api':{
				target:'http://localhost:30000',
				changeOrigin:true
				}
			}
		}
	}

注意：在运行在package.json文件的scripts中新建node:serve

五、与MySQL建立连接

在node-server创建一个名为db.js的文件

在db.js中编写

const mysql = require('mysql');
const conn = mysql.createConnection({
	host:"localhost",
	port:3306,
	user:"root",
	password:"lmy3.1415926",	//数据库的密码
	database:"lagou"	//数据库的名称
});
const query = (sql,callback)=>{
	conn.query(sql,function(error,results){
		if(typeof callback ==='function'){
			callback(error,results)
			}
		});
	}
module.exports ={
query}

在app.js中修改相关配置

const db = require(./db)

修改App.vue中的设置

然后启动node

npm run node:serve
npm run serve