导航：首页 > 开发技术 >

vue如何用Echarts画柱状图

发表于：2024-11-30 作者：千家信息网编辑

千家信息网最后更新 2024年11月30日，vue如何用Echarts画柱状图，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。vue是什么Vue是一套用于构建用户界面的渐进式Ja

千家信息网最后更新 2024年11月30日vue如何用Echarts画柱状图

vue如何用Echarts画柱状图，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

1 引入Echarts

1.1 安装

使用如下命令通过 npm 安装 ECharts

npm install echarts --save

注：本文安装Echarts版本为："echarts": "5.2.1"

1.2 引入

安装完成以后，可以将echarts全部引入，这样一来，我们可以在该页面使用echarts所有组件；引入代码如下：

import * as echarts from "echarts";

2 基本柱状图

柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。

设置柱状图的方式，是将配置项中 series 的 type 设为 'bar'，该

最简单的柱状图可以这样设置：

option = {  xAxis: {    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  },  yAxis: {},  series: [    {      type: 'bar',      data: [23, 24, 18, 25, 27, 28, 25]    }  ]};

如图所示：

上图vue完整代码如下：

3 多列柱状图

当有多列数据需要展示时我们需要使用多列柱状图，只需要在 series 多添加一项就可以了：

series: [          {            type: "bar", //形状为柱状图            data: data1,          },          {            type: "bar", //形状为柱状图            data: data2,          }    ]

通常有多列数据的时候，我们需要对每列使用不同颜色展示并在柱状图进行说明，echarts默认会使用不同颜色进行区分，当然我们也可以对柱状图的样式进行设置，如背景色等；但若需要标明某一列代表什么数据，需要使用到图例legend，对应在 series 数组对象中添加name属性，来对应legend中的data，其中通过位置元素来设置图例的位置，如下：

        // 图例        legend: {          data: ["人数", "任务数"],          top: "0%" // 设置图例位置在顶部        },        series: [          {            type: "bar", //形状为柱状图            data: data1,            name: "人数", // legend属性          {            type: "bar", //形状为柱状图            data: data2,            name: "任务数", // legend属性          }        ]

设置多列柱状图如图：

上图对应完整vue代码如下：

其中 series中的label属性为柱状图文本标签，可显示数据、文本等信息，默认不展示，需要将其show设置为true时才会在图中展示出来。

4 柱状图样式设置

4.1 柱条样式

柱条的样式可以通过 series.itemStyle 设置，包括：

柱条的颜色（color）；
柱条的宽度（barWidth）；
柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
柱条的背景色（showBackground）柱条圆角的半径（barBorderRadius）；
柱条透明度（opacity）；
阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。

我们可以对同一个系列柱条设置同一样式，也可以对单一柱条设置特定的样式，如下：

option = {    xAxis: {        data: ["A", "B", "C", "D", "E"]    },    yAxis: {},    series: [        {            type: "bar",            data: [                10,                22,                28,                {                    value: 43,                    // 设置单个柱子的样式                    itemStyle: {                        color: "#91cc75",                        shadowColor: "#91cc75",                        borderType: "dashed",                        opacity: 0.5                    }                },                49            ],            barWidth: "20%", // 每个柱条的宽度就是类目宽度的 20%            // 同系列柱条样式            itemStyle: {                barBorderRadius: 5,                borderWidth: 1,                borderType: "solid",                borderColor: "#73c0de",                shadowColor: "#5470c6",                shadowBlur: 3            }        }    ]};

效果如下：

4.2 柱条间距

柱条间距分为两种，一种是不同系列在同一类目下的距离 barWidth，另一种是类目与类目的距离 barCategoryGap。

示例如下：

option = {    xAxis: {        data: ["A", "B", "C", "D", "E"]    },    yAxis: {},    series: [        {            type: "bar",            data: [23, 24, 18, 25, 18],            barGap: "0%", // 两个柱子之间的距离相对于柱条宽度的百分比;            barCategoryGap: "40%" // 每侧空余的距离相对于柱条宽度的百分比        },        {            type: "bar",            data: [12, 14, 9, 9, 11]        }    ]};

以上示例如图：

在这个例子中，barGap 被设为 '0%'，这意味着每个类目（比如 A）下的两个柱子之间的距离，相对于柱条宽度的百分比，设置成0%说明两个柱跳之间没有间隙。而 barCategoryGap 是 '40%'，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。

通常而言，设置 barGap 及 barCategoryGap 后，就不需要设置 barWidth 了，这时候的宽度会自动调整。如果有需要的话，可以设置 barMaxWidth 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。