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

快来打我* 2022-11-03 11:15 603阅读 0赞

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官网][ECharts]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70][]

**完整代码：**

<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',
                    subtext: '评价数',
                    left: 'center',
                    top: '43%',
                    subtextStyle: {
                      fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    icon: 'circle',
                    top: '0',
                    left: 'right'
                },
                series: [
                    {
                        name: '咨询数量',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        label: {
                            show: true,
                            padding: [0, -60],
                            overflow: 'none',
                            fontSize: '15',
                            fontWeight: 'bold',
                            formatter: '{d}%\n\n{c}'
                        },
                        labelLine: {
                            show: true,
                            length: 15,
                            length2: 60
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = ['#4FC3F7', '#00C853', '#F57F17']
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data: [
                            { name: '好评', value: 1048 },
                            { name: '一般', value: 735 },
                            { name: '差评', value: 180 }
                        ]
                    }
                ]
            })
        }
    }
    </script>

> 2）折线图（type:line），右上角工具栏可以保存图片或者切换折线图、柱状图、堆叠模式。

**折线图 **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 1][]

**柱状图**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 2][]

**堆叠模式**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 3][]

> 需要注意的是配置项要设置**containLabel: true**，避免标签溢出的情况，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 4][]

**完整代码**

<template>
        <div>
            <div ref="lineChart" style="width: 800px; height: 400px; background-color: #ffffff; padding: 20px; border-radius: 20px;"></div>
        </div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    
    export default {
        mounted() {
            this.lineChart = echarts.init(this.$refs.lineChart)
            this.lineChart.setOption({
                title: {
                    text: '评价数据分析'
                },
                // 提示框
                tooltip: {
                    trigger: 'axis'
                },
                // 图例
                legend: {
                    icon: 'circle',
                    left: 'center',
                    top: 0,
                    data: ['好评', '一般', '差评']
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                // 工具栏
                toolbox: {
                    feature: {
                        saveAsImage: {
                            type: 'png'
                        },
                        magicType: {
                            type: ['line', 'bar', 'stack']
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '好评',
                        type: 'line',
                        // smooth: true, // 平滑曲线显示
                        data: [120, 132, 101, 134, 190, 230, 210, 201, 234, 290, 230, 210]
                    },
                    {
                        name: '一般',
                        type: 'line',
                        // smooth: true,
                        data: [100, 82, 91, 54, 90, 76, 110, 81, 104, 90, 130, 110]
                    },
                    {
                        name: '差评',
                        type: 'line',
                        stack: '总量',
                        // smooth: true,
                        data: [10, 22, 21, 14, 19, 13, 20, 11, 34, 29, 20, 10]
                    }
                ]
            })
        }
    }
    </script>

> 3）进度仪表盘（type:gauge），隐藏仪表盘指针、刻度标签、刻度和分隔线，得到下图效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 5][]

**完整代码**

<template>
        <div>
            <div ref="gaugeChart" 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.gaugeChart = echarts.init(this.$refs.gaugeChart)
            this.gaugeChart.setOption({
                series: [
                    {
                        name: '评价',
                        type: 'gauge',
                        center: ['50%', '55%'],
                        radius: '75%',
                        min: 0,
                        max: 300,
                        itemStyle: {
                            color: '#4FC3F7',
                            shadowColor: 'rgba(0,138,255,0.45)'
                        },
                        // 进度条
                        progress: {
                            show: true,
                            width: 20,
                            roundCap: true
                        },
                        // 坐标轴线
                        axisLine: {
                            show: true,
                            roundCap: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        // 仪表盘指针
                        pointer: {
                            show: false
                        },
                        // 刻度标签
                        axisLabel: {
                            show: false
                        },
                        // 刻度
                        axisTick: {
                            show: false
                        },
                        // 分隔线
                        splitLine: {
                            show: false
                        },
                        title: {
                            offsetCenter: [0, '20%'],
                            fontSize: 20
                        },
                        detail: {
                            offsetCenter: [0, '-10%'],
                            valueAnimation: true,
                            textStyle: {
                                fontSize: 30
                            },
                            formatter: '{value}'
                        },
                        data: [
                            { value: 270, name: "好评数" }
                        ]
                    }
                ]
            })
        }
    }
    </script>

先记录上述三个图表，下一期随缘更新（咕咕咕~）

**希望你我逐渐优秀**

[ECharts]: https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70]: /images/20221024/0b3f82d924d24f0ba6100cede0fa8d2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 1]: /images/20221024/59c487484e464459ba16fa6c10f802a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 2]: /images/20221024/405d31e0b3cf4a4b9b417ae8ee19e12a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 3]: /images/20221024/2f1fce3b101943fd8c48dfefa2f3af7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 4]: /images/20221024/8fd9ebbf19394f01b18c2ac204f6dfe7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 5]: /images/20221024/969c2b30d1e34c6ab5bb56e4bc3b18a0.png