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>
echars 柱状图正常状态 --》二次封装的更多相关文章
- echars 柱状图 堆叠状态 --》二次封装
<template> <!-- 柱状图 堆叠 1. 调用页面引入 import EcharsColumnStack from '@/components/echarsColumnSt ...
- echars 饼图 --》二次封装
<template> <!-- 饼状图 1. 调用页面引入 import EcharsPie from '@/components/echarsPie.vue'; 注:自定义的组件名 ...
- Android 应用程序集成Google 登录及二次封装
谷歌登录API: https://developers.google.com/identity/sign-in/android/ 1.注册并且登录google网站 https://accounts. ...
- Android 应用程序集成FaceBook 登录及二次封装
1.首先在Facebook 开发者平台注册一个账号 https://developers.facebook.com/ 开发者后台 https://developers.facebook.com/ap ...
- 对jquery的ajax进行二次封装
第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...
- AFNetworking二次封装的那些事
AFNetworking可是iOS网络开发的神器,大大简便了操作.不过网络可是重中之重,不能只会用AFNetworking.我觉得网络开发首先要懂基本的理论,例如tcp/ip,http协议,之后要了解 ...
- 本地缓存下载文件,download的二次封装
来源:http://ask.dcloud.net.cn/article/524 源码下载链接 说明: (1)由于平时项目中大量用到了附件下载等功能,所以就花了一个时间,把plus的downlaod进行 ...
- iOS菜鸟之AFN的二次封装
我用一个单例类将一些常用的网络请求进行了二次封装,主要包括post请求 get请求 图片文件上传下载 视频的断点续传等功能. 首先大家先去github上下载AFN,将文件夹内的AFNetworki ...
- OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
随机推荐
- jpa 自定义sql 删除方法注意点
1.jpa自带的delete()方法可以成功删除对象 delete(id),或者delete(entity) 2.自定义删除方法注意点 参考:https://www.jianshu.com/p/9d5 ...
- Js中JSON.stringify()与JSON.parse()
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使使JSON称为理想的数据交换语 ...
- element-ui + redis + mongo + nuxt
用户注册: let {username,password} = req.body; let u = await UserModel.findOne({username}); if(u){ res.js ...
- java——hasCode是如何对应到数组索引的?为什么HashMap的initailCapacity要设置成2的n次幂?为什么要树化hashMap?
一: 源代码是这样实现的: static final int hash(Object var0) { int var1; return var0 == null ? 0 : (var1 = var0. ...
- js-计算textarea可剩余的字数???
效果图 HTML: JS:
- sql 查询 某字段是否重复
select count(*) from ( select * from 客户 )C GROUP BY 客户编码 select * from ( select count(*)num from ( s ...
- 关于Fibonacci博弈的一些学习
关于Fibonacci博弈的一些学习 一道例题 问题 给定n(n≥2)个石头,游戏双方轮流取至少一个石子,取到最后一个石子的人算赢,但是要满足一下规则: 第一次取不能全部取完所有的石子. 设前一次取的 ...
- C#获取网页信息并存入数据库
1,获取以及商品分类信息 给一网页获取网页上商品信息的分类 using Skay.WebBot; using System; using System.Collections.Generic; usi ...
- 【每日一包0006】dedupe
github地址:https://github.com/ABCDdouyae... dedupe 对数组进行去重,也可以自定义去重(比如要求数组的每一个对象的某个属性不重复) 文档地址:https:/ ...
- Android中非activity类调用activity方法
例如需要使用: alarmManager = (AlarmManager) getSystemService(ALARM_SERVICE); 第一种方法就是使其类变成Activity. 第二种方法便是 ...