【Echarts】vue2中使用echarts,亲测可用!

一、前言

目前接触的项目(vue2)跟ai问答有关,其中像输出图表和表格是比较常见的,

但因为vue2目前已不支持更新,对于官网提供的echarts安装方式是针对新版vue3,不适用vue2,

因此为了方便vue2项目中方便使用echarts图表,有了这篇文章.

补充一下会用到的两个工具.(echarts和vue-echarts)以及和vue2的兼容性

ECharts 版本

Vue2项目通常可以兼容ECharts的多个版本，但为了确保稳定性和兼容性，建议选择经过广泛测试和验证的版本。根据公开发布的信息和社区实践，Vue2项目中使用ECharts的4.x或5.x版本是较为常见的选择。特别是ECharts 5.x版本（如5.2.2或更早的稳定版本），在Vue2项目中表现良好，并提供了丰富的图表类型和配置选项。

然而，需要注意的是，随着ECharts版本的更新，可能会引入一些不兼容的更改或新特性。因此，在选择ECharts版本时，建议查阅其官方文档中的兼容性说明，以确保所选版本与Vue2兼容。

vue-echarts 版本

对于vue-echarts，其版本选择同样需要考虑与Vue2的兼容性。根据vue-echarts的官方文档和GitHub仓库中的信息，vue-echarts的某些版本明确支持Vue2，而较新的版本可能只支持Vue3。

具体来说，vue-echarts的v4或更早版本通常与Vue2兼容。这些版本提供了在Vue2项目中集成ECharts的便捷方式，并允许开发者利用Vue的响应式系统和组件化架构来构建复杂的图表应用。

二、安装指令

npm install echarts@5 vue-echarts@4 --save --force

如果确定 ECharts 的 5.x 版本与 vue-echarts 的 4.x 版本可以兼容，并且愿意承担潜在的风险，可以使用 --force 选项强制安装

三、一个简单的案例演示

<template>
  <div id="app">
    <ECharts :options="chartOptions" autoresize></ECharts>
  </div>
</template>
​
<script>
import ECharts from 'vue-echarts';
import * as echarts from 'echarts';
​
export default {
  components: {
    ECharts
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: '示例图表'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    };
  }
};
</script>
​
<style scoped>
#app {
  height: 400px;
}
</style>

效果演示:

---

四、演示官网上的案例

基础柱状图 - 柱状图 - 常用图表类型 - 应用篇 - 使用手册 - Apache ECharts

<template>
  <div id="app">
    <ECharts :options="option1" autoresize></ECharts>
  </div>
</template>

<script>
import ECharts from "vue-echarts";
import * as echarts from "echarts";

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      option1: {
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [23, 24, 18, 25, 27, 28, 25],
          },
        ],
      },
    };
  },
};
</script>
<style scoped>
#app {
  height: 400px;
}
</style>

运行效果: 

---

如果喜欢这篇文章,请点赞收藏关注喔.我会持续更新实用的文章 .