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>