echars 柱状图正常状态 --》二次封装
<!-- 柱状图 正常
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> 手机扫一扫
移动阅读更方便
你可能感兴趣的文章