<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 饼图 --》二次封装的更多相关文章

  1. ios MBProgressHUD 使用,及二次封装

    MBProgressHUD是一个显示HUD窗口的第三方类库,用于在执行一些后台任务时,在程序中显示一个表示进度的loading视图和两个可选的文本提示的HUD窗口.MBProgressHUD 二次封装 ...

  2. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  3. iOS项目相关@AFN&SDWeb的二次封装

    一,AFNetworking跟SDWebImge是功能强大且常用的第三方,然而在实际应用中需要封装用来复用今天就跟大家分享一下AFN&SDWeb的二次封装 1. HttpClient.h及.m ...

  4. Quick Cocos (2.2.5plus)CoinFlip解析(MenuScene display AdBar二次封装)

    转载自:http://cn.cocos2d-x.org/tutorial/show?id=1621 从Samples中找到CoinFlip文件夹,复制其中的 res 和 script 文件夹覆盖新建工 ...

  5. 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  6. Android 应用程序集成Google 登录及二次封装

    谷歌登录API:  https://developers.google.com/identity/sign-in/android/ 1.注册并且登录google网站 https://accounts. ...

  7. Android 应用程序集成FaceBook 登录及二次封装

    1.首先在Facebook 开发者平台注册一个账号 https://developers.facebook.com/ 开发者后台  https://developers.facebook.com/ap ...

  8. 对jquery的ajax进行二次封装

    第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...

  9. AFNetworking二次封装的那些事

    AFNetworking可是iOS网络开发的神器,大大简便了操作.不过网络可是重中之重,不能只会用AFNetworking.我觉得网络开发首先要懂基本的理论,例如tcp/ip,http协议,之后要了解 ...

  10. volley二次封装

    产品中使用Volley框架已有多时,本身已有良好封装的Volley确实给程序开发带来了很多便利与快捷.但随着产品功能的不断增加,服务器接口的不断复杂化,直接使用Volley原生的JSONObjectR ...

随机推荐

  1. Jmeter启动jmeter-server.bat 报java.io.FileNotFoundException:rmi_keystore.jks 解决方法

    解决方法:1.找到apache-jmeter-5.0\bin\jmeter.properties 2.修改server.rmi.ssl.disable=true (记得去除server.rmi.ssl ...

  2. 微信小程序评价页面

    <!--服务评价--> <view class="service"> <!--评分--> <view class='score'> ...

  3. mysql8.0.17复制搭建及其gtid的1062和1032异常

    mysql8.0.17复制搭建及其gtid的1062和1032异常 参考资料: https://blog.csdn.net/wzy0623/article/details/91982743https: ...

  4. 【NOIP2016提高A组模拟9.15】Math

    题目 分析 因为\((-1)^2=1\), 所以我们只用看\(\sum_{j=1}^md(i·j)\)的值模2的值就可以了. 易证,一个数x,只有当x是完全平方数时,d(x)才为奇数,否则为偶数. 那 ...

  5. electron打包成.exe后限制只启动一个应用

    注意:这是2.x的文档 const {app} = require('electron') let myWindow = null const shouldQuit = app.makeSingleI ...

  6. Type.GetType反射的对象创建Activator.CreateInstance

    /// <summary> /// 获取对应类的实现 /// </summary> /// <param name="libname">< ...

  7. php实现hashTable

    Hash表作为最重要的数据结构之一,也叫做散列表.使用PHP实现Hash表的功能.PHP可以模拟实现Hash表的增删改查.通过对key的映射到数组中的一个位置来访问.映射函数叫做Hash函数,存放记录 ...

  8. css @keyframes属性 语法

    css @keyframes属性 语法 @keyframes是什么?直线电机生产厂家 @keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画. 作用:通过 @k ...

  9. BZOJ 3162: 独钓寒江雪 树的同构 + 组合 + 计数

    Description Input   Output 求一棵树编号序列不同的方案数: 令 $f[u],g[u]$ 分别表示 $u$ 选/不选 的方案数. 则 $f[u]=\prod_{v\in son ...

  10. UVA 12299 线段树 ( 单点跟新 , 区间查询)

    题目链接:题意:在传统的RMQ的基础上加上一个操作:shift(i1,i2,i3...ik),表示将这些元素,依次向左移动一位(训练指南247页) #include <iostream> ...