vue echarts图表,echarts绘制柱状图
本文主要介绍vue使用Echarts绘制直方图，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
1 echarts简介1.1安装1.2简介2基本直方图3多栏直方图4直方图样式设置4.1直方图样式4.2直方图间距5动态排序直方图6汇总
1 引入Echarts
1.1 安装
使用以下命令通过npm安装ECharts
npm安装电子图表-保存
注意：本文中安装的Echarts版本是“e charts”:“5 . 2 . 1”
1.2 引入
安装完成后，可以引入所有的echarts，这样我们就可以在这个页面上使用echarts的所有组件；介绍代码如下：
从“echarts”导入*作为e charts；
2 基本柱状图
条形图是一种常见的图表类型，通过一列的长度来显示数据的大小。
通过将配置项中的系列类型设置为“条形”来设置直方图
最简单的柱状图可以这样设置：
选项={
xAxis: {
数据：[周一，周二，周三，周四， Fri ，周六，周日]
},
yAxis: {}，
系列：[
{
类型：“条形”，
数据：[23，24，18，25，27，28，25]
}
]
};
如图所示：
上图vue完整代码如下：
模板
div class= echart id= mychart :style= myChartStyle /div
/模板
脚本
从“echarts”导入*作为e charts；
导出默认值{
data() {
返回{
Xdata: [mon ， tue ， wed ， thu ， fri ， sat ， sun]，//横坐标
Y: [23，24，18，25，27，28，25]，//数据
MyChart样式：{float: left ，宽度： 100% ，高度： 400 px }//图表样式
};
},
已安装(){
this . initecharts()；
},
方法：{
initEcharts() {
//基本直方图
常量选项={
xAxis: {
数据：this.xData
},
yAxis: {}，
系列：[
{
类型：“条形图”，//该形状是一个直方图。
数据：this.yData
}
]
};
const myChart=echarts . init(document . getelementbyid( myChart )；
myChart.setOption(选项)；
//根据屏幕大小调整图表
window . addevent listener( resize ，()={
mychart . resize()；
});
}
}
};
/脚本
3 多列柱状图
当有多列数据要显示时，我们需要使用多列直方图，只需在序列中再添加一项：
系列：[
{
类型：“条形图”，//该形状是一个直方图。
数据：数据1，
},
{
类型：“条形图”，//该形状是一个直方图。
数据：数据2，
}
]
通常，当有多列数据时，我们需要用不同的颜色显示每一列，并在直方图中进行说明。echarts默认会用不同的颜色来区分。当然，我们也可以设置直方图的样式，如背景颜色等。但是，如果需要指示某一列代表什么数据，则需要使用legend legend，并将name属性添加到series array对象，以对应于图例中的数据，其中图例的位置由position元素设置，如下所示：
//图例
图例：{
数据：[人数，任务数]，
top:“0%”//将图例位置设置在顶部
},
系列：[
{
类型：“条形图”，//该形状是一个直方图。
数据：数据1，
名称：“人数”，//图例属性
{
类型：“条形图”，//该形状是一个直方图。
数据：数据2，
名称：“任务数”，//图例属性
}
]
设置多列柱状图如图：
上图对应完整vue代码如下：
模板
div class= echart id= mychart :style= myChartStyle /div
/模板
脚本
从“echarts”导入*作为e charts；
导出默认值{
data() {
返回{
Xdata: [mon ， tue ， wed ， thu ， fri ， sat ， sun]，//横坐标
Y: [23，24，18，25，27，28，25]，//人数数据
任务日期：[10，11，9，17，14，13，14]，
MyChart样式：{float: left ，宽度： 100% ，高度： 400 px }//图表样式
};
},
已安装(){
this . initecharts()；
},
方法：{
initEcharts() {
//多列直方图
const mulColumnZZTData={
xAxis: {
数据：this.xData
},
//图例
图例：{
数据：[人数，任务数]，
顶部：“0%”
},
yAxis: {}，
系列：[
{
类型：“条形图”，//该形状是一个直方图。
数据：this.yData，
名称：“人数”，//图例属性
标签:{
//直方图上方的文本标签，默认情况下显示数字信息。
秀：真的，
位置：“顶部”
}
},
{
类型：“条形图”，//该形状是一个直方图。
数据：this.taskDate，
名称：“任务数”，//图例属性
标签:{
//直方图上方的文本标签，默认情况下显示数字信息。
秀：真的，
位置：“顶部”
}
}
]
};
const myChart=echarts . init(document . getelementbyid( myChart )；
mychart . setoption(mulcolumnztdata)；
//根据屏幕大小调整图表
window . addevent listener( resize ，()={
mychart . resize()；
});
}
}
};
/脚本
系列中的标签属性是直方图文本标签，可以显示数据、文本等信息。默认情况下不显示它，只有当它的show设置为true时，它才会显示在图形中。
4 柱状图样式设置
4.1 柱条样式
可以通过series.itemStyle设置列的样式，包括：
颜色)；酒吧的；条形的宽度；条形图的线条颜色(borderColor)、宽度(borderWidth)和样式(边框类型)。列的背景色(showBackground)和列的圆角半径(barberder radius)；列透明度；阴影(shadowBlur，shadowColor，shadowOffsetX，shadowOffsetY)。我们可以为同一系列的列设置相同的样式，也可以为单个列设置特定的样式，如下所示：
选项={
xAxis: {
数据：[A ， B ， C ， D ， E]
},
yAxis: {}，
系列：[
{
类型：“条形”，
数据：[
10,
22,
28,
{
值：43，
//设置单个列的样式
项目样式：{
颜色： #91cc75 ，
阴影颜色： #91cc75 ，
borderType:“虚线”，
不透明度：0.5
}
},
四十九个
],
BarWidth: 20% ，//每列的宽度是类别宽度的20%。
//同一系列的列样式
项目样式：{
barBorderRadius: 5，
borderWidth: 1，
边框类型：“实心”，
边框颜色： #73c0de ，
阴影颜色： #5470c6 ，
暗影模糊：3
}
}
]
};
效果如下：
4.2 柱条间距
列间距有两种，一种是同一类别下不同系列的距离barWidth，另一种是类别之间的距离barCategoryGap。
示例如下：
选项={
xAxis: {
数据：[A ， B ， C ， D ， E]
},
yAxis: {}，
系列：[
{
类型：“条形”，
数据：[23，24，18，25，18]，
BarGap: 0% ，//两列之间的距离相对于列宽度的百分比。
BarCategoryGap: 40% //每一侧的自由距离相对于列宽度的百分比。
},
{
类型：“条形”，
数据：[12，14，9，9，11]
}
]
};
以上示例如图：
在本例中，barGap设置为 0% ，这意味着每个类别下的两列之间的距离(如A)以列宽的百分比形式设置为0%，表示两列跳转之间没有间隙。而barCategoryGap是 40% ，表示列每边的自由距离相对于列宽度的百分比。
一般来说，设置了barGap和barCategoryGap之后，就不需要设置barWidth了，此时宽度会自动调整。如果需要，可以将barMaxWidth设置为条形宽度的上限。当图表宽度较大时，条形宽度不会太宽。
在同一个坐标系上，这个属性将被多个直方图系列所共享。该属性要在本坐标系的最后一个直方图系列上设置才能生效，并且对本坐标系的所有直方图系列生效。
以上效果vue代码如下：
模板
div class= echart id= mychart :style= myChartStyle /div
/模板
脚本
从“echarts”导入*作为e charts；
导出默认值{
data() {
返回{
我的图表：{}，
MyChart样式：{float: left ，宽度： 100% ，高度： 400px}，//图表样式
};
},
已安装(){
this . initecharts()；
},
方法：{
initEcharts() {
//样式设置
//const option={
//xAxis: {
//data: [A ， B ， C ， D ， E]
//},
//yAxis: {}，
//系列：[
//{
//类型： bar ，
//数据：[
//10,
//22,
//28,
//{
//值：43，
////设置单个列的样式
//项目样式：{
//color: #91cc75 ，
//shadowColor: #91cc75 ，
//borderType:虚线，
//不透明度：0.5
//}
//},
//49
//],
//barWidth: 20% ，//每列的宽度是类别宽度的20%。
////同一系列的列样式
//项目样式：{
//barBorderRadius: 5，
//borderWidth: 1，
//borderType: solid ，
//border color:“# 73c 0 de”，
//shadowColor: #5470c6 ，
//暗影模糊：3
//}
//}
//]
//};
//列间距
常量选项={
xAxis: {
数据：[A ， B ， C ， D ， E]
},
yAxis: {}，
系列：[
{
类型：“条形”，
数据：[23，24，18，25，18]，
BarGap: 0% ，//两列之间的距离相对于列宽度的百分比。
BarCategoryGap: 40% //每一侧的自由距离相对于列宽度的百分比。
},
{
类型：“条形”，
数据：[12，14，9，9，11]
}
]
};
const myChart=echarts . init(document . getelementbyid( myChart )；
myChart.setOption(选项)；
//根据屏幕大小调整图表
window . addevent listener( resize ，()={
mychart . resize()；
});
}
}
};
/脚本
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，显示下一个时间点对应的列排序。
实现效果如下：
上图某视频剪辑软件完整代码如下：
` ` js
模板
div class= echart id= mychart :style= myChartStyle /div
/模板
脚本
从“电子海图”导入*作为电子海图；
导出默认值{
data() {
返回{
我的图表：{},
sortData: []，//动态排序数据
myChartStyle: { float: left ，宽度： 100% ,高度： 400px }，//图表样式
动态排序选项：{
xAxis: {
最大值："数据最大值"
},
亚西斯：{
类型："类别",
数据：[A ， B ， C ， D ， E]，
逆：真，
动画时长：300,
animationDurationUpdate: 300，
最大值：4 //仅显示最大的3个条形
},
系列：[
{
实时排序：没错，
名称： 动态变化，
类型："条形",
数据：[],
标签:{
秀：真的，
位置："右侧",
值动画：真
}
}
],
图例：{
显示：真实
},
动画时长：3000,
animationDurationUpdate: 3000，
动画制作："线性",
动画更新："线性"
}
};
},
已安装(){
//图表初始化
这个。mychart=echarts。init(文档。getelementbyid( mychart )；
//数据初始化
对于(设I=0；i5；i) {
这个。排序数据。推(数学。圆(数学。random()* 200))；
}
//数据刷新
setInterval(()={
这个。页面更新()；
}, 3000);
},
方法：{
//数据刷新
pageUpdate() {
控制台。日志(这个。dynamicsortzztoption系列[0]).数据);
这个。dynamicsortzztoption系列[0].data=this.sortData
对于(设I=0；我这个。排序数据。长度；i) {
if (Math.random() 0.9) {
这个。排序数据[I]=数学。圆(数学。random()* 2000)；
}否则{
这个。排序数据[I]=数学。圆(数学。random()* 200)；
}
}
这个。我的图表。setoption(这个。dynamicsortzztoption)；
//随着屏幕大小调节图表
窗户。addevent侦听器( resize ，()={
这个。我的图表。resize()；
});
}
}
};
/脚本
```
6 总结
以上列了某视频剪辑软件引用展示画柱状图几种主要使用方式，有了以上几种使用基础，我们就可以做一些更加复杂的场景，如国家地区国内生产总值时间变化、疫情数据统计渲染等。
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。