在Vue中使用Echarts

素颜马尾好姑娘i 2022-12-20 01:28 195阅读 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][]

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

[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/7e4e13b2f85645ab952d5e366dbaabf4.png
[eb8c4edddd350682796c4443e28b4d0e.png]: /images/20221120/2941b8bbe0c5466498a5211b1ac86953.png
[26dde6cd16ae0e2331761cad1b329d2e.png]: /images/20221120/90e9d156e2d74f2fb8adde026d1592cc.png