12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- <template>
- <div class="saga-fill">
- <div class="mess-view">
- <el-tooltip class="item" effect="dark" :content="renderData.tips" placement="bottom-start">
- <i class="el-icon-info"><span>{{renderData.title}}</span></i>
- </el-tooltip>
- </div>
- <div class="doughnut-view">
- <fan-chart v-if="renderData.needCountO" type="type" width="200" height="200" :name="renderData.title" :renderData="echartsData" :id="id">
- </fan-chart>
- </div>
- <slot></slot>
- </div>
- </template>
- <script>
- import fanChart from "@/components/echarts/fanChart"
- export default {
- data() {
- return {
- echartsData: [],
- color: ["#AB7948", "#CAA679", "#DEC9A8", "#B3CFC4", "#7DAAA7", "#7484A6", "#9DABCB"]
- }
- },
- created() {
- this.echartsData = this.renderData.needCountO;
- // this.echartsData.forEach((item, index) => {
- // item.itemStyle = {
- // color: this.color[index]
- // }
- // })
- },
- components: {
- fanChart
- },
- methods: {
- },
- props: {
- id: {
- type: String,
- default: function createRandomId() {
- return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
- }
- },
- renderData: {
- type: Object,
- default: function () {
- return {}
- }
- }
- },
- }
- </script>
- <style lang="less" scoped>
- .mess-view {
- box-sizing: border-box;
- border-bottom: 1px solid #ddd;
- padding: 10px 20px 10px 15px;
- .saga-title {
- font-size: 14px;
- color: #333;
- font-weight: 600;
- line-height: 14px;
- }
- i {
- span {
- padding-left: 6px;
- }
- }
- }
- .saga-fill {
- width: 345px;
- // height: 220px;
- .doughnut-view {
- height: 165px;
- width: 100%;
- padding: 0 5px;
- box-sizing: border-box;
- }
- }
- </style>
|