vue echarts实现横向柱状图
更新时间：2021年09月08日 10:38:53 作者：tendernessxy
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在vue开发中出于各种目的,我们常常需要让组件重新加载渲染,这篇文章主要给大家介绍了关于vue刷新子组件、重置组件以及重新加载子组件的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue简单的二维数组循环嵌套方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了详解vue中localStorage的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了vue使用laydate时间插件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
在不同的前端项目中使用相同的axios封装有利于保持一致性,有利于数据之间的传递和处理,本文主要提供两种对axios进行封装的思路,有需要的小伙伴可以参考一下2023-10-10
Openlayer具有自己的扩展插件ol-ext，可以用来实现图形的拖拽、旋转、缩放、拉伸、移动等操作，本文将主要介绍通过Openlayer实现图形的拖动和旋转，需要的同学可以学习一下2021-11-11
本文主要介绍了vue-class迁移vite的一次踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了vue中路由的前进和后退问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vuecli项目构建SSR服务端渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
最新评论