2023-11-15 81
效果图：
在效果中可以清晰的看见 当鼠标移动到柱形图上面的时候 会显示 当前柱形图的全部信息 并且在右上角给三种状态设置了对应的按钮 可以自由的去操控 向显示对比的内容
html：
主要载具还是myChart盒子
data中需要准备的数据 主要的时当前 柱形图中各个部门 以及反馈 未反馈 超时反馈三个数组
声明一个方法 在内部去初始化echarts表格 并配置基本
绘制图标：
柱形图的排列方向以及四边边界等
x轴与y轴各显示对应的内容
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",
},
],
});
},
},最后在mounted函数中调用drawBar方法就可以了
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue中基于Echarts的双正方面柱状图</title>
</head>
<body>
<div id="app">
<div style="margin: 30px 250px">
<p>
介绍：y轴双正方向柱图，所谓双正方向，横轴上下展现出来的数据都是正值。横轴上方数据和为100%,下方是总数据中的一项展示。
</p>
<p>
实现：主要在于对数据的处理上，对横轴下方的数据处理展示出正值，从而营造出双正方向的假象。
</p>
</div>
<div class="myChart" :style="{height:'500px',margin:'0 200px'}"></div>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script src="./js/echarts.js"></script>
<script>
const app = new Vue({
el: "#app",
data() {
return {
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],
};
},
mounted() {
this.drawBar();
},
methods: {
drawBar() {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector(".myChart"));
console.log(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",
},
],
});
},
},
watch: {
message() {},
},
});
</script>原文链接：http://1.15.94.33/?id=207
=========================================
http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。
Jquery 2022-12-02
Jquery 2022-12-02
Vue 2023-06-02
Jquery 2022-12-02
Vue 2023-07-14
Vue 2023-06-02
Vue 2023-07-07
Vue 2023-07-19
Vue 2023-07-03
Vue 2023-07-26
扫码二维码
获取最新动态
