Android使用ECharts详解简书,Vue项目中使用Echarts

网上方法千千万，由己验明知真假。———— 只灯片笺

本文主要内容：

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组件化的思想；同时也是为了后期的维护方便；

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();

}

}

b. 在需要的地方，引入该组件；

......

......

......

......

import SafeThingTrendLineChart from "@/components/safetrend/SafeThingTrendLineChart";

export default {

name: "KnowFuture",

components: {

SafeThingTrendLineChart

}

}

/*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;

}

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