大家好，今天给大家介绍一款，vue.js+echarts实现柱状图图表源码（图1）。送给大家哦，获取方式在本文末尾。
图1
源码完整，需要的朋友可以下载学习哦
图2
本源码编码：10139，需要的朋友，关注文章末尾公众号，搜索10139，即可获取。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
<link rel="icon" href="https://www.51qianduan.com/favicon.ico"> <title>vue中基于Echarts的y轴双正方向柱图组件</title>
<script src="static/js/vue.min.js"></script>
<script src="static/js/echarts-4.2.1.min.js"></script>
</head>
<body>
<div id="app">
<div style="margin: 30px 250px;">
<p>
介绍：y轴双正方向柱图，所谓双正方向，横轴上下展现出来的数据都是正值。横轴上方数据和为100%,下方是总数据中的一项展示。
</p>
<p>
实现：主要在于对数据的处理上，对横轴下方的数据处理展示出正值，从而营造出双正方向的假象。
</p>
</div>
<div id="myChart" :style="{height: '500px', margin: '0 200px'}"></div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
id: '',
myChart: null,
deptArray: ['人力资源部', '业务开发部', '资料处理部', '广告宣传部', '后勤保障部', '信用审核部', '公共关系部'],
huiFuList: [8, 7, 9, 5, 4, 5, 3],
noHuiFuList: [7, 5, 4, 6, 3, 1, 2],
chaoShiList: [-3, -2, -3, 0, -1, -2, -4]
}
},
computed: {
},
methods: {
drawBar() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: {
left: 'center',
text: '某工厂各部门对某事件关心反馈值统计',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
crossStyle: {
color: '#999'
}
},
// 重点内容：自定义悬浮显示的内容及格式
formatter: function(params) {
let title = '';
let rows = '';
if (params.length > 0) {
title = params[0].name;
}
for (let i = 0; i < params.length; i++) {
if (params[i].value > 0) {
rows += '<br />' + params[i].seriesName + ': ' + params[i].value
} else {
rows += '<br />' + params[i].seriesName + ': ' + (-params[i].value)
}
}
return title + rows;
}
},
toolbox: {},
legend: {
data: ['未反馈', '已反馈', '超时反馈'],
// 图例排列方向，纵排
orient: 'vertical',
// 图例位置
right: 50,
top: 50,
bottom: 20,
},
// 图表（上、下、左、右边界的宽度）
grid: {
left: '3%',
right: '15%',
bottom: '3%',
containLabel: true
},
calculable: true,
xAxis: [{
type: 'category',
data: this.deptArray,
axisLabel: {
interval: 0,
fontFamily: 'Arial',
fontWeight: 'bold',
fontSize: 12,
align: 'center',
// 重点内容：自定义横轴显示的内容及格式
formatter: function(value) {
let str = "";
let num = 4; //每行显示字数
let valLength = value.length; //该项x轴字数
let rowNum = Math.ceil(valLength / num); // 行数
if (rowNum > 1) {
for (let i = 0; i < rowNum; i++) {
let temp = "";
let start = i * num;
let end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
}
},
}],
yAxis: [{
name: "反馈数/个",
type: 'value',
show: false,
interval: 2,
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: '已反馈',
type: 'bar',
stack: '反馈数',
data: this.huiFuList,
barWidth: 30, //柱图宽度
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'inside', //在内部显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
},
formatter: function(params) {
if (params.value > 0) {
return params.value;
} else {
return ' ';
}
},
}
}
},
color: '#74BB44'
},
{
name: '未反馈',
type: 'bar',
stack: '反馈数',
data: this.noHuiFuList,
barWidth: 30, //柱图宽度
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'inside', //在内部显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
},
formatter: function(params) {
if (params.value > 0) {
return params.value;
} else {
return ' ';
}
},
}
}
},
color: '#F70909'
},
{
name: '超时反馈',
type: 'bar',
stack: '反馈数',
data: this.chaoShiList,
barWidth: 30, //柱图宽度
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'inside', //在内部显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
},
formatter: function(params) {
if (params.value < 0) {
return -params.value;
} else {
return ' ';
}
},
}
}
},
color: '#9900FF'
}
]
})
}
},
beforeMount() {
},
mounted() {
this.drawBar()
},
watch: {
'message'() {
}
}
})
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
