echarts横向条形图,echarts 横向柱状图
这篇文章主要为大家详细介绍了vue echarts实现条纹柱状横向图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echarts实现条纹柱状横向图的具体代码，供大家参考，具体内容如下
实现效果：
模板
div id=业务前5名图表 style= flex:1；高度：300像素宽度：614px左边距：10px/div
/模板
脚本
从" @/API/政府"导入{获取注意事项}；
常量颜色=[
rgba(248，75，110，1)，
rgba(239，142，47，1)，
rgba(234，202，4，1)，
rgba(79，224，255，1)，
rgba(106，196，255，1)，
];
导出默认值{
data() {
返回{
列表：[],
列表1: [],
列表2: [],
前5名列表名称：[],
前5名列表值：[]
};
},
已安装(){
这个。get注意事项()；
},
方法：{
initMap() {
var myChart=this .$ e图表。init(文档。getelementbyid( business top 5 chart )；
常量选项={
网格：{
top: 20，
底部：30,
左：10,
右：150,
containLabel: true，
},
工具提示：{
秀：真的，
触发器："轴",
axisPointer: {
类型："阴影",
},
},
xAxis: {
类型："值",
分割线：{
秀：假的，
},
轴线：{
秀：假的，
},
axisLabel: {
秀：假的，
},
轴棒：{
秀：假的，
},
位置："顶部",
},
亚西斯：{
类型："类别",
数据：这个100 .前5名列表名称，
反：真，//倒叙
轴线：{
秀：假的，
},
轴棒：{
秀：假的，
},
axisLabel: {
textStyle: {
颜色： rgba(255，255，255，0.85)，
fontSize: 14，
字体系列："腾讯Sans”，
},
填充：[0,0,20,0],
内：真的，
垂直对齐："底部",
},
},
系列：[
{
类型："条形",
巴格普："90%",
barMaxWidth: 14，
z: 0，
标签:{
正常：{
秀：假的，
位置："右侧",
fontSize: 14，
偏移量：[16,0],
},
},
数据：this.list，
},
{
类型："条形",
巴格普："90%",
barMaxWidth: 14，
项目样式：{
颜色： rgba(26，49，99，0.5)，
},
工具提示：{
秀：假的，
},
数据：this.list1，
},
{
键入：图片栏，
重复："已修复",
符号边距：
符号："矩形",
符号剪辑：对，
symbolSize: [1，14]，
符号位置："开始",
项目样式：{
颜色： rgba(0，0，0，1)，
},
数据：this.list2，
},
],
};
myChart.setOption(选项);
},
getNoteMatters() {
getNoteMatters().然后((res)={
const { status，data }=res
TPO商业银行。解析(数据)；
如果（状态===200) {
//这个Top5ListName=[
//{0: 三亚市税务局，
//1: 三亚市市场监督管理局，
//2: 三亚市公安局，
//3: 三亚市邮政管理局，
//4: 三亚市社会保险服务中心窗口}]
这个前5名名单名称=商业TPO 5。映射((项目)={
退货项目。机构；
});
//这个Top5ListValue=[{0: 189354，1: 56933，2: 13267，3: 10979，4: 9054}]
这个前5名列表值=商业TPO 5。映射((项目)={
退货编号(项。num)；
});
const max=Math.max.apply(null，this .前5名列表值)；
//this.list=[{itemStyle:
//color: rgba(248，75，110，1)
//名称： 三亚市税务局
//num: 189354
//比率： 57.03%
//value: 189354}]
这个。list=商务TPO 5。映射((项目，索引)={
让obj={
名称：item.agencies，
值：数字(项目编号)，
编号：项目编号，
rate: item.rate，
项目样式：{
颜色：颜色[索引],
},
};
返回目标文件
});
//this.list1=[
//标签:{
//正常：{
//color: colors[index]，
//fontSize: 14
//位置："右"
//show: true
//偏移量：[16,0]
//名称： 三亚市税务局
//formatter(){return(item.num 单位 item.rate)}
//比率： 57.03%
//value: 189354}}
这个。列表1=商务TPO 5。映射((项目，索引)={
让obj={
名称：item.agencies，
值：最大值，
标签:项目编号，
rate: item.rate，
标签:{
正常：{
秀：真的，
位置："右侧",
fontSize: 14，
颜色：颜色[索引],
偏移量：[16,0],
格式化程序(){
返回（
项目编号件 项目。费率
);
},
},
},
};
返回目标文件
});
//this.list2=[{label: 189354
//名称： 三亚市税务局
//比率： 57.03%
//value: 189354}]
这个。列表2=商务TPO 5。映射((项目)={
让obj={
名称：item.agencies，
值：数字(项目编号)，
标签:项目编号，
rate: item.rate，
};
返回目标文件
});
}
这个。init map()；
});
},
},
};
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。