vue如何用Echarts画柱状图

魁首哥

作者

vue如何用Echarts画柱状图

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

vue是什么

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

1 引入Echarts

1.1 安装

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

npminstallecharts--save

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

1.2 引入

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

import*asechartsfrom"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代码如下：

<template><divclass="echart"id="mychart":></div></template><script>import*asechartsfrom"echarts";exportdefault{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(){//多列柱状图constmulColumnZZTData={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"}}]};constmyChart=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><divclass="echart"id="mychart":></div></template><script>import*asechartsfrom"echarts";exportdefault{data(){return{myChart:{},myChartStyle:{float:"left",width:"100%",height:"400px"},//图表样式};},mounted(){this.initEcharts();},methods:{initEcharts(){//样式设置//constoption={//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//}//}//]//};//柱条间距constoption={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]}]};constmyChart=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><divclass="echart"id="mychart":></div></template><script>import*asechartsfrom"echarts";exportdefault{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//onlythelargest3barswillbedisplayed},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(leti=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(leti=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画柱状图问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。

阅读全文

发布于 2022-01-17 22:03:54