111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<div id="rose-chart">
|
|
<div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div>
|
|
<!-- <dv-charts :option="option" /> -->
|
|
<div :id="pieId" class="pie-chart-container"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: 'RoseChart',
|
|
props:{
|
|
pieId:{
|
|
type: String,
|
|
},
|
|
chartData:{
|
|
type:Object,
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
option: {}
|
|
}
|
|
},
|
|
methods: {
|
|
createData () {
|
|
const { randomExtend } = this
|
|
|
|
var myChart = echarts.init(document.getElementById(this.pieId));
|
|
this.option = {
|
|
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
left: this.$fontSize(0.2),
|
|
top:this.$fontSize(0.1),
|
|
itemWidth: this.$fontSize(0.25),
|
|
itemHeight: this.$fontSize(0.14),
|
|
// height: this.$fontSize(0.2),
|
|
textStyle:{
|
|
color:'fff',
|
|
fontSize:this.$fontSize(0.12)
|
|
},
|
|
|
|
},
|
|
series: [
|
|
{
|
|
name: '数据详情',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: this.chartData.data,
|
|
emphasis: {
|
|
textStyle: {
|
|
color: 'rgba(0,0,0,0)'
|
|
}
|
|
},
|
|
label: {
|
|
color: '#fff',
|
|
fontSize:this.$fontSize(0.12),
|
|
formatter: '{b}: {d}%'
|
|
|
|
},
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(this.option);
|
|
},
|
|
// randomExtend (minNum, maxNum) {
|
|
// if (arguments.length === 1) {
|
|
// return parseInt(Math.random() * minNum + 1, 10)
|
|
// } else {
|
|
// return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
|
// }
|
|
// }
|
|
},
|
|
mounted () {
|
|
const { createData } = this
|
|
|
|
createData()
|
|
|
|
// setInterval(createData, 100000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
#rose-chart {
|
|
// width: 33.33%;
|
|
// height: 55%;
|
|
background-color: rgba(6, 30, 93, 0.5);
|
|
border-top: 2px solid rgba(1, 153, 209, .5);
|
|
box-sizing: border-box;
|
|
|
|
.rose-chart-title {
|
|
height: 0.5rem;
|
|
font-weight: bold;
|
|
text-indent: 0.2rem;
|
|
font-size: 0.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.pie-chart-container {
|
|
height: calc(100% - 0.5rem);
|
|
}
|
|
}
|
|
</style>
|