<div class="lplkl-outer-radio">
<div class="lplkl-outer-radio1">
<div class="lplkl-outer-radio2">
<div class="lplkl-outer-text">{{ 0}}%</div>
</div>
</div>
<div id="gendi-charts"></div>
</div>
#ym_gendi .lplkl-outer-radio {
width: 368px;
height: 368px;
background-image: url('../../../../static/BI/bg_outer_ring@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#ym_gendi .lplkl-outer-radio1 {
width: 239px;
height: 239px;
background-image: url('../../../../static/BI/icon_inner_ring_1@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
#ym_gendi .lplkl-outer-radio2 {
width: 150px;
height: 150px;
background-image: url('../../../../static/BI/icon_inner_ring_2@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
#ym_gendi .lplkl-outer-text {
font-size: 24px;
font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
font-weight: 600;
color: #32F2FF;
}
getChart () {
var _this = this
var bar = document.getElementById('radio-charts');
var barDom = new_echarts.init(bar);
let option;
option = {
polar: {
radius: ['88%', '100%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
barWidth: 100,
showBackground: true,
backgroundStyle: {
color: 'transparent',
},
data: [_this.data1&&_this.data1.increase || 0],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new new_echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#01E4F5'
}, {
offset: 1,
color: '#E59BEF'
}]),
}
}
}
]
};
barDom.setOption(option, true);
barDom.resize();
window.addEventListener('resize', function () {
barDom.resize();
});
// 监听dom变化，自适应echarts
let chartObserver = new ResizeObserver(() => {
barDom.resize();
});
chartObserver.observe(barDom.getDom());
},
xsspChart (response) {
var _this = this;
let option;
if (response.length > 0) {
this.barShow = true;
let xAxisData = [];
// series数据
let barDataOne = [];
let barDataTwo = [];
let barDataThree = [];
response.forEach((val) => {
xAxisData.push(val.name);
barDataOne.push(val.last_value);
barDataTwo.push(val.this_value);
barDataThree.push(val.increase);
});
var bar = document.getElementById('bar-charts');
var barDom = Echarts.init(bar);
// y轴相同的配置数据
let xyOptions = {
// 坐标轴轴线相关设置
axisLine: {
show: false,
lineStyle: {}
},
// 坐标轴刻度相关设置
axisTick: {
show: false
},
// 设置y轴数据的颜色
axisLabel: {
color: '#cde3ff'
},
// 设置图线背景色
splitLine: {
lineStyle: {
// 线的颜色
color: '#cde3ff', // F2F4F7
// 线的类型
// type: 'dotted',
// 设置线的 dash array
type: [3, 3],
dashOffset: 3
}
}
};
option = {
tooltip: {
trigger: 'axis',
backgroundColor: 'transparent', // 修改背景颜色
borderColor: 'transparent',
axisPointer: {
type: 'shadow'
},
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontFamily: 'Source Han Sans CN-Regular',
fontSize: 14,
fontWeight: 400
},
formatter: function (val) {
const tip =
`<div class='custom-tooltip-style'>
<div class='custom-tooltip-title'>${val[0].name}</div>
<div class='custom-tooltip-cntent'>
<div class="ym-dialog-screen--echart-tooltip0"></div>
<div class='custom-tooltip-space'>
<div class='custom-tooltip-text'>${val[0].seriesName}</div>
<div class='custom-tooltip-num'>${val[0].value}</div>
</div>
</div>
<div class='custom-tooltip-cntent'>
<div class="ym-dialog-screen--echart-tooltip1"></div>
<div class='custom-tooltip-space'>
<div class='custom-tooltip-text'>${val[1].seriesName}</div>
<div class='custom-tooltip-num'>${val[1].value}</div>
</div>
</div>
<div class='custom-tooltip-cntent'>
<div class="ym-dialog-screen--echart-tooltip2"></div>
<div class='custom-tooltip-space'>
<div class='custom-tooltip-text'>${val[2].seriesName}</div>
<div class='custom-tooltip-num'>${val[2].value}</div>
</div>
</div>
</div>`;
return tip;
}
},
toolbox: {},
legend: {
// right: 0,
orient: 'horizontal',
top: 0,
// 图例标记的图形宽高
itemWidth: 20,
itemHeight: 10,
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 8,
textStyle: {
color: '#cde3ff',
fontSize: 16
}
// data: ['计划任务', '完成面积', '采伐证办理', '完成率(%)']
// data: ['完成采伐面积', '完成造林面积']
},
grid: {
// 让图表占满容器
right: '48px',
left: '48px'
},
xAxis: [
{
type: 'category',
data: xAxisData,
axisPointer: {
type: 'shadow'
},
// x坐标轴轴线相关设置
axisLine: {
lineStyle: {
color: '#ccc'
}
},
// x轴是否展示刻度
axisTick: {
show: false
},
// x轴刻度标签的相关设置
axisLabel: {
// color: '#5e96b1',
color: '#cde3ff',
fontSize: 16, // 设置x轴字体的大小
interval: 0, // 横轴信息全部显示
rotate: 0 // -30度角倾斜显示
}
}
],
yAxis: [
{
// 设置y轴标题
name: '万元',
// 坐标轴名称显示位置 - 'start' 'middle' 或者 'center' 'end'
nameLocation: 'end',
// 坐标轴名称与轴线之间的距离。
nameGap: 35,
boundaryGap: [0, 0.01],
// 设置y轴标题样式
nameTextStyle: {
color: '#cde3ff',
// 上右下左与原位置距离
padding: [0, 0, 0, -20],
fontSize: 16
},
type: 'value',
...xyOptions
},
{
type: 'value',
// 设置y轴标题
name: '%',
// 坐标轴名称显示位置 - 'start' 'middle' 或者 'center' 'end'
// nameLocation: 'end',
// position:'right',
// 坐标轴名称与轴线之间的距离。
nameGap: 35,
boundaryGap: [0, 0.01],
// 设置y轴标题样式
nameTextStyle: {
color: '#cde3ff',
// 上右下左与原位置距离
// padding: [0, 0, 0, -25]
fontSize: 16
},
// 设置y轴线样式
axisLine: {
show: false,
lineStyle: {}
},
axisTick: {
show: false
},
// 设置y轴数据的颜色
axisLabel: {
color: '#cde3ff',
show: true
},
// 设置图线背景色
splitLine: {
show: false,
lineStyle: {
// 线的颜色
color: '#5e96b1', // F2F4F7
// 线的类型
// type: 'dotted',
// 设置线的 dash array
type: [3, 3],
dashOffset: 3
}
}
}
],
series: [
{
name: this.last_year_desc,
type: 'bar',
// 柱状图的宽度
barWidth: 42,
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#FFFFFF',
fontSize: 16
}
// formatter: '{c} %'
},
tooltip: {},
itemStyle: {
// 柱体渐变色
color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#048EFD'
},
{
offset: 1,
color: '#00F8FF'
}
]),
// 设置柱状图圆角
barBorderRadius: [0, 0, 0, 0]
},
data: barDataOne // [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{
name: this.this_year_desc,
type: 'bar',
// 柱状图的宽度
barWidth: 42,
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#FFFFFF',
fontSize: 16
}
// formatter: '{c} %'
},
itemStyle: {
// 柱体渐变色
color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#E69BEF'
},
{
offset: 1,
color: '#AB6EB8'
}
]),
// 设置柱状图圆角
barBorderRadius: [0, 0, 0, 0]
},
tooltip: {},
// 颜色设置
// itemStyle: {
// color: '#F8AF20'
// },
data: barDataTwo // [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6 ]
},
{
name: '增幅（%）',
data: barDataThree,
stack: null,
yAxisIndex: 1,
// 在柱状图顶部展示数据 - 设置图形上的文本标签
label: {
// show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#FFFFFF',
fontSize: 16
},
formatter: '{c} %'
},
hoverAnimation: false,
type: 'scatter',
symbol: 'circle', //拐点样式
// smooth: true, // 设置基础平滑的连接线
symbolSize: 10, //设定实心点的大小
itemStyle: {
color: '#FFA800',
borderColor: '#FFFFFF',
borderWidth: 2
}
}
]
};
barDom.setOption(option, true);
barDom.resize();
window.addEventListener('resize', function () {
barDom.resize();
});
// 监听dom变化，自适应echarts
let chartObserver = new ResizeObserver(() => {
barDom.resize();
});
chartObserver.observe(barDom.getDom());
} else {
this.barShow = false;
}
},
#lplkl_dialog_container {
width: 100%;
padding: 24px;
}
#lplkl_dialog_container .all-height {
height: 100%;
}
#lplkl_dialog_container .lplkl-part-background {
background: rgba(32, 54, 88, 0.45);
height: 100%;
}
#lplkl_dialog_container .lplkl-top-content {
display: flex;
height: 45px;
align-items: center;
padding-left: 24px;
}
#lplkl_dialog_container .lplkl-top-icon {
width: 4px;
height: 20px;
background: #1CE3F7;
}
#lplkl_dialog_container .lplkl-top-text {
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
margin-left: 8px;
}
#lplkl_dialog_container .lplkl-bottom-content {
height: calc(100% - 45px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#lplkl_dialog_container .lplkl-bottom-text {
font-size: 16px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
display: flex;
}
#lplkl_dialog_container .lplkl-marb-16 {
margin-bottom: 16px;
}
#lplkl_dialog_container .lplkl-marb-24 {
margin-bottom: 24px;
}
#lplkl_dialog_container .color-big-text {
font-size: 24px;
font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
font-weight: 600;
color: #00EAFF;
margin: 0 12px;
}
#lplkl_dialog_container .lplkl-outer-radio {
width: 368px;
height: 368px;
background-image: url('../../../../static/BI/bg_outer_ring@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#lplkl_dialog_container .lplkl-outer-radio1 {
width: 239px;
height: 239px;
background-image: url('../../../../static/BI/icon_inner_ring_1@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
#lplkl_dialog_container .lplkl-outer-radio2 {
width: 150px;
height: 150px;
background-image: url('../../../../static/BI/icon_inner_ring_2@2x.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
#lplkl_dialog_container .lplkl-outer-text {
font-size: 24px;
font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
font-weight: 600;
color: #32F2FF;
}
#lplkl_dialog_container .lplkl-outer-line {
width: 250px;
height: 250px;
}
#lplkl_dialog_container .lplkl-outer-bar {
width: 100%;
height: 50%;
margin: 0 24px;
}
#lplkl_dialog_container .xssp_empty-text {
width: 100%;
margin: 20px 14px 0 0;
color: white;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-size: 18px;
}
#lplkl_dialog_container .xssp_empty-text::before {
display: block;
width: 185px;
height: 183px;
margin: auto;
content: '';
background-image: url('../../../../static/BI/容器 1455@2x.png');
background-size: 100% 100%;
}
#lplkl_dialog_container .ym-dialog-screen--echart-tooltip0 {
display: inline-block;
width: 10px;
height: 10px;
opacity: 1;
border-radius: 50%;
background: linear-gradient(90deg, #0DF1F7 0%, #048EFD 100%);
}
#lplkl_dialog_container .ym-dialog-screen--echart-tooltip1 {
display: inline-block;
width: 10px;
height: 10px;
opacity: 1;
border-radius: 50%;
background: linear-gradient(90deg, #E69BEF 0%, #AB6EB8 100%);
}
#lplkl_dialog_container .ym-dialog-screen--echart-tooltip2 {
display: inline-block;
width: 10px;
height: 10px;
opacity: 1;
border-radius: 50%;
background: #FFA800;
}
#lplkl_dialog_container .custom-tooltip-style {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
padding: 12px;
border: 1px solid #017EFB;
border-radius: 4px 4px 4px 4px;
background: rgba(21, 49, 91, 0.8);
box-shadow: inset 0px 0px 11px 0px #00579F;
}
#lplkl_dialog_container .custom-tooltip-cntent {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
#lplkl_dialog_container .custom-tooltip-title {
color: #CDE3FF;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-size: 16px;
font-weight: 400;
}
#lplkl_dialog_container .custom-tooltip-text {
margin-right: 16px;
margin-left: 8px;
color: #CDE3FF;
font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
font-size: 16px;
font-weight: 400;
}
#lplkl_dialog_container .custom-tooltip-num {
color: #00EAFF;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.custom-tooltip-space {
display: flex;
justify-content: space-between;
width: 100%;
}
3453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
