网上方法千千万，由己验明知真假。———— 只灯片笺
本文主要内容：
1. 如何在Vue项目中引入Echarts；
2. 如何使用Echarts在vue项目中；
3. 如何更新数据；
1.引入 Echarts
a. 安装 Echarts；
npm install echarts
b. 查看是否引入成功；
npm list --depth=0
引入成功.png
c. 在 main.js 中输入如下内容，全局引入；
// 全局引入echarts；
import echarts from "echarts";
// 引入china.js/world.js 是为了使地图显示出来；
import "echarts/map/js/china.js"
import "echarts/map/js/world.js"
Vue.prototype.$echarts = echarts;
2. 使用 Echarts 在 Vue 项目中
a. 在 components 目录下，新建一个名为 xxx.vue 的文件，写入如下代码；
注释： 这样写的目的是为了将这些chart图表进行组件化，也是充分利用了vue组件化的思想；同时也是为了后期的维护方便；
<template>
<div id="line" style="height: 100%; width: 100%;"></div>
</template>
<script>
export default {
name: "SafeThingTrendLineChart",
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("line"));
// 指定图表的配置项和数据
let option = {
title: {
text: '安全事件趋势(近7日)',
left: 'left'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
lineStyle: {
color: '#52b7ff'
},
areaStyle: {
color: '#52b7ff',
opacity: 0.3
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
},
mounted() {
this.drawLine();
}
}
</script>
<style scoped>
</style>
b. 在需要的地方，引入该组件；
<template>
......
......
<div class="row3_right_div">
<SafeThingTrendLineChart></SafeThingTrendLineChart>
</div>
......
......
</template>
<script>
import SafeThingTrendLineChart from "@/components/safetrend/SafeThingTrendLineChart";
export default {
name: "KnowFuture",
components: {
SafeThingTrendLineChart
}
}
</script>
<style scoped lang="scss">
/*div样式*/
.row3_right_div {
height: 253px;
margin-top: 15px;
padding: 10px 10px 10px 10px;
background-color: #fff;
/*边框线宽度*/
border: 1px solid #ccc;
/*圆角化*/
border-radius: 5px;
/*阴影效果*/
box-shadow: 0 0 4px 0 #ccc;
}
</style>
c. 在引入的地方，展示出该图样；
出现效果图.png
3. 更新数据
a. 引入 axios；
npm install axios
b. 在src目录下新建http.js文件，写入如下内容；
// 如文件名叫http.js
import axios from 'axios'
// 创建实例时设置配置的默认值
var instance = axios.create({
timeout: 5000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8;',
Authorization:'Bearer 5llcq3GiwABUg-Fxs...',
Accept:'application/json'
},
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
/**
1、比如添加token之类的请求头信息
2、添加每次请求loading等
*/
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
/**
1、集中处理响应数据（如错误码处理）
*/
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance
c. 在vue.config.js中加入跨域请求的解决
// vue.config.js，这个文件是自己创建的，为了解决vue-cli 3.0版本下的跨域问题；
// 特别需要注意的是，proxy中的target配置；
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
proxy: {
/*
* 配置跨域；配置多个跨域；
* 需要重启，方能生效；
*/
// paths
'/ssa-ui/api': {
target: 'http://xx.xx.xx.xxx:xxxx/ssa-ui/api', //跨域地址
changeOrigin: true, // 是否跨域
ws: true, // 是否使用https
pathRewrite: {
'^/ssa-ui/api': ''
// 此处可以理解为 '/ssa-ui/api' 代替了 target 里面的地址，后面的组件中，调用接口的时候直接用 /ssa-ui/api 替代
// 比如，调用 http://xx.xx.xx.xxx:xxxx/ssa-ui/api/query-engine/line-chart ，直接写 /ssa-ui/api/query-engine/line-chart 即可
}
},
'/api': {
target: 'http://xx.xx.xx.xxx:xxxx/api', //跨域地址
changeOrigin: true, // 是否跨域
ws: true, // 是否使用https
pathRewrite: {
'^/api': ''
// 此处可以理解为 '/api' 代替了 target 里面的地址，后面的组件中，调用接口的时候直接用 /api 替代
// 比如，调用 http://xx.xx.xx.xxx:xxxx/api/row4 ，直接写 /api/row4 即可
}
}
},
before: app => {
}
}
d. 在 main.js中，引入写好的网络请求；
// 引入网络请求
import http from './http'
Vue.prototype.$http = http
e. 在刚才创建的 xxx.vue 中，加入一个方法，调用网络请求；
data() {
return {
xData: [],
yData: []
}
},
// 在methods中，加入请求数据的方法；
getData() {
this.$http({
method: 'GET',
url: '/ssa-ui/api/query-engine/line-chart',
}).then((response) => {
// 200响应
console.log(response);
// 赋值给设置好的数组
this.xData = response.xAxisData;
this.yData = response.seriesData;
// 赋值后，需要重绘echarts图表；
this.drawLine();
}, (err) => {
// 500响应
console.log(err);
})
},
// 在methods中，加入绘制图表的方法；
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("line"));
// 指定图表的配置项和数据
let option = {
title: {
text: '安全事件趋势(近7日)',
left: 'left'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.xData,
},
yAxis: {
type: 'value'
},
series: [{
data: this.yData,
type: 'line',
lineStyle: {
color: '#52b7ff'
},
areaStyle: {
color: '#52b7ff',
opacity: 0.3
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
// 在created中加入方法的调用；
created() {
this.getData();
},
f. 查看网页echarts图表的效果；
请求到的数据.png
最终结果图.png
网友评论