vue echarts图表,vue echart图表
这篇文章主要为大家详细介绍了vue echarts实现进度条式柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echarts实现进度条式柱状图的具体代码，供大家参考，具体内容如下
效果图如下
代码：
模板
div class=内容页
div class=tab-content
div id=myChart1/div
/div
/div
/模板
脚本
从“电子海图”导入*作为电子海图；
导出默认值{
data() {
返回{
选项：{
颜色：[#157ef5]，//设置柱状图的颜色
textStyle: {
颜色： #828282
},
工具提示：{
触发器："轴",
axisPointer: {
类型："行"
}
},
网格：{
左："3%",
对："4%",
底部："3%",
containLabel: true
},
xAxis: {
类型："值",
//设置x轴显示几段
最小值：0,
max: 100，
间隔：50,
轴棒：{ show: false }，
轴线：{
线型：{
颜色："透明"
}
}
},
亚西斯：{
类型："类别",
数据：[财政收入, 总部经济],
轴棒：{ show: false }，
轴线：{
线型：{
颜色： #e0e0e0
}
},
内：真的，
textStyle: {
颜色： #000
}
},
系列：[
{
类型："条形",
项目样式：{
颜色： #f1f1f1 ，//定义柱形的背景色
borderRadius:[0，10，10，0] //定义背景柱形的圆角
},
barGap:"-100% "，//设置柱形重合的重要步骤
数据：[100,100],
动画：假，//关闭动画效果
条宽： 22px ，//设置柱形宽度
},
{
类型："条形",
数据：[65,75],
条宽：“22px”，
barGap:"-100% "，//设置柱形重合的重要步骤
项目样式：{
borderRadius:[0，10，10，0]，//定义柱形的圆角
颜色：函数（参数){
var colorList=[#3C90EB ， #B573F4 ， #F9B341 ， #F9B341 ， # 91c 7 AE ]；
返回颜色列表[params.dataIndex]
}
},
}
]
}
}
},
已安装(){
这个。getchartdata()；
},
方法：{
getChartData() {
让我的图表1=echarts。init(文档。查询选择器(“#我的图表1”)；
我的图表1。setoption(这个。选项)；//设置图表初始化数据
setTimeout(function() {
window.onresize=function() {
我的图表1。resize()；//图表根据窗口大小进行自适应
};
}, 200);
}
}
}
/脚本
style lang=less 范围
#我的图表1 {
宽度：600像素
高度：400像素
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。