vue echarts实现横向柱状图
程序员文章站
2022-07-11 14:59:52
本文实例为大家分享了vue echarts实现横向柱状图的具体代码，供大家参考，具体内容如下实现效果：代码：
本文实例为大家分享了vue echarts实现横向柱状图的具体代码，供大家参考，具体内容如下
实现效果：
代码：
<template>
<div class="overyearspompany">
<div id="overyearspompanychart" style="flex: 1; height: 368px; margin-top: -42px"></div>
</div>
</template>
<script>
import { getproposedinvestments } from '@/api/government';
const colors = [
['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)'],
];
export default {
data() {
return {
investmentswaydata: [],
investmentswaydatacount: [],
investmentswaydatacounts: [],
};
},
mounted() {
this.getproposedinvestments();
},
methods: {
initmap() {
var mychart = this.$echarts.init(document.getelementbyid('overyearspompanychart'));
const option = {
tooltip: {
show: true,
trigger: 'axis',
axispointer: {
type: 'shadow',
},
},
xaxis: {
type: 'value',
axislabel: {
show: true,
color: '#02cffcff',
fontfamily: 'tencentsans',
},
axisline: {
show: true,
linestyle: {
color: '#02cffcff',
},
},
splitline: {
show: true,
linestyle: {
color: 'rgba(71, 126, 171, 1)',
},
},
},
yaxis: [
{
type: 'category',
inverse: true, //倒叙
axislabel: {
color: '#02cffcff',
fontfamily: 'tencentsans',
},
axistick: {
show: false,
},
axisline: {
show: true,
linestyle: {
color: '#02cffcff',
},
},
splitline: {
show: true,
linestyle: {
type: 'dotted',
color: 'rgba(71, 126, 171, 1)',
},
},
data: this.investmentswaydata,
},
],
series: [
{
type: 'bar',
barwidth: 15,
label: {
position: ['98%', -20],
show: true,
color: '#fff',
fontfamily: 'tencentsans',
},
data: this.investmentswaydatacount,
itemstyle: {
color(params) {
const { dataindex } = params;
let color = {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 0,
colorstops: [
{
offset: 0,
color: colors[dataindex] ? colors[dataindex][0] : 'red',
},
{
offset: 1,
color: colors[dataindex] ? colors[dataindex][1] : 'red',
},
],
};
return color;
},
},
},
],
};
mychart.setoption(option);
},
getproposedinvestments() {
getproposedinvestments().then((res) => {
const { status, data } = res;
const { proposedinvestmentswaydis } = json.parse(data);
if (status === 200) {
// this.investmentswaydata=[{0: "合资", 1: "合作", 2: "独资", 3: "其他"}]
this.investmentswaydata = proposedinvestmentswaydis.map((item) => {
return item.waydis;
});
// this.investmentswaydatacount=[{0: "496", 1: "372", 2: "248", 3: "124"}]
this.investmentswaydatacount = proposedinvestmentswaydis.map((item) => {
return item.count;
});
// this.investmentswaydatacounts=[{itemstyle:
// color:{
// 0: "rgba(240, 7, 100, 1)"
// 1: "rgba(0, 215, 229, 1)"}
// value: "496"}]
this.investmentswaydatacounts = proposedinvestmentswaydis.map((item, index) => {
return {
value: item.count,
itemstyle: {
color: colors[index],
},
};
});
this.initmap();
}
});
},
},
};
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。