Vue项目引入Echarts可视化图表库教程&踩坑

Apache ECharts是一个基于 JavaScript 的开源可视化图表库，ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

官网入口

简单来说，Echarts就是用来做数据可视化的，将一些有关联的数据源以图表的方式呈现，不仅方便阅读，一目了然，还可以增加网页的美化效果，增加逼格。

那么，在Vue项目引入Echarts可视化图表库时，我们主要分为三步：

1.安装Echarts；

2.引入Echarts库；

3.使用Echarts创建一个条形图示例；

1.安装Echarts；

这里安装的是Echarts库以及针对于Vue打包好的Echarts库

npm install echarts vue-echarts

 注：有些npm版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps试试！如下：

npm install echarts vue-echarts --legacy-peer-deps

2.引入Echarts库；

 2.1全局引入

//main.js

import "echarts"
import ECharts from 'vue-echarts'

Vue.component('v-chart', ECharts) //Vue.2
或者
app.component('v-chart', ECharts) //Vue.3

 2.2按需引入

由于Vue.2和Vue.3的语法规范有点不一样,所以Vue.2和Vue.3的引入方法也有点不一样，这里需要分开说：

        Vue.2

//main.js

import Vue from 'vue'
import ECharts from 'vue-echarts'
import { use } from 'echarts/core'

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

Vue.component('v-chart', ECharts)

new Vue(...)

        Vue.3

//main.js

import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core";

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

const app = createApp(...)

app.component('v-chart', ECharts)

app.mount(...)

3.使用Echarts创建一个条形图示例；

<template>
    <v-chart class="chart" :option="option" />
</template>
<script>
import VChart, { THEME_KEY } from "vue-echarts"
import { ref, defineComponent } from "vue"

export default defineComponent({
    name: "Echarts_bar",
    components: {
        VChart
    },
    provide: {
        [THEME_KEY]: "white" // 图表背景颜色值
    },
    setup: () => {
            // option主要数据
        const option = ref({ 
            //    图表标题以及标题位置'center'/'left'/'right'
            title: {
                text: "Bar Sources",
                left: "center"
            },
            //X轴数据
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            //Y轴数据
            yAxis: {
                type: 'value'
            },
            //主要表数据
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 240],
                    //表形式 支持'bar'/'pie'/'line'等多种
                    type: 'bar'
                }
            ]
        });

        return { option };
    }
});
</script>
<style scoped>
//表高度（必须值）
.chart {
    height: 228px;
}
</style>

如图示例代码npm run serve之后，你就能看到如图条形图：

 此外，Apache ECharts官方还有许多各式各样好看的示例，只需要将示例代码copy到项目代码的option下{ ref }的对象值，稍稍修改自己想要的数据，就可以得到各种好看的图表！ 

Apache ECharts 示例官方入口

知识分享，持续更新，求关注不迷路~