<!-- * @Author: your name * @Date: 2022-04-11 17:13:13 * @LastEditTime: 2022-04-12 11:00:12 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/allCharsCom/Chars.vue --> <template> <div class="my-chars"> <div ref="chars" class="chars"></div> <!-- <slot> --> <!-- 如果是默认值,就显示这个 --> <div v-if="!options" class="text" :style="{ color: color }"> <span class="num">87</span><span class="fh">%</span> </div> <!-- </slot> --> </div> </template> <script> export default { props: { options: { type: Object, default: null, }, // 默认饼图的颜色 color: { tupe: String, default: "#399AF4", }, }, data() { return { myChats: null, // 默认options defaultOptions: { tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)", }, color: ["#ffffff", "#399AF4"], // title: { // text: "资产总数", // left: "center", // top: "50%", // textStyle: { // textAlign: "center", // fill: "#333", // fontSize: 14, // fontWeight: 400, // }, // }, graphic: { type: "text", left: "center", top: "45%", style: { text: "", textAlign: "center", fill: "#399AF4", fontSize: 18, }, }, series: [ { name: "完成情况", type: "pie", radius: ["62%", "80%"], avoidLabelOverlap: false, // hoverAnimation: false, label: { normal: { show: false, position: "center", }, }, itemStyle: { borderRadius: 10, borderColor: "#fff", }, data: [ { value: 13, name: "未完成", }, { value: 87, name: "完成", }, ], }, ], }, }; }, mounted() { // if (!this.options) { this.charsInit(); // } }, methods: { charsInit() { this.myChats = this.$echarts.init(this.$refs.chars); let options; // 如果传进来的options就用传进来的,否则就用默认的 if (this.options) { options = this.options; } else { options = JSON.parse(JSON.stringify(this.defaultOptions)); options.color[1] = this.color; } this.myChats.setOption(options); }, }, }; </script> <style lang="scss" scoped> .my-chars { width: 100%; height: 100%; position: relative; // background-color: blue; } .chars { width: 100%; height: 100%; // background: yellow; } .text { position: absolute; width: 80px; height: 40px; top: 50%; left: 50%; margin-left: -40px; margin-top: -10px; text-align: center; color: #399af4; .num { font-size: 21px; letter-spacing: 0px; } .fh { font-size: 1px; } } </style>