183 lines
4.7 KiB
HTML
183 lines
4.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||
|
|
<title>Document</title>
|
||
|
|
<script src="../script/4.9.0/echarts.min.js"></script>
|
||
|
|
<script src="../script/4.9.0/echarts-liquidfill.min.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
.echarts_wrap {
|
||
|
|
width: 100%;
|
||
|
|
height: 67vh;
|
||
|
|
margin-top: 9vh;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echarts_item {
|
||
|
|
width: 35%;
|
||
|
|
height: 70vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.echarts_item1 {
|
||
|
|
width: 30%;
|
||
|
|
height: 70v;
|
||
|
|
font-size: medium;
|
||
|
|
font-weight: 900;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="echarts_wrap">
|
||
|
|
<div class="echarts_item" id="echarts_main_one"></div>
|
||
|
|
<div class="echarts_item" id="echarts_main_two"></div>
|
||
|
|
</div>
|
||
|
|
</html>
|
||
|
|
<script>
|
||
|
|
// 初始化echarts Dom
|
||
|
|
var weightChartDom = document.getElementById('echarts_main_two');
|
||
|
|
var weightMyChart = echarts.init(weightChartDom);
|
||
|
|
var feedChartDom = document.getElementById('echarts_main_one');
|
||
|
|
var feedMyChart = echarts.init(feedChartDom);
|
||
|
|
var value = 0.45;
|
||
|
|
var value1 = 0.76;
|
||
|
|
var data = [value, value1];
|
||
|
|
var option = {
|
||
|
|
backgroundColor: '#0F224C',
|
||
|
|
title: [
|
||
|
|
{
|
||
|
|
text: '本年收缴率',
|
||
|
|
x: '22%',
|
||
|
|
y: '70%',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: '100',
|
||
|
|
color: '#5dc3ea',
|
||
|
|
lineHeight: 16,
|
||
|
|
textAlign: 'center',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: '本月收缴率',
|
||
|
|
x: '73%',
|
||
|
|
y: '70%',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: '100',
|
||
|
|
color: '#5dc3ea',
|
||
|
|
lineHeight: 16,
|
||
|
|
textAlign: 'center',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'liquidFill',
|
||
|
|
radius: '47%',
|
||
|
|
center: ['25%', '45%'],
|
||
|
|
color: [
|
||
|
|
{
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#446bf5',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#2ca3e2',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
globalCoord: false,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
data: [value, value], // data个数代表波浪数
|
||
|
|
backgroundStyle: {
|
||
|
|
borderWidth: 1,
|
||
|
|
color: 'RGBA(51, 66, 127, 0.7)',
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 28,
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
outline: {
|
||
|
|
// show: false
|
||
|
|
borderDistance: 0,
|
||
|
|
itemStyle: {
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: '#112165',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
{ //第二个球的填充
|
||
|
|
type: 'liquidFill',
|
||
|
|
radius: '47%',
|
||
|
|
center: ['75%', '45%'],
|
||
|
|
color: [
|
||
|
|
{
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#2aa1e3',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#08bbc9',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
globalCoord: false,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
data: [value1, value1], // data个数代表波浪数
|
||
|
|
backgroundStyle: {
|
||
|
|
borderWidth: 1,
|
||
|
|
color: 'RGBA(51, 66, 127, 0.7)',
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 28,
|
||
|
|
color: '#fff',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
outline: {
|
||
|
|
// show: false
|
||
|
|
borderDistance: 0,
|
||
|
|
itemStyle: {
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: '#112165',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
// option && weightMyChart.setOption(option);
|
||
|
|
|
||
|
|
setInterval(() => {
|
||
|
|
value = 0.666
|
||
|
|
value1 =0.666
|
||
|
|
option.series[0].data = [value,value]
|
||
|
|
option.series[1].data = [value1,value1]
|
||
|
|
option && weightMyChart.setOption(option);
|
||
|
|
}, 5000);
|
||
|
|
</script>
|