vue echarts图表,echarts横向显示的柱状图
这篇文章主要为大家详细介绍了vue echarts实现横向柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echarts实现横向柱状图的具体代码，供大家参考，具体内容如下
实现效果：
代码：
模板
div class=OverYearsPompany
div id= OverYearsPompanyChart style= flex:1；高度：368像素上边距：-42px/div
/div
/模板
脚本
从" @/API/政府"导入{ getProposedInvestments }；
常量颜色=[
[rgba(240，7，100，1)， rgba(0，215，229，1)]，
[rgba(240，7，100，1)， rgba(0，215，229，1)]，
[rgba(240，7，100，1)， rgba(0，215，229，1)]，
[rgba(240，7，100，1)， rgba(0，215，229，1)]，
];
导出默认值{
data() {
返回{
投资方式数据：[],
投资方式数据计数：[],
投资方式数据计数：[],
};
},
已安装(){
这个。getproposedinvestments()；
},
方法：{
initMap() {
var myChart=this .$ e图表。init(文档。getelementbyid( overyearsppanychart )；
常量选项={
工具提示：{
秀：真的，
触发器："轴",
axisPointer: {
类型："阴影",
},
},
xAxis: {
类型："值",
axisLabel: {
秀：真的，
颜色： # 02CFFCFF ，
字体系列："腾讯Sans”，
},
轴线：{
秀：真的，
线型：{
颜色： # 02CFFCFF ，
},
},
分割线：{
秀：真的，
线型：{
颜色： rgba(71，126，171，1)，
},
},
},
亚西斯：[
{
类型："类别",
反：真，//倒叙
axisLabel: {
颜色： # 02CFFCFF ，
字体系列："腾讯Sans”，
},
轴棒：{
秀：假的，
},
轴线：{
秀：真的，
线型：{
颜色： # 02CFFCFF ，
},
},
分割线：{
秀：真的，
线型：{
类型：点，
颜色： rgba(71，126，171，1)，
},
},
数据：this.investmentsWayData，
},
],
系列：[
{
类型："条形",
条宽：15,
标签:{
位置：[98% ,-20],
秀：真的，
颜色： #fff ，
字体系列："腾讯Sans”，
},
数据：this.investmentsWayDataCount
项目样式：{
颜色（参数){
const { dataIndex }=params
let color={
类型："线性",
x: 1，
y: 0，
x2: 0，
y2: 0，
色彩停止点：[
{
偏移量：0,
color: colors[dataIndex]？颜色[数据索引][0]:红色，
},
{
偏移量：1,
color: colors[dataIndex]？颜色[数据索引][1]:红色，
},
],
};
返回颜色；
},
},
},
],
};
myChart.setOption(选项);
},
getProposedInvestments() {
getProposedInvestments().然后((res)={
const { status，data }=res
const { proposedInvestmentsWayDis }=JSON。解析(数据)；
如果（状态===200) {
//this.investmentsWayData=[{0:合资, 1: 合作, 2: 独资, 3: 其他}]
这个。investmentswaydata=proposedinvestmentswaydis。映射((项目)={
返回item.wayDis
});
//这个。investmentswaydatacount=[{ 0: 496 ，1: 372 ，2: 248 ，3: 124}]
这个。investmentswaydatacount=proposedinvestmentswaydis。映射((项目)={
返回项目.计数
});
//这个。investmentswaydatacounts=[{ item style:
//color:{
//0: rgba(240，7，100，1)
//1: rgba(0，215，229，1)}
//value: 496}]
这个。investmentswaydatacounts=proposedinvestmentswaydis。映射((项目，索引)={
返回{
值：item.count，
项目样式：{
颜色：颜色[索引],
},
};
});
这个。init map()；
}
});
},
},
};
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。