<Template>
! <- Histogram stacked
one call page introduced.
Import from EcharsColumnStack '@ / Components / echarsColumnStack.vue' ;
NOTE: Do not defined component name from the keyword
Components: EcharsColumnStack} {
2 call parameters into the page. :
<EcharsColumnStack: dataList = "valObj"> </ EcharsColumnStack>
valObj: {
title: "graph title name" ,
ToolTip:
"this is the message" ,
width: 700 ,
height: 600 ,
Color: ["# 7ae4a2", "# 04c2ce", "# FDD000", "# c9cacb", "# f31122", "# 0089FF"], // array of colors
echarsTooltipStr: "Device:" // mouse-over tooltip text tips
Rotate: to true , // when data is greater than five, displays whether the inclination
isScroll: to false , // when data is greater than ten, the scroll bar is displayed, the selected inclination generally not display a scroll bar
PERCENTAGE: to true , // Y whether axis shows the percentage, when echarsData as a percentage of val when set to true, otherwise false
legendList: [ "unknown", "work", "standby", "stop", "fail", "debug"], // whether to display the Legend
xData:[ "sb001_ test Do not move", "Configure", "sb001_ test Do not move", "Configure", "LilDevcie0726" [ "sb001_ test do not move", "Configure", "sb001_ test do not move", "Configure", "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 {
The props: {
dataList: {
type: Object,
default : function () {
return {
width: 1400, // map width
height: 800 // Map high
};
}
}
},
Data () {
return } {;
},
Mounted () {
the this .initEcharsColumnStack ();
},
Methods: {
// initialization echars histogram,
initEcharsColumnStack () {
the let that = the this ;
the let xAxisData = [],
yAxisData = [];
the let isRotate = "" ;
the let dataZoom = [];
IF ( the this .dataList.xData.length> 10 ) {
// the default display 10 pieces of data (redundant data when 10, scrollbar)
dataZoom = [
{
// area zoom
type: "slider", // slider showing sliding block, the built-in represented Inside
Show: to true , // whether to display components. If set to false, not shown, there are data filtering function.
height:. 8, // scroll bar Height
Start: 0, // start window range of percentages,% represents 0
End: (10 / the this .dataList.xData.length) * 100 // default display data 10 (when redundant data 10, a scroll bar)
}
];
} the else {
dataZoom = [
{
// area zoom
type: "slider", // slider showing sliding block, the built-in represented Inside
Show: false // whether to display components. If set to false, not shown, there are data filtering function.
}
];
}
IF ( the this .dataList) {
// X-axis is less than or equal to 5 does not rotate, or rotation 45
IF ( the this .dataList.xData.length <= 5 ) {
isRotate = 0 ;
} the else {
isRotate = 45 ;
}
myChart the let = the 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" ,
// the minInterval: 1, // set to 1 to ensure that the axis scale display is divided into an integer.
AxisLabel: {
Formatter: the this ? .dataList.percentage "{value}%": "{value}"
}
}
],
dataZoom: the this ? .dataList.isScroll dataZoom: "" ,
Series: the this .dataList.series
};
/ / Legend
the this .dataList.legendList
(option.legend =? {
Data: the 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>