vue-echarts图表使用方法及连接后端idea

• 安装依赖 : cnpm install echarts -S
  echarts连接,自己在里面找到一个喜欢的。
  https://www.echartsjs.com/index.html
• 找好之后,进入对main.js进行配置:

import ElementUI from 'element-ui';  //加入elemt-ui
import 'element-ui/lib/theme-chalk/index.css';

import Echarts from 'echarts';    //配置each,
import axios from 'axios'       //引用

Vue.prototype.$echarts = Echarts;
Vue.prototype.$ajax = axios;

Vue.use(ElementUI);
Vue.use(VueRouter);
//连接idea
Vue.prototype.$http = axios.create({
baseURL:'http://localhost:8082'   //端口号根据自己的进行修改,
})

• 举例视图： 复制左边代码,使用vue需要一个表头,进行实例:

<template>
<div id="wansui" :style="{width: '100%', height: '600px'}"></div>
</template>

<script>
export default {
data() {
return {
kk: []     //这里创建一个数组,后面使用
};
},

//方法体放里面调用运行
mounted() {
this.houtai();
},

methods: {
//连接后台加载方法
<开始-1>
houtai() {
this.$http
.get("/user/getUserRegCount") //路径 <这里就是连接后端的一个方法  .get方法根据自己的修改>
.then(response => {
//把输出的内容返回给data
this.kk = response.data;
<结束-1   中间是连接后台方法>

// 基于准备好的dom，初始化echarts实例
let wansui = this.$echarts.init(document.getElementById("wansui"));

// 绘制图表
wansui.setOption({
title: {
text: "用户数据报表",    		<复制echars的代码从这里开始,下面结束的位置有标记>
subtext: "单位(个)"
},
tooltip: {
trigger: "axis"
},
legend: {
data: ["注册", "访问量"]
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: "category",
data: ["1月", "2月", "3月", "4月", "5月", "6月"]
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "注册",
type: "bar",

//放入后台的数据
data: this.kk 	           //kk是一个数组,在这里进行全局的调用,赋值进去
},
{
name: "访问量",       //访问量是死数据
type: "bar",
data: [50, 90, 80, 75, 65, 102],
markPoint: {
data: [
{ name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
{ name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
data: [{ type: "average", name: "平均值" }]
}
}
]        				<到这里结束,这中间都是复制eharts的代码>
});
})
.catch(error => {      <捕获异常>
console.log(error);
});
}
}
};
</script>

这里设置好之后去idea控制器层进行配置:

@CrossOrigin    //跨域连接,这个必须有的,其他注解看自己项目
@Controller
@RequestMapping("/user")        //路径名字
public class Usercontroller {   //类名

@DubboConsumer
UserService ser;

@ResponseBody
@RequestMapping(value = "/getUserRegCount",method = RequestMethod.GET)  //路径名
public Object getUserRegCount(){
return ser.getMonthRegCountUser();
}

我用的是dubbo, 其他项目同理,把路径注解添加好,和vue一致.
到这里基本就结束了,看不懂的多看几遍,多试验,vue和ajax有很多相似之处,但他的调用方法体的顺序有些不同,所以我这里只有一个方法体,把其他方法进行了合并,在代码里我有很多注释,仔细查看.
注册量是连接后台和数据库,访问量是死数据,后台没有写完,这里我贴入我做的完成图: 图片上注册的数据是已经打通的,其他安装依赖,基本配置,自行百度,非常简单.有什么不明白的地方留言,看到之后我会回复.