<template>
<!-- 柱状图 堆叠
1. 调用页面引入
import EcharsColumnStack from '@/components/echarsColumnStack.vue';
注:自定义的组件名称 不要使用关键字
components: {EcharsColumnStack}
2. 调用页面入参:
<EcharsColumnStack :dataList = "valObj"></EcharsColumnStack>
valObj: {
title: "图表的标题名称",
tooltip:
" 这是提示信息",
width: 700,
height: 600,
color: ["#7ae4a2", "#04c2ce", "#FDD000", "#c9cacb", "#f31122", "#0089FF"], //颜色 数组
echarsTooltipStr: "设备: ", //鼠标滑过 tooltip提示文字
Rotate: true, //当数据大于五条时,是否倾斜显示
isScroll: false, //当数据大于十条时,是否显示滚动条,一般情况下选择了倾斜就不在显示滚动条
percentage: true, //y轴是否显示百分比 , 当echarsData中的val为百分比时,设为true,否则false
legendList: ["未知", "工作", "待机", "停机", "故障", "调试"], //是否显示legend
xData:["sb001_测试请勿动", "配置","sb001_测试请勿动", "配置","LilDevcie0726"],
series:[
{name: "未知", type: "bar", barWidth: "30", stack: "status", data: [0.75, 100, 100,0,0]},
{name: "工作", type: "bar", barWidth: "30", stack: "status", data: [47.93, 0, 0,0,0]},
{name: "待机", type: "bar", barWidth: "30", stack: "status", data: [7.720000000000001, 0, 0,0,0]},
{name: "停机", type: "bar", barWidth: "30", stack: "status", data: [36.02, 0, 0,0,0]},
{name: "故障", type: "bar", barWidth: "30", stack: "status", data: [2.1399999999999997, 0, 0,0,0]},
{name: "调试", type: "bar", barWidth: "30", stack: "status", data: [5.4399999999999995, 0, 0,0,0]}
]
}
-->
<div class="echart_box_stack">
<div class="echart_tit" v-show="dataList.title">{{dataList.title}}
<el-tooltip placement="bottom-start" effect="light" v-show="dataList.tooltip">
<div slot="content" v-html="dataList.tooltip">
</div>
<i class="el-icon-question"></i>
</el-tooltip>
</div>
<div class="echart_column_stack" :style="{width:dataList.width+'px',height:dataList.height+'px'}" id="echarsColumnStack"></div>
</div>
</template>
<script>
export default {
props: {
dataList: {
type: Object,
default: function() {
return {
width: 1400, //地图宽
height: 800 //地图高
};
}
}
},
data() {
return {};
},
mounted() {
this.initEcharsColumnStack();
},
methods: {
//初始化echars柱状图,
initEcharsColumnStack() {
let that = this;
let xAxisData = [],
yAxisData = [];
let isRotate = "";
let dataZoom = [];
if (this.dataList.xData.length > 10) {
//默认显示10条数据（当数据多余10条时，出滚动条）
dataZoom = [
{
//区域缩放
type: "slider", //slider表示有滑动块的，inside表示内置的
show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
height: 8, //滚动条高度
start: 0, //数据窗口范围的起始百分比,表示0%
end: (10 / this.dataList.xData.length) * 100 //默认显示10条数据（当数据多余10条时，出滚动条）
}
];
} else {
dataZoom = [
{
//区域缩放
type: "slider", //slider表示有滑动块的，inside表示内置的
show: false //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
}
];
}
if (this.dataList) {
//x轴小于等于5不旋转，否则旋转45
if (this.dataList.xData.length <= 5) {
isRotate = 0;
} else {
isRotate = 45;
}
let myChart = this.$echarts.init(document.getElementById("echarsColumnStack"));
myChart.clear();
let option = {
color: this.dataList.color,
tooltip: {
trigger: "axis",
textStyle: {
align: "left"
},
formatter: function(params) {
let strReturn =
that.dataList.echarsTooltipStr + params[0].name + "<br/>";
for (let i = 0; i < params.length; i++) {
that.dataList.percentage
? (strReturn +=
params[i].seriesName + "：" + Number(params[i].value).toFixed(2) + "%<br/>")
: (strReturn +=
params[i].seriesName + "：" + Number(params[i].value).toFixed(2) + "<br/>");
}
return strReturn;
}
},
xAxis: [
{
type: "category",
data: this.dataList.xData, //xAxisData rotateData
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: this.dataList.Rotate ? isRotate : 0,
formatter: function(value, index) {
//value：data中的每一项
var regChinese = new RegExp("[\\u4E00-\\u9FFF]+", "g"); //判断是否包含汉字
var chineseLength = 4;
var englishLength = 8;
if (regChinese.test(value)) {
if (value.length > chineseLength) {
return value.substring(0, 4) + "...";
} else {
return value;
}
} else {
if (value.length > englishLength) {
return value.substring(0, 8) + "...";
} else {
return value;
}
}
}
}
}
],
yAxis: [
{
type: "value",
//minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
axisLabel: {
formatter: this.dataList.percentage ? "{value} %" : "{value}"
}
}
],
dataZoom: this.dataList.isScroll ? dataZoom : "",
series: this.dataList.series
};
//legend
this.dataList.legendList
? (option.legend = {
data: this.dataList.legendList
})
: "",
myChart.setOption(option);
}
}
}
};
</script>
<style lang="scss" scoped>
.echart_box_stack {
margin: 4px;
position: relative;
z-index: 1;
}
.echart_tit {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 40px;
line-height: 40px;
text-align: left;
padding-left: 14px;
box-sizing: border-box;
}
</style>
