echarts圆套圆
<template>
<div class="setPosition">
<div class="pie_warp">
<h2>{{title}}</h2>
<div id="myChart" v-if="dataSetArr"></div>
<p>
当日已处理单量:
<span>{{dealData.already}}</span> 件
</p>
<p>
当日预计剩余单量:
<span>{{dealData.untreated}}</span> 件
</p>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'pieCom',
props: {
title: {
// 标题
type: String,
default: '南宁转运中心'
},
dataSetArr: {
// echarts数据
type: Array,
default: () => {
return [
{
name: '名称1',
value: 20
},
{
name: '名称2',
value: 15
},
{
name: '名称3',
value: 50
},
{
name: '名称4',
value: 20
},
{
name: '名称5',
value: 20
}
]
}
},
dealData: {
type: Object,
default: () => {
return {
already: 178273,
untreated: 102342
}
}
}
},
data () {
return {
myChart: null,
currName: '',
colors: ['#0ECEFF', '#0566E8', '#F25C5D', '#F3961C', '#907AFF']
}
},
computed: {
themeColor () {
return this.$store.getters.themeColor
}
},
mounted () {
if (this.dataSetArr) {
this.drawPie()
}
},
methods: {
drawPie () {
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById('myChart'))
let myChart = this.myChart
myChart.on('mouseover', params => {
this.currName = params.name
let op = myChart.getOption()
if (params.seriesIndex === 0) {
let _label = {
normal: {
show: true,
position: 'center',
formatter: [`{b|${params.percent + '%'}}`].join('\n'),
rich: {
b: {
color: this.themeColor === 'light' ? 'blue' : '#fff',
fontSize: 12,
foneWeight: 'bold'
}
}
}
}
op.series[1].label = _label
myChart.setOption(op, true)
}
})
let itemCol = this.colors
let centerData = this._getCenterData()
let option = {
color: this.colors,
tooltip: {
show: true,
backgroundColor: 'rgba(3,43,80,0.7)',
textStyle: {
color: 'rgba(255,255,255,0.7)',
fontSize: 12
},
extraCssText: 'text-align:left',
formatter: function (params, m) {
let item = `<span style="display:inline-block;margin-right:3px;border-radius:10px;width:9px;height:9px;background-color:${
itemCol[params.dataIndex]
};"></span>`
let str = `${item} ${params.name} ${params.value}`
return str
}
},
series: [
{
name: 'pie',
type: 'pie',
hoverAnimation: true,
center: ['50%', '50%'], // 饼图的圆心坐标
radius: ['40%', '60%'], // 饼图大小
avoidLabelOverlap: true,
label: {
show: true,
position: 'outside',
formatter: function (params) {
let nm = params.name
return [`{a|${nm}}\n`]
},
rich: {
a: {
color: this.themeColor === 'light' ? '#333' : '#fff',
fontSize: 12,
lineHeight: 10
}
}
},
labelLine: {
normal: {
show: true,
length: 12,
length2: 8
}
},
data: this.dataSetArr
},
{
name: '内框',
type: 'pie',
hoverAnimation: false,
center: ['50%', '50%'], // 饼图的圆心坐标
radius: ['30%', '30%'], // 饼图大小
label: {
normal: {
show: true,
position: 'center',
formatter: [`{b|${centerData[0].value + '%'}}`].join('\n'),
rich: {
b: {
color: this.themeColor === 'light' ? 'blue' : '#fff',
fontSize: 12,
foneWeight: 'bold'
}
}
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
// color: "red",
borderWidth: 1,
borderColor: this.themeColor === 'light' ? '#fff' : '#0C1D38'
}
},
data: [
{
value: 100,
tooltip: {
show: false
}
}
]
}
]
}
myChart.setOption(option)
},
_getCenterData () {
let dtS = this._dySum()
if (this.currName !== '') {
return (
dtS &&
dtS.filter(item => {
return item.name === this.currName
})
)
} else {
return [dtS && dtS[0]]
}
},
_dySum () {
let dySum = 0
let arr = []
this.dataSetArr.map(item => {
dySum += Number(item.value)
})
this.dataSetArr &&
this.dataSetArr.map(item => {
let val = ((Number(item.value) / dySum) * 100).toFixed(0)
arr.push({
name: item.name,
value: val
})
})
return arr
},
setColor () {
this.myChart.setOption({
series: [
{
label: {
rich: {
a: {
color: this.themeColor === 'light' ? '#666' : '#fff'
}
}
}
},
{
label: {
rich: {
b: {
color: this.themeColor === 'light' ? 'blue' : '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: this.themeColor === 'light' ? '#fff' : '#0C1D38'
}
}
}
]
})
}
},
watch: {
themeColor (newVal) {
this.setColor()
}
}
}
</script>
<style lang="less" scoped>
.setPosition {
//这里改位置
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#myChart {
width: 234px;
height: 110px;
}
.themeRowLine (@bo,@txt1,@txt2) {
.pie_warp {
width: 234px;
height: auto;
position: relative;
top: 30px;
right: 0px;
background-color: @bo;
border: #ffd5d5d5 solid 1px;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
&::before {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
bottom: -16px;
right: 0;
left: 0;
margin: auto;
padding: 0;
border-bottom: 8px solid transparent;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
display: block;
content: "";
z-index: 12;
}
&::after {
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
bottom: -18px;
right: 0;
left: 0;
margin: auto;
padding: 0;
border-bottom: 9px solid transparent;
border-top: 9px solid #ffd5d5d5;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
display: block;
content: "";
z-index: 10;
}
h2 {
font-size: 14px;
color: @txt1;
font-weight: bold;
text-align: center;
padding-top: 9px;
padding-bottom: 9px;
}
p {
font-size: 14px;
color: @txt2;
font-weight: 400;
padding-bottom: 9px;
padding-left: 20px;
padding-right: 20px;
}
span {
color: #ff7a04;
display: inline-block;
max-width: 55px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
vertical-align: bottom;
}
}
}
.light {
.themeRowLine(@lpiebg, @txt3, @txt14);
}
.dark {
.themeRowLine(@dpiebg, @Dtxt6, @Dtxt6);
}
</style>
小凤凰newObject
