TmrApp/html/test.html

183 lines
4.7 KiB
HTML
Raw Permalink Normal View History

2023-09-12 14:50:52 +08:00
<!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>