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完整代码如下：
<template> <div class="echart" id="mychart" :></div></template><script>import * as echarts from "echarts";export default { data() { return { xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标 yData: [23, 24, 18, 25, 27, 28, 25], //数据 myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式 }; }, mounted() { this.initEcharts(); }, methods: { initEcharts() { // 基本柱状图 const option = { xAxis: { data: this.xData }, yAxis: {}, series: [ { type: "bar", //形状为柱状图 data: this.yData } ] }; const myChart = echarts.init(document.getElementById("mychart")); myChart.setOption(option); //随着屏幕大小调节图表 window.addEventListener("resize", () => { myChart.resize(); }); } }};</script>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代码如下：
<template> <div class="echart" id="mychart" :></div></template><script>import * as echarts from "echarts";export default { data() { return { xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标 yData: [23, 24, 18, 25, 27, 28, 25], //人数数据 taskDate: [10, 11, 9, 17, 14, 13, 14], myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式 }; }, mounted() { this.initEcharts(); }, methods: { initEcharts() { // 多列柱状图 const mulColumnZZTData = { xAxis: { data: this.xData }, // 图例 legend: { data: ["人数", "任务数"], top: "0%" }, yAxis: {}, series: [ { type: "bar", //形状为柱状图 data: this.yData, name: "人数", // legend属性 label: { // 柱状图上方文本标签，默认展示数值信息 show: true, position: "top" } }, { type: "bar", //形状为柱状图 data: this.taskDate, name: "任务数", // legend属性 label: { // 柱状图上方文本标签，默认展示数值信息 show: true, position: "top" } } ] }; const myChart = echarts.init(document.getElementById("mychart")); myChart.setOption(mulColumnZZTData); //随着屏幕大小调节图表 window.addEventListener("resize", () => { myChart.resize(); }); } }};</script>其中 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 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。
在同一坐标系上，此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。
以上效果vue代码如下：
<template> <div class="echart" id="mychart" :></div></template><script>import * as echarts from "echarts";export default { data() { return { myChart: {}, myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式 }; }, mounted() { this.initEcharts(); }, methods: { initEcharts() { // 样式设置 // const 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 // } // } // ] // }; // 柱条间距 const 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] } ] }; const myChart = echarts.init(document.getElementById("mychart")); myChart.setOption(option); //随着屏幕大小调节图表 window.addEventListener("resize", () => { myChart.resize(); }); } }};</script>5 动态排序柱状图
动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。
动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。
实现动态排序柱状图需要使用以下属性：
yAxis.realtimeSort 设为 true，表示开启 Y 轴的动态排序效果
yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列
yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长
yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长
如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好
如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序
实现效果如下：
上图vue完整代码如下：```js<template> <div class="echart" id="mychart" :></div></template><script>import * as echarts from "echarts";export default { data() { return { myChart: {}, sortData: [], //动态排序数据 myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式 dynamicSortZZTOption: { xAxis: { max: "dataMax" }, yAxis: { type: "category", data: ["A", "B", "C", "D", "E"], inverse: true, animationDuration: 300, animationDurationUpdate: 300, max: 4 // only the largest 3 bars will be displayed }, series: [ { realtimeSort: true, name: "动态变化", type: "bar", data: [], label: { show: true, position: "right", valueAnimation: true } } ], legend: { show: true }, animationDuration: 3000, animationDurationUpdate: 3000, animationEasing: "linear", animationEasingUpdate: "linear" } }; }, mounted() { // 图表初始化 this.myChart = echarts.init(document.getElementById("mychart")); // 数据初始化 for (let i = 0; i < 5; ++i) { this.sortData.push(Math.round(Math.random() * 200)); } // 数据刷新 setInterval(() => { this.pageUpdate(); }, 3000); }, methods: { // 数据刷新 pageUpdate() { console.log(this.dynamicSortZZTOption.series[0].data); this.dynamicSortZZTOption.series[0].data = this.sortData; for (let i = 0; i < this.sortData.length; ++i) { if (Math.random() > 0.9) { this.sortData[i] += Math.round(Math.random() * 2000); } else { this.sortData[i] += Math.round(Math.random() * 200); } } this.myChart.setOption(this.dynamicSortZZTOption); //随着屏幕大小调节图表 window.addEventListener("resize", () => { this.myChart.resize(); }); } }};</script>```关于vue如何用Echarts画柱状图问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
