vue+axios+echarts实现一个折线图

前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的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组件
继续写代码，代码如下：

<template><div id="app"><!--为echarts准备一个具备大小的容器dom--><div id="main" style="width: 600px; height: 400px"></div></div>
</template>
<script>
import echarts from "echarts";
export default {name: "",data() {return {charts: "",opinionData: ["3", "2", "4", "4", "5"],};},methods: {drawLine(id) {this.charts = echarts.init(document.getElementById(id));this.charts.setOption({tooltip: {trigger: "axis",},legend: {data: ["近七日收益"],},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},toolbox: {feature: {saveAsImage: {},},},xAxis: {type: "category",boundaryGap: false,data: ["1", "2", "3", "4", "5"],},yAxis: {type: "value",},series: [{name: "近七日收益",type: "line",stack: "总量",data: this.opinionData,},],});},},//调用mounted() {this.$nextTick(function () {this.drawLine("main");});},
};
</script>
<style scoped>
</style>

这个时候，可以看到，加载出的折线图了，后面可以继续进行完善。

以上完成的，只是一个静态页面，下面就开始完成动态数据渲染部分的折线图部分啦~~

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参考代码：

<template><div><!--为echarts准备一个具备大小的容器dom--><div id="main" style="width: 600px;height: 400px;"></div></div>
</template>
<script>import echarts from 'echarts'import axios from "axios";export default {name: '',data() {return {charts: '',/* opinionData: ["3", "2", "4", "4", "5"]*/opinionData: []}},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");});},drawLine(id) {this.charts = echarts.init(document.getElementById(id))this.charts.setOption({tooltip: {trigger: 'axis'},legend: {data: ['近七日收益']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ["1","2","3","4","5"]},yAxis: {type: 'value'},series: [{name: '近七日收益',type: 'line',stack: '总量',data: this.opinionData}]})},},//调用mounted() {this.getData();         }}
</script>

实现效果

vue+axios+echarts实现一个折线图相关推荐

vue使用echarts的堆叠折线图一直警告[Violation] 'requestAnimationFrame' handler 用时 N 毫秒怎么解决...
这个警告通常是因为你的图表渲染过于复杂或者数据量过大,导致在浏览器的一帧内渲染超时. 你可以尝试以下方法来解决这个问题: 减少图表中的数据量,使其更加简单,从而减少渲染时间. 使用图表的 lazyUp ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
vue中使用echarts做一个雷达图
在vue中使用echarts做一个雷达图效果如图首先 1.安装echarts npm install echarts -S 2.使用全局使用在main.js中 // 引入echarts imp ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
echarts渲染一个风向图
今天给大家说一个用echarts渲染一个风向图,这里图上其实有三个要素,风向,风级和能见度,主要还是讲讲代码里面的坑 1.风向图标方向修改以及设置 var ownData = echarts.util ...
echarts type:line 折线图折线折点样式
echarts type:line 折线图折线折点样式 series: [{name: '课时',type: 'line',data: [23,60,20,36,23,85],label:{ //折 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
在vue中使用antV-G2展示折线图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...

vue+axios+echarts实现一个折线图

vue+axios+echarts实现一个折线图相关推荐

最新文章

热门文章