vue-echarts图表使用方法及连接后端idea
import ElementUI from 'element-ui';//加入elemt-uiimport Echarts from 'echarts';//配置each,import axios from 'axios'//引用Vue.prototype.$echarts = Echarts;Vue.prototype.$ajax = axios;Vue.use(ElementUI);//连接i
·
- 安装依赖 : 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有很多相似之处,但他的调用方法体的顺序有些不同,所以我这里只有一个方法体,把其他方法进行了合并,在代码里我有很多注释,仔细查看.
注册量是连接后台和数据库,访问量是死数据,后台没有写完,这里我贴入我做的完成图:图片上注册的数据是已经打通的,其他安装依赖,基本配置,自行百度,非常简单.有什么不明白的地方留言,看到之后我会回复.
更多推荐
已为社区贡献1条内容
所有评论(0)