echars 饼图 --》二次封装
<template>
<!-- 饼状图
1. 调用页面引入
import EcharsPie from '@/components/echarsPie.vue';
注:自定义的组件名称 不要使用关键字
components: {EcharsPie}
2. 调用页面入参:
<EcharsPie :dataList = "valObj"></EcharsPie>
valObj: {
title: "图表的标题名称",
tooltip: " 这是提示信息",
width: 400,
height: 300,
color: ["#1EAB8F", "#22D2FD", "#FFC000", "#828DA2", "#FF6023", "#0576FE"], //颜色 数组
seriesName: "设备状态",
yData: [
{ value: 20, name: "未知", dic_code: "0" },
{ value: 10, name: "工作", dic_code: "1" },
{ value: 90, name: "待机", dic_code: "2" },
{ value: 0, name: "停机", dic_code: "3" },
{ value: 0, name: "故障", dic_code: "4" },
{ value: 0, name: "调试", dic_code: "5" }
],
legendList:{
itemGap: 16, // 设置legend的间距
itemWidth: 30,// 设置宽度
itemHeight: 14, // 设置高度
orient: "vertical", //垂直显示还是水平显示
right: 0, //legend相对位置
bottom: 30,//legend相对位置
textStyle: { fontSize: "14" },//legend字体大小
data: ["未知", "工作", "待机", "停机", "故障", "调试"], // 数据
},
seriesStyle:{
lableShow:true,//是否出现提示文字
lableFontSize:14,//提示文字大小
lableLineShow:true,//是否出现提示线
lableLineLength:35,//提示线的长度
radius: "60%", //饼图的半径 若为数组,第一项是内半径,第二项是外半径。例['50%', '70%']
center: ["50%", "60%"], //中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。饼图相对中心的位置
}
}
-->
<div class="echart_box_pie">
<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_pie" :style="{width:dataList.width+'px',height:dataList.height+'px'}" id="echart_pie"></div>
</div>
</template> <script>
export default {
props: {
dataList: {
type: Object,
default: function() {
return {
width: 1400, //地图宽
height: 800 //地图高
};
}
}
},
data() {
return {};
},
mounted() {
this.initEcharsPie();
},
methods: {
//初始化echars柱状图,
initEcharsPie() {
var _this = this;
let myChart = this.$echarts.init(document.getElementById("echart_pie"));
myChart.clear();
// 绘制图表样式
let option = {
title: {
text: ""
},
color: this.dataList.color, //饼状图颜色数组
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: this.dataList.legendList,
series: [
{
name: this.dataList.seriesName,
type: "pie",
radius: this.dataList.seriesStyle.radius,
center: this.dataList.seriesStyle.center,
data: this.dataList.yData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
},
normal: {
label: {
//此处为指示线文字设置
show: this.dataList.seriesStyle.labelShow,
formatter: "{d}%\n{b}",
fontWeight: "normal",
fontSize: this.dataList.seriesStyle.lableFontSize
},
labelLine: {
//指示线状态
show: this.dataList.seriesStyle.lableLineShow,
length: this.dataList.seriesStyle.lableLineLength
}
}
}
}
]
};
myChart.setOption(option);
}
}
};
</script> <style lang="scss" scoped>
.echart_box_pie {
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 饼图 --》二次封装的更多相关文章
- ios MBProgressHUD 使用,及二次封装
MBProgressHUD是一个显示HUD窗口的第三方类库,用于在执行一些后台任务时,在程序中显示一个表示进度的loading视图和两个可选的文本提示的HUD窗口.MBProgressHUD 二次封装 ...
- 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)
前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...
- iOS项目相关@AFN&SDWeb的二次封装
一,AFNetworking跟SDWebImge是功能强大且常用的第三方,然而在实际应用中需要封装用来复用今天就跟大家分享一下AFN&SDWeb的二次封装 1. HttpClient.h及.m ...
- Quick Cocos (2.2.5plus)CoinFlip解析(MenuScene display AdBar二次封装)
转载自:http://cn.cocos2d-x.org/tutorial/show?id=1621 从Samples中找到CoinFlip文件夹,复制其中的 res 和 script 文件夹覆盖新建工 ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
- 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协议,之后要了解 ...
- volley二次封装
产品中使用Volley框架已有多时,本身已有良好封装的Volley确实给程序开发带来了很多便利与快捷.但随着产品功能的不断增加,服务器接口的不断复杂化,直接使用Volley原生的JSONObjectR ...
随机推荐
- Redis数据类型之散列表
Redis五大数据类型以及操作 目录: 一.redis的两种链接方式 二.redis的字符串操作(string) 三.redis的列表操作(list) 四.redis的散列表操作(类似于字典里面嵌套字 ...
- linux 环境下安装MySQL5.7(yum)
安装环境: CentOS7 64位,MySQL5.7 原文链接:https://blog.csdn.net/xyang81/article/details/51759200 1. 配置yum源 在My ...
- 【GDOI2013模拟4】贴瓷砖
题目 A镇的主街是由N个小写字母构成,镇长准备在上面贴瓷砖,瓷砖一共有M种,第i种上面有Li个小写字母,瓷砖不能旋转也不能被分割开来,瓷砖只能贴在跟它身上的字母完全一样的地方,允许瓷砖重叠,并且同一种 ...
- Python连接MySQL之Python库pymysql
连接数据库 pymysql连接数据库的方式和使用sqlite的方式基本相同: 使用connect创建连接对象 connect.cursor创建游标对象,SQL语句的执行基本都在游标上进行 cursor ...
- 【bzoj4562】[Haoi2016]食物链
*题目描述: 如图所示为某生态系统的食物网示意图,据图回答第1小题 现在给你n个物种和m条能量流动关系,求其中的食物链条数. 物种的名称为从1到n编号 M条能量流动关系形如 a1 b1 a2 b2 a ...
- R 常用代码段
#用来根据不同的细胞来源重新画TSNE图cell_source <-colnames(immune_nobatch) cell_type <- strsplit(cell_source,s ...
- 【BZOJ5249】IIIDX(贪心,线段树)
题意: 思路:赛季结束之前余总推荐的一道好题,不愧是余总 From https://www.cnblogs.com/suika/p/8748115.html 简略的说就是在预留足够多的位置的前提下贪心 ...
- (49)LINUX应用编程和网络编程之四 Linux进程全解
补充: 1. C程序的执行过程: C编译器调用链接器,链接器设置可执行程序文件的启动起始地址(启动例程),启动例程获得内核传递来的 命令行参数和环境变量值,为调用main函数做准备.[实际上该启动例 ...
- oracle 11g安装教程终结版
1.解压文件 2.双击 “setup.exe” 3.高级安装.下一步 4.企业版 下一步 5.下一步 6.只要不报错,警告没事.(路径如果报错的话,没事,直接继续) 注意:如果有需要6.2版本的错误 ...
- 和他人一起管理GitHub仓库
和他人一起管理 GitHub 仓库方法 打开一个项目的仓库 同意好之后在项目中要添加 README.md 文件(重要) 要让别人也可以使用 master 主线 在上传代码前,一定要使用 git 指令 ...