<template>
<div
:class="className"
:style="{ height: height, width: width, 'min-height': minHeight }"
/>
</template>
<script>
import echarts from "echarts";
import {
debounce } from "@/utils";
require("echarts/theme/macarons"); // echarts theme
import "echarts-liquidfill";
const animationDuration = 6000;
export default {
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "10rem",
},
minHeight: {
type: String,
default: "5rem",
},
param: {
type: Array,
default: () => {
},
},
},
data() {
return {
chart: null,
};
},
watch: {
param: {
handler: function (value) {
this.$nextTick((_) => {
this.initChart();
});
},
immediate: true,
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
this.__resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize();
}
}, 100);
window.addEventListener("resize", this.__resizeHandler);
},
beforeDestroy() {
if (!this.chart) {
return;
}
window.removeEventListener("resize", this.__resizeHandler);
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
let color = this.$store.state.color.colorListPars;
this.chart = echarts.init(this.$el, "macarons");
let dataName = [];
let dataNum = [];
let completeNum = [];
let scatteredNum = [];
this.param.map((item) => {
dataName.push(item.staffName);
dataNum.push(parseFloat(Number(item.num).toFixed(0)));
completeNum.push(parseFloat(Number(item.completeNum).toFixed(0)));
scatteredNum.push(parseFloat(Number(item.scatteredNum).toFixed(0)));
});
let option = {
color: ["#2394ef"],
grid: {
left: "1px",
bottom: "0px",
top: "10px",
containLabel: true,
},
xAxis: {
type: "category",
axisLine: {
lineStyle: {
color: "#EFEFEF" } },
axisLabel: {
textStyle: {
//改变刻度字体样式
color: color,
fontSize: 12,
},
formatter: function (value) {
return value.split("").join("\n");
},
},
data: dataName,
},
legend: {
orient: "vertical",
top: 0,
right: 0,
itemWidth: 10,
itemHeight: 10,
icon: "circle",
data: ["整件", "零散"],
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params, ticket, callback) {
//格式化函数
return (
"总数量:" +
parseFloat(Number(params[0].data + params[1].data).toFixed(0)) +
"件<br />整件:" +
parseFloat(Number(params[0].data).toFixed(0)) +
"件<br />零散:" +
parseFloat(Number(params[1].data).toFixed(0)) +
"件"
);
},
},
yAxis: {
axisLabel: {
color: color,
formatter: "{value}件",
},
axisLine: {
show: true, lineStyle: {
color: "#FFFFFF" } },
},
// dataZoom: [
// {
// show: true,
// start: 0,
// end: 100
// },
// {
// type: 'inside',
// start: 0,
// end: 100
// },
// ],
series: [
{
name: "整件",
type: "bar",
stack: "total", // ! 多条数据总计 => 堆叠
barWidth: 24,
color: "#2D8EFF",
itemStyle: {
borderRadius: 0 },
data: completeNum,
},
{
name: "零散",
type: "bar",
stack: "total", // ! 多条数据总计 => 堆叠
barWidth: 24,
color: "#CAE1FF",
itemStyle: {
borderRadius: [12, 12, 0, 0] },
data: scatteredNum,
},
{
data: dataNum,
type: "line",
emphasis: {
focus: "series",
},
barWidth: 1,
lineStyle: {
color: "transparent",
},
symbol: "none",
markLine: {
data: [
{
type: "average",
name: "平均值",
},
],
},
},
],
};
if (this.param.length > 20) {
option.dataZoom = [
{
type: "slider",
show: true,
xAxisIndex: [0],
start: 0,
end: 20,
textStyle: {
color: "#ccd7d7",
},
filterMode: "empty",
bottom: 14,
},
];
}
if (option && typeof option == "object") {
this.chart.setOption(option);
}
},
},
};
</script>
ECharts柱状图加滚动条
猜你喜欢
转载自blog.csdn.net/weixin_42268006/article/details/128157795
今日推荐
周排行