前端可视化是一个前端最基本的技能,要想做的好看,还是得借助一下百度家的echarts,那要怎么在Vue中使用echarts?这个官网没有给出实例,实例基本都是在jquery里面使用,引入的例子。
Echarts官网:https://echarts.apache.org/zh/index.html
1:在项目里面安装echarts
cnpm install echarts --s
2:在需要用图表的地方引入
import echarts from "echarts";
图片.png
3:打开vue组件
继续写代码,代码如下:
这个时候,可以看到,加载出的折线图了,后面可以继续进行完善。
以上完成的,只是一个静态页面,下面就开始完成动态数据渲染部分的折线图部分啦~~
1:进入项目,npm安装
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
image
3:准备json数据
{
"categories": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
],
"data": [
3,
2,
4,
4,
5
]
}
自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据
http://xxx.com/test.json
4:跨域问题,
一般后端小伙伴给到我们这边的接口里面,应该对跨域问题已经处理好了,所以不需要我们处理了。
如果需要我们处理,我们可以设置代理,利用proxyTable属性实现跨域请求
在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码
(这里处于安全考虑,我隐藏了自己的而服务器域名,如果需要测试,改成你自己的即可)
proxyTable: {
'/api': {
target: 'http://inxxxe.com',//设置你调用的接口域名和端口号
changeOrigin: true,//允许跨域
pathRewrite: {
'^/api': '' //这个是定义要访问的路径,名字随便写
}
}
},
5:打开一个界面test.vue,开始写请求数据的方法
methods: {
getData() {
axios.get('/api/test.json').then(response => {
console.log(response.data);
this.opinionData =response.data.data;
this.drawLine('main')
}, response => {
console.log("error");
});
},
}
6:再次运行
npm run dev
运行成功之后,打开f12,查看network的请求
这个时候,我们可以看见,本地的localhost替代 了我之前放在服务器上的链接的域名,这也是设置代理成功,就解决了跨域的问题了。
请求成功
response里面也有返回值,ok,下一步就要开始将这些数据渲染在前端界面上面了。
test.vue参考代码:
实现效果