echarts饼状图中间实现层叠阴影效果,饼状图之间边线分割
/**
* @Author: 858834013@qq.com
* @Name: tiaozhafenxi
* @Date: 2022-07-19
* @Desc: 跳闸
*/
<template>
<div class="importantDocuments">
<div class="title">一跳闸，一分析</div>
<div class="quezhenry">
<div class="quezhenryl">
<tiaozhafenxi></tiaozhafenxi>
</div>
<div class="quezhenryr">
<div class="quezhenryr_item">
<div class="quezhenryr_item_l">
<span></span>域网线路
</div>
<div class="quezhenryr_item_r">
22
</div>
</div>
<div class="quezhenryr_item">
<div class="quezhenryr_item_l">
<span></span>农网线路
</div>
<div class="quezhenryr_item_r">
15
</div>
</div>
<div class="quezhenryr_item">
<div class="quezhenryr_item_l">
<span></span>用户专线
</div>
<div class="quezhenryr_item_r">
51
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import tiaozhafenxi from "@/views/newPage/home/tiaozhafenxi/index";
export default {
name: "news",
components: {tiaozhafenxi},
props: {
id: {
type: String,
default() {
return '';
}
}
},
data() {
return {}
},
watch: {},
mounted() {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.importantDocuments {
width: 100%;
height: 324px;
background: #FFFFFF;
border-radius: 20px;
.title {
font-size: 18px;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #333333;
height: 55px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
padding-left: 20px;
}
.newsList {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
padding-left: 20px;
padding-right: 20px;
height: 270px;
}
}
.quezhenry {
width: 100%;
position: relative;
height: calc(100% - 50px);
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.quezhenryl {
width: 250px;
height: 250px;
position: relative;
display: flex;
margin-left: 20px;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.quezhenrylx {
position: relative;
width: 100%;
height: 100%;
}
}
.quezhenryr {
width: calc(40% - 100px);
height: 100%;
margin-right: 0px;
margin-left: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
.quezhenryr_item {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
width: 100%;
height: 50px;
.quezhenryr_item_l {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(102, 102, 102, 1);
span {
width: 10px;
height: 10px;
background: #4e9ac1;
display: flex;
border-radius: 4px;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
margin-right: 11px;
}
}
.quezhenryr_item_r {
font-size: 16px;
font-family: DIN;
font-weight: 500;
color: #333333;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
}
.quezhenryr_item:nth-child(2) {
.quezhenryr_item_l {
span {
background: #2bd1b1;
}
}
}
.quezhenryr_item:nth-child(3) {
.quezhenryr_item_l {
span {
background: #f9ac0c;
}
}
}
}
}
</style>
echarts
<template>
<div class="echarts">
<div class="echarts1" ref="echarts1">
</div>
</div>
</template>
<script>
export default {
name: 'echarts1',
components: {},
data() {
return {}
},
mounted() {
this.drawLine()
},
computed: {
colorList: function () {
var list = ['#f9ac0c', '#4e9ac1', '#2bd1b1']
var colorList = []
list.forEach((type) => {
var color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: type.start
},
{
offset: 1,
color: type.end
}
])
colorList.push(color)
});
return list
}
},
methods: {
drawLine() {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts1)
var colors = this.colorList
var data =
[
{
name: '用户专线',
value: 40
},
{
name: '农用网络',
value: 30
},
{
name: '域网线路',
value: 45
}
]
var option = {
color: colors,
title: {
top: '45%',
z: 11,
x: '37%',
text: '跳闸分析',
textStyle: {
fontSize: 14,
color: 'rgba(51, 51, 51, 1)',
},
},
tooltip: {
trigger: 'item',
formatter: '{a} {b} : {c} ({d}%)'
},
series: [
{
name: '一跳闸，一分析',
type: 'pie',
radius: ['45%', '80%'],
center: ['50%', '50%'],
itemStyle: {
normal: {
borderColor: '#fbfcfd',
borderWidth: 3
}
},
label: {
show: false,
normal: {
show: false,
position: 'outside',
fontSize: 14,
color: '#333',
formatter: (params) => {
return params.name
}
}
},
labelLine: {
length: 10,
length2: 30
},
data: data
},
{ //内圆
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
z: 10,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0.1)',
label: {
show: false
},
labelLine: {
show: false
}
},
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false
},
data: [100],
},
{ //内圆
type: 'pie',
radius: '45%',
center: ['50%', '50%'],
z: 10,
itemStyle: {
normal: {
color: '#f8f9fa',
label: {
show: false
},
labelLine: {
show: false
}
},
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false
},
data: [100],
},
{ //内圆
type: 'pie',
radius: '35%',
center: ['50%', '50%'],
z: 10,
itemStyle: {
normal: {
color: '#ffffff',
label: {
show: false
},
labelLine: {
show: false
}
},
},
hoverAnimation: false,
label: {
show: false,
},
tooltip: {
show: false
},
data: [100],
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: calc(100% - 0px);
height: calc(100% - 0px);
}
.echarts {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
width: 100%;
position: relative;
height: calc(100% - 0px);
.img {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
width: 100%;
height: 100%;
}
}
</style>
