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

小鱼儿 2022-12-21 00:45 186阅读 0赞

前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面使用，引入的例子。

Echarts官网：[https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]

1:在项目里面安装echarts

cnpm install echarts --s

![73ba60e0e47c146b92e98150608abc12.png][]

2：在需要用图表的地方引入

import echarts from "echarts";

![eb8c4edddd350682796c4443e28b4d0e.png][]

图片.png

3：打开vue组件  
继续写代码，代码如下：

<template>
      <div id="app">
        
        <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>

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

![26dde6cd16ae0e2331761cad1b329d2e.png][]

--------------------

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

--------------------

1：进入项目，npm安装

npm install axios --save

![52de8d0715b848a073f94015589006d1.png][]

2.在main.js下引用axios

import axios from 'axios'

![1ce7ee86f98cd8515c58da658f442fd4.png][]

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][http_xxx.com_test.json]

4：跨域问题，  
一般后端小伙伴给到我们这边的接口里面，应该对跨域问题已经处理好了，所以不需要我们处理了。

如果需要我们处理，我们可以设置代理，利用proxyTable属性实现跨域请求  
在config/index.js 里面找到proxyTable ：\{\} ，然后在里面加入以下代码  
(这里处于安全考虑，我隐藏了自己的而服务器域名，如果需要测试，改成你自己的即可)

proxyTable: {
      '/api': {
         target: 'http://inxxxe.com',//设置你调用的接口域名和端口号 
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': '' //这个是定义要访问的路径，名字随便写 
        }
      }
    },

![8913f64fc0ab114c20ac0b6fff9c4b29.png][]

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");
                    });
                },
            }

![02e08d1f1eab5d94bea21b1f77db47a3.png][]

6：再次运行

npm run dev

运行成功之后，打开f12，查看network的请求  
这个时候，我们可以看见，本地的localhost替代 了我之前放在服务器上的链接的域名，这也是设置代理成功，就解决了跨域的问题了。

请求成功

![ad76dc80d4393340a5eb06f38032221c.png][]

response里面也有返回值，ok,下一步就要开始将这些数据渲染在前端界面上面了。

![1c2be9fa60d32b88da96d43401792853.png][]

--------------------

test.vue参考代码：

<template>
        <div>
        
        <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>

实现效果

![00959f3975b34206045290039bbf9819.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70][]

[https_echarts.apache.org_zh_index.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fecharts.apache.org%2Fzh%2Findex.html
[73ba60e0e47c146b92e98150608abc12.png]: /images/20221120/e73697134d9c4a17ac0db370da82622e.png
[eb8c4edddd350682796c4443e28b4d0e.png]: /images/20221120/c6ebd3c66bf743d991211a64564f04b0.png
[26dde6cd16ae0e2331761cad1b329d2e.png]: /images/20221120/1ba760b49adf4e2b9cb143857f66fa5d.png
[52de8d0715b848a073f94015589006d1.png]: /images/20221120/58edde74c4ac48bdae1500266bca2198.png
[1ce7ee86f98cd8515c58da658f442fd4.png]: /images/20221120/c8d43890f725432d8bfbf19f55978759.png
[http_xxx.com_test.json]: https://links.jianshu.com/go?to=http%3A%2F%2Fxxx.com%2Ftest.json
[8913f64fc0ab114c20ac0b6fff9c4b29.png]: /images/20221120/ca3375bdeec64a60ad8253e1deb7997a.png
[02e08d1f1eab5d94bea21b1f77db47a3.png]: /images/20221120/f0438a9f7ff4461e9ffa6d0d21f33e7e.png
[ad76dc80d4393340a5eb06f38032221c.png]: /images/20221120/2dcdd367decb4cc5b4a9cf7e21c0de15.png
[1c2be9fa60d32b88da96d43401792853.png]: /images/20221120/ec7070ccb97e4169a974869a2b6e9576.png
[00959f3975b34206045290039bbf9819.png]: /images/20221120/c5c4d73e5a294e949a26d693a8f721f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70]: /images/20221120/d3ac82cb23b6495ea934aaf35d1c3476.png