echars 柱状图正常状态 --》二次封装
<template>
<!-- 柱状图 正常
1. 调用页面引入
import EcharsColumnNormal from '@/components/echarsColumnNormal.vue';
注:自定义的组件名称 不要使用关键字
components: {EcharsColumnNormal}
2. 调用页面入参:
<EcharsColumnNormal :dataList = "valObj"></EcharsColumnNormal>
valObj: {
title: "故障排名",
tooltip:
" 显示：所选设备中发生的故障次数和排名<br/> 结论：通过设备发生故障排名可以分析出所选设备中最容易发生的故障情况，此类故障是产品改进的主要方向",
width: 700,
height: 600,
echarsData: [
{ name: "shebei001", val: 0.2},
{ name: "配置", val: 0.6 },
{ name: "设备舞动", val: 0.5 },
{ name: "y15故障-确认", val: 0.3 },
{ name: "组合1_故障_确认并恢复", val: 0.3 },
{ name: "确认并恢复", val: 0.2 },
{ name: "y9组合故障-确认", val: 0.2 },
{ name: "y组合11-故障-确认", val: 0.1 },
{ name: "y2组合故障-确认", val: 0.1 },
{ name: "组合2-故障-确认并恢复", val: 0.1 },
],
color: ["yellow"], //颜色 数组
barWidth:25, //柱宽
echarsTooltipStr: "设备: ", //鼠标滑过顶部提示文字
average: true, //图表是否显示平均值的线条 , true显示,false隐藏
Rotate: true, //当数据大于五条时,是否倾斜显示
isScroll: false, //当数据大于十条时,是否显示滚动条,一般情况下选择了倾斜就不在显示滚动条
seriesName:"设备稼动率", //series name
percentage:false, //y轴是否显示百分比 , 当echarsData中的val为百分比时,设为true,否则false
legendList:['设备稼动率'] //是否显示legend
}
-->
<div class="echart_box">
<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" :style="{width:dataList.width+'px',height:dataList.height+'px'}" id="echarsColumn"></div>
</div>
</template>
<script>
export default {
props: {
dataList: {
type: Object,
default: function() {
return {
width: 1400, //地图宽
height: 800 //地图高
};
}
}
},
data() {
return {};
},
mounted() {
this.initEcharsColumn();
},
methods: {
//初始化echars柱状图,
initEcharsColumn() {
let that = this;
let xAxisData = [],
yAxisData = [];
let isRotate = "";
let dataZoom = [];
if (this.dataList.echarsData.length > 10) {
//默认显示10条数据（当数据多余10条时，出滚动条）
dataZoom = [
{
//区域缩放
type: "slider", //slider表示有滑动块的，inside表示内置的
show: true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
height: 8, //滚动条高度
start: 0, //数据窗口范围的起始百分比,表示0%
end: (10 / this.dataList.echarsData.length) * 100 //默认显示10条数据（当数据多余10条时，出滚动条）
}
];
} else {
dataZoom = [
{
//区域缩放
type: "slider", //slider表示有滑动块的，inside表示内置的
show: false //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
}
];
}
if (this.dataList.echarsData) {
//x轴小于等于5不旋转，否则旋转45
if (this.dataList.echarsData.length <= 5) {
isRotate = 0;
} else {
isRotate = 45;
}
this.dataList.echarsData.forEach(item => {
xAxisData.push(item.name);
if (item.val) {
yAxisData.push(item.val);
} else {
yAxisData.push(null);
}
let myChart = this.$echarts.init(document.getElementById("echarsColumn"));
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 +
"：" +
params[i].value +
"%<br/>")
: (strReturn +=
params[i].seriesName +
"：" +
params[i].value +
"<br/>");
}
return strReturn;
}
},
xAxis: [
{
type: "category",
data: xAxisData, //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: [
{
name: this.dataList.seriesName,
type: "bar",
barWidth: this.dataList.barWidth,
data: yAxisData,
markLine: this.dataList.average
? {
data: [{ type: "average", name: "平均值" }]
}
: {}
}
]
};
this.dataList.legendList
? (option.legend = {
data: this.dataList.legendList
})
: "",
myChart.setOption(option);
});
}
}
}
};
</script>
<style lang="scss" scoped>
.echart_box {
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>
