Vue使用echarts制作好看的图表（一）

本文链接：https://blog.youkuaiyun.com/sunddy_x/article/details/114196113

本文介绍了基于 JavaScript 的开源可视化图表库 Apache ECharts，包括其安装、卸载方法，以及 Echarts 5 和 4 不同版本的引用方式。还记录了项目中设计的环形图、折线图、进度仪表盘等图表的关键配置和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Apache ECharts，一个基于 JavaScript 的开源可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

ECharts安装与卸载

安装最新版 npm install echarts --save

安装指定版本，例如4.8.0 npm install echarts@4.8.0 --save

卸载 npm uninstall echarts

Echarts 5添加了许多新特性，这里我选择安装最新版，目前为5.0.2。需要注意的是，echarts 5.x（以下简称 v5）和 echarts 4.x（以下简称 v4）的引用方式是不同的，具体写法如下：

v4全局引用 import echarts from 'echarts'

v4按需引入 import echarts from 'echarts/lib/echarts'

v5全局引用 import * as echarts from 'echarts'

v5按需引入 import * as echarts from 'echarts/lib/echarts'

其他变化可查看ECharts官网

下面记录几个项目中设计的图表：

1）环形图，饼图（type:pie）自定义而来，自定义了label分布在labelLine两侧，关键配置padding: [0, -60]和overflow: 'none'。label标签的文字如果因为过长导致省略，可缩小radius的第二个参数。

完整代码：

<template>
    <div>
        <div ref="myChart" style="width: 400px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    mounted() {
        this.myChart = echarts.init(this.$refs.myChart)
        this.myChart.setOption({
            title: {
                text: '32469&#