vue+echarts 圓角環形圖
阿新 • • 發佈:2021-02-05
不知道為啥我這裡圓角不好使,貼一下程式碼吧
<template> <div class="online-rate"> <el-header> <div class="header-title"> <div id="rectangle"></div> 隱患 </div> </el-header> <div class="chart-content"> <div class="left-part"> <div class="inspection"> <inspectionChart /> </div> <div class="train"> <trainChart /> </div> </div> <div class="center-part"> <hiddenDangerChart /> </div> <div class="right-part"> <div class="deal"> <dealDangerChart /> </div> <div class="drill"> <drillChart /> </div> </div> </div> </div> </template> <script> import resize from "../mixins/resize"; import inspectionChart from "@/views/dashboard-new/treacherous/inspectionChart"; import trainChart from "@/views/dashboard-new/treacherous/trainChart"; import hiddenDangerChart from "@/views/dashboard-new/treacherous/hiddenDangerChart"; import dealDangerChart from "@/views/dashboard-new/treacherous/dealDangerChart"; import drillChart from "@/views/dashboard-new/treacherous/drillChart"; export default { name: "treacherous", data() { return { num: 0, sortRules: "", sortRulesOptions: [ { value: "0", label: "按系統" }, { value: "1", label: "按時間" }, ], }; }, components: { inspectionChart, trainChart, hiddenDangerChart, dealDangerChart, drillChart, }, mixins: [resize], props: {}, mounted() { this.sortRules = "0"; }, methods: { tab(index) { this.num = index; }, moreInfo() { this.$router.push({ path: "/infra/device" }); }, }, }; </script> <style lang="scss" scoped> .online-rate { position: relative; text-align: center; //overflow: hidden; //float: left; height: 100%; width: 100%; .el-header { height: 14% !important; width: 100%; padding: 0 4%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; } .header-title { width: 170px; text-align: left; font-size: 16px; font-weight: 400; color: #ffffff; float: left; } .chart-content { width: 100%; height: 86%; padding: 4%; .left-part { width: 30%; height: 100%; float: left; .inspection { height: 45%; width: 95%; margin-bottom: 10%; } .train { height: 45%; width: 95%; } } .center-part { width: 40%; height: 100%; float: left; } .right-part { width: 30%; height: 100%; float: left; .deal { height: 45%; width: 95%; margin-bottom: 10%; } .drill { height: 45%; width: 95%; } } } } </style>
參考官網例子:
https://www.makeapie.com/editor.html?c=xuyO-o_wd