vue echart动态图表,echarts柱状图动态效果
这篇文章主要为大家详细介绍了vue echarts实现柱状图动态展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码，供大家参考，具体内容如下
轮播图形式展现
模板
丹
div id= scalesize :style= { width: 100% ，height: 100%}/div
/div
/模板
脚本
从“电子海图”导入电子海图；
导出默认值{
data() {
返回{
文本：111
};
},
已安装(){
这个。drawline()；
},
方法：{
drawLine() {
//基于准备好的多姆，初始化展示实例
让我的图表=这个图表。init(文档。getelementbyid( scalesize )；
var fanfa=[
{
名称： 育苗基地，
类型："条形",
条宽："15%",
项目样式：{
正常：{
颜色：新款echarts。图形。线性梯度(0，0，0，1，[
{
偏移量：0,
颜色： #fccb05
},
{
偏移量：1,
颜色： #f5804d
}
]),
barBorderRadius: 12
}
},
数据：[100,120,160,180,220,400]
},
{
名称： 种植基地，
类型："条形",
条宽："15%",
项目样式：{
正常：{
颜色：新款echarts。图形。线性梯度(0，0，0，1，[
{
偏移量：0,
颜色： #8bd46e
},
{
偏移量：1,
颜色： #09bcb7
}
]),
barBorderRadius: 11
}
},
数据：[270,320,420,650,821,907]
},
{
名称： 托管面积，
类型："条形",
条宽："15%",
项目样式：{
正常：{
颜色：新款echarts。图形。线性梯度(0，0，0，1，[
{
偏移量：0,
颜色： #248ff7
},
{
偏移量：1,
颜色： #6851f1
}
]),
barBorderRadius: 11
}
},
数据：[140,180,215,320,396,520]
},
{
名称： 联建基地，
类型："条形",
条宽："15%",
项目样式：{
正常：{
颜色：新款echarts。图形。线性梯度(0，0，0，1，[
{
偏移量：0,
颜色： #B88080
},
{
偏移量：1,
颜色： #983A3A
}
]),
barBorderRadius: 11
}
},
数据：[140,180,215,320,396,420]
}
];
myChart.setOption({
工具提示：{
触发器："轴",
axisPointer: {
//坐标轴指示器，坐标轴触发有效
类型：影子//默认为直线，可选为：线条 阴影
}
},
网格：{
左："2%",
对："4%",
底部："14%",
顶部："16%",
containLabel: true
},
图例：{
数据：[育苗基地, 种植基地, 托管面积, 联建基地],
右：10,
top: 12，
textStyle: {
颜色： #fff
},
项目宽度：12,
项目高度：10
//itemGap: 35
},
xAxis: {
类型："类别",
数据：[
2014,
2015,
2016,
2017,
2018,
2019
],
轴线：{
线型：{
颜色："白色"
}
},
axisLabel: {
//间隔：0,
//旋转：40,
textStyle: {
字体系列："微软雅黑"
}
}
},
亚西斯：{
类型："值",
轴线：{
秀：假的，
线型：{
颜色："白色"
}
},
分割线：{
秀：真的，
线型：{
颜色： rgba(255，255，255，0.3)
}
},
axisLabel: {}
},
数据缩放：[
{
秀：真的，
身高：12,
xAxisIndex: [0]，
底部："8%",
手柄图标：
路径：//M306.1，413c0，2.2-1.8，4-4，4h-59.8c-2.2，0-4-1.8-4-4V200.8c0-2.2，1.8-4，4-4h59.8c2.2，0.4，1.8，4.4v 413 z ，
手柄尺寸："110%",
handleStyle: {
颜色： #d3dee5
},
textStyle: {
颜色： #fff
},
边框颜色： #90979c
},
{
类型："内部",
秀：真的，
身高：15,
开始：1,
结束：35
}
],
系列：翻发
});
let app={
当前索引：-1
};
setInterval(function() {
设data len=fanfa[1]。数据。长度；
//取消之前高亮的图形
myChart.dispatchAction({
类型：淡化，
seriesIndex: 0，
数据索引：app.currentIndex
});
app。当前索引=(应用程序。当前索引1)%数据长度；
//控制台。日志(app。当前索引)；
//高亮当前图形
myChart.dispatchAction({
类型：突出显示，
seriesIndex: 0，
数据索引：app.currentIndex
});
//显示工具提示
myChart.dispatchAction({
键入：显示提示，
seriesIndex: 0，
数据索引：app.currentIndex
});
}, 1000);
窗户。在resize=mychart上。调整大小；
}
}
};
/脚本
style lang=less 范围。丹{
身高：90%;
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。