在Vue中使用Echarts

简介: 在Vue中使用Echarts

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


1:在项目里面安装echarts

cnpm install echarts --s

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

import echarts from "echarts";


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>

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

相关文章
|
5月前
|
JavaScript 算法 前端开发
vue + echarts实现国省市三级下钻联动
vue + echarts实现国省市三级下钻联动
251 0
|
2月前
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图
|
2月前
|
JavaScript 数据可视化 搜索推荐
在Vue项目中使用Echarts图表库
这篇文章介绍了如何在Vue项目中集成ECharts图表库,并通过具体的代码示例展示了如何创建并配置一个饼图来展示数据。
26 0
在Vue项目中使用Echarts图表库
|
2月前
|
JavaScript
Echarts——VUE中如何给echarts绑定click事件
Echarts——VUE中如何给echarts绑定click事件
65 1
|
2月前
|
JavaScript
Echarts——VUE中非根节点时不显示图表也无报错
Echarts——VUE中非根节点时不显示图表也无报错
33 1
|
3月前
|
JavaScript 定位技术
【vue】 vue中echarts渐变被覆盖、失效,echarts.graphic.LinearGradient,不能正常显示的解决方法。
【vue】 vue中echarts渐变被覆盖、失效,echarts.graphic.LinearGradient,不能正常显示的解决方法。
233 0
|
3月前
|
JavaScript
【vue】 在vue2项目中使用echarts
【vue】 在vue2项目中使用echarts
40 0
|
4月前
|
JavaScript 容器
|
3月前
|
JavaScript
vue 图表 Echarts
vue 图表 Echarts
35 0
|
3月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
250 0
下一篇
无影云桌面