HTML 数据可视化模板 echarts实现
先看效果图
三个圆圈是动的 旁边是一个滚动条
上代码 代码都写到html里面了 复制粘贴就能用 不用在动别的 html代码会比较长
最下面会讲解如何使用echarts 和一些修改设置echarts 如果只要模板可省略
<!DOCTYPE html>
<html lang="en" style=" width: 100%;
height: 100%;
background-color: #010d3a;">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.5.0/echarts.min.js"></script>
<script type="text/javascript" src="./js/timeouttask.js"></script>
<body>
<!--滚动条div块-->
<font style="font-size: 142%; color: #47d8ff; position: relative; left: 1133px; top: 28px;" >历史发布信息</font>
<div style="position: relative;left:949px;top: 15px;width: 77px;height: 87px; color:#47d8ff">
<tbody>
<tr>
<td bgcolor="#f8f8e5" style="color: #010d3a">
<!--width 滚动条宽度 height 滚动条高度 -->
<marquee width="450" height="200" direction="down" hspace="40" vspace="40" scrollamount="3">滚动文字111111111111111111111111111111111111111111111111111111111111111111111111111 滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字</marquee>
</td>
</tr>
</tbody>
</div>
<!--完成任务七天数量div块-->
<div style="position: relative;left:949px;top: 15px;width: 77px;height: 87px;">
<div style="width: 260px">
<font style="font-size: 200%; position: relative; left: 50px; top: 175px;color:#47d8ff" >七天完成任务数量</font>
</div>
<!-- id就是js的getid var myChart = echarts.init(document.getElementById('main'));-->
<div id="main" style="position: absolute; left: -171px; top: 180px; width: 676px; height: 360px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></div>
</div>
<!--警报任务div块-->
<div>
<font style="font-size: 176%; position: relative; left: 86px; top: -181px;color: #47d8ff;color:#47d8ff" >警报任务</font>
<div id="AlertTaskJSs" style=" position: absolute;left:-109px;top: 23px;width: 516px;height: 274px;user-select: none;-webkit-tap-highlight-color: transparent;padding: 0px; margin: 0px; border-width: 0px;"></div>
</div>
<!--执行任务div块-->
<div>
<font style=" font-size: 176%; position: relative; left: 435px; top: -217px;color:#47d8ff" >执行任务</font>
<div id="ExecutetaskJS" style=" position: absolute;left: 240px; top: 22px;;width: 516px;height: 274px;user-select: none;-webkit-tap-highlight-color: transparent;padding: 0px; margin: 0px; border-width: 0px;"></div>
</div>
<!--超时任务div块-->
<div>
<font style="font-size: 176%;position: relative;left: 750px;top: -254px;color: #47d8ff;" >超时任务</font>
<div id="timeOutTaskJS" style="position: absolute;left: 555px; top: 22px;width: 516px;height: 274px;user-select: none;-webkit-tap-highlight-color: transparent;padding: 0px; margin: 0px; border-width: 0px;"></div>
</div>
<!--七天新增老人div块-->
<font style="font-size: 200%; position: relative; left: 237px; top: -5px;color:#47d8ff" >七天新增老人数量</font>
<div id="numberOfElderly" style="position: absolute;left: 89px; top: 371px; width: 586px; height: 305px;user-select: none;-webkit-tap-highlight-color: transparent;padding: 0px; margin: 0px; border-width: 0px;"></div>
</body>
<!--完成任务七天数量条形图js-->
<script>
var myChart = echarts.init(document.getElementById('main'));
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 20,
y: 10
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x - 9, shape.y - 9]
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
}
})
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 10,
y: 10
},
buildPath: function(ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c1 = [shape.x, shape.y]
const c2 = [xAxisPoint[0], xAxisPoint[1]]
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
const c4 = [shape.x + 18, shape.y - 9]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function(ctx, shape) {
const c1 = [shape.x, shape.y]
const c2 = [shape.x + 18, shape.y - 9]
const c3 = [shape.x + 9, shape.y - 18]
const c4 = [shape.x - 9, shape.y - 9]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [6000, 6000, 6000, 6000, 6000, 5000, 4000, 3000, 2000, 4000, 3000, 2000]
const VALUE = [2012, 1230, 3790, 2349, 1654, 1230, 3790, 2349, 1654, 3790, 2349, 1654]
option = {
// backgroundColor: "#010d3a",
title: {
text: '',
top: 32,
left: 18,
textStyle: {
color: '#00F6FF',
fontSize: 24
}
},
/*调整表格大小*/
grid: {
left: 0,
right: 0,
bottom: '6%',
top: 90,
containLabel: true
},
xAxis: {
type: 'category',
data: ['德州', '德城区', '陵城区', '禹城市', '乐陵市', '临邑县',
'平原县', '夏津县', '武城县', '庆云县', '宁津县', '齐河县'
],
axisLine: {
show: true,
lineStyle: {
color: 'white'
}
},
offset: 20,
axisTick: {
show: false,
length: 9,
alignWithLabel: true,
lineStyle: {
color: '#7DFFFD'
}
},
axisLabel: {
fontSize: 10
}
},
yAxis: {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: 'white'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16
},
boundaryGap: ['20%', '20%']
},
series: [{
type: 'custom',
renderItem: function(params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(7,29,97,.6)'
}
}, {
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(10,35,108,.7)'
}
}, {
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(11,42,106,.8)'
}
}]
}
},
data: MAX
}, {
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}, {
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}, {
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#3B80E2'
},
{
offset: 1,
color: '#49BEE5'
}
])
}
}]
}
},
data: VALUE
}, {
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
formatter: (e) => {
switch (e.name) {
case '10kV线路':
return VALUE[0]
case '公用配变':
return VALUE[1]
case '35kV主变':
return VALUE[2]
case '水':
}
},
fontSize: 16,
color: '#38ff9f',
offset: [4, -25]
}
},
itemStyle: {
color: 'transparent'
},
data: MAX
}]
}
myChart.setOption(option);
</script>
<!--警报任务js-->
<script>
var AlertTaskJS = echarts.init(document.getElementById('AlertTaskJSs'));
let angle = 1;//角度，用来做简单的动画效果的
let value = 1111;
optionOne = {
// backgroundColor:"#010d3a",
title: {
text: '{a|'+ value +'}{c|}',
x: 'center',
y: 'center',
textStyle: {
rich:{
a: {
fontSize: 48,
color: '#29EEF3'
},
c: {
fontSize: 20,
color: '#ffffff',
// padding: [5,0]
}
}
}
},
series: [ {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (0+angle) * Math.PI / 180,
endAngle: (90+angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (180+angle) * Math.PI / 180,
endAngle: (270+angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (270+-angle) * Math.PI / 180,
endAngle: (40+-angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (90+-angle) * Math.PI / 180,
endAngle: (220+-angle) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
},{
name: "ring5", //绿点
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (270+-angle))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB", //绿
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
type: 'pie',
radius: ['58%', '45%'],
silent: true,
clockwise: true,
startAngle: 90,
z: 0,
zlevel: 0,
label: {
normal: {
position: "center",
}
},
data: [{
value: value,
name: "",
itemStyle: {
normal: {
color: {
// 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#4FADFD' // 0% 处的颜色
}, {
offset: 1,
color: '#28E8FA' // 100% 处的颜色
}]
},
}
}
},
{
value: 100-value,
name: "",
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "#173164"
}
}
}
]
},
{
name: "",
type: "gauge",
radius: "58%",
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9,
splitNumber: 8,
hoverAnimation: true,
axisTick: {
show: false
},
splitLine: {
length: 60,
lineStyle: {
width: 5,
color: "#061740"
}
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
},
]
};
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
let x1 = x0 + r * Math.cos(angle* Math.PI / 180)
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
return {
x: x1,
y: y1
}
}
function draw(){
angle = angle+11
AlertTaskJS.setOption(optionOne, true)
//window.requestAnimationFrame(draw);
}
setInterval(function() {
//用setInterval做动画感觉有问题
draw()
}, 100);
AlertTaskJS.setOption(optionOne);
</script>
<!--执行任务js-->
<script>
var ExecutetaskJSS = echarts.init(document.getElementById('ExecutetaskJS'));
let angle1 = 0;//角度，用来做简单的动画效果的
let value1 = 222;
optionTwo = {
// backgroundColor:"#010d3a",
title: {
text: '{a|'+ value1 +'}{c|}',
x: 'center',
y: 'center',
textStyle: {
rich:{
a: {
fontSize: 48,
color: '#29EEF3'
},
c: {
fontSize: 20,
color: '#ffffff',
// padding: [5,0]
}
}
}
},
series: [ {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (0+angle1) * Math.PI / 180,
endAngle: (90+angle1) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (180+angle1) * Math.PI / 180,
endAngle: (270+angle1) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (270+-angle1) * Math.PI / 180,
endAngle: (40+-angle1) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (90+-angle1) * Math.PI / 180,
endAngle: (220+-angle1) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (90+-angle1))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB",//粉
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
name: "ring5", //绿点
type: 'custom',
coordinateSystem: "none",
renderItem: function(params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (270+-angle1))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB", //绿
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
type: 'pie',
radius: ['58%', '45%'],
silent: true,
clockwise: true,
startAngle: 90,
z: 0,
zlevel: 0,
label: {
normal: {
position: "center",
}
},
data: [{
value: value,
name: "",
itemStyle: {
normal: {
color: {
// 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#4FADFD' // 0% 处的颜色
}, {
offset: 1,
color: '#28E8FA' // 100% 处的颜色
}]
},
}
}
},
{
value: 100-value,
name: "",
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "#173164"
}
}
}
]
},
{
name: "",
type: "gauge",
radius: "58%",
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9,
splitNumber: 8,
hoverAnimation: true,
axisTick: {
show: false
},
splitLine: {
length: 60,
lineStyle: {
width: 5,
color: "#061740"
}
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
},
]
};
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle1) {
let x1 = x0 + r * Math.cos(angle1 * Math.PI / 180)
let y1 = y0 + r * Math.sin(angle1 * Math.PI / 180)
return {
x: x1,
y: y1
}
}
function draw1(){
angle1 = angle1+11
ExecutetaskJSS.setOption(optionTwo, true)
//window.requestAnimationFrame(draw);
}
setInterval(function() {
//用setInterval做动画感觉有问题
draw1()
}, 100);
ExecutetaskJSS.setOption(optionTwo);
</script>
<!--超时任务-->
<script>
var timeOutTask = echarts.init(document.getElementById('timeOutTaskJS'));
let angle2 = 0;//角度，用来做简单的动画效果的
let value2 = 12;
optionTask = {
// backgroundColor: "#010d3a",
title: {
text: '{a|' + value2 + '}{c|}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 48,
color: '#29EEF3'
},
c: {
fontSize: 20,
color: '#ffffff',
// padding: [5,0]
}
}
}
},
series: [{
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (0 + angle2) * Math.PI / 180,
endAngle: (90 + angle2) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
startAngle: (180 + angle2) * Math.PI / 180,
endAngle: (270 + angle2) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (270 + -angle2) * Math.PI / 180,
endAngle: (40 + -angle2) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
return {
type: 'arc',
shape: {
cx: api.getWidth() / 2,
cy: api.getHeight() / 2,
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
startAngle: (90 + -angle2) * Math.PI / 180,
endAngle: (220 + -angle2) * Math.PI / 180
},
style: {
stroke: "#0CD3DB",
fill: "transparent",
lineWidth: 1.5
},
silent: true
};
},
data: [0]
}, {
name: "ring5",
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (90 + -angle1))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB",//粉
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
name: "ring5", //绿点
type: 'custom',
coordinateSystem: "none",
renderItem: function (params, api) {
let x0 = api.getWidth() / 2;
let y0 = api.getHeight() / 2;
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
let point = getCirlPoint(x0, y0, r, (270 + -angle1))
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 4
},
style: {
stroke: "#0CD3DB", //绿
fill: "#0CD3DB"
},
silent: true
};
},
data: [0]
}, {
type: 'pie',
radius: ['58%', '45%'],
silent: true,
clockwise: true,
startAngle: 90,
z: 0,
zlevel: 0,
label: {
normal: {
position: "center",
}
},
data: [{
value: value,
name: "",
itemStyle: {
normal: {
color: {
// 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#4FADFD' // 0% 处的颜色
}, {
offset: 1,
color: '#28E8FA' // 100% 处的颜色
}]
},
}
}
},
{
value: 100 - value,
name: "",
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: "#173164"
}
}
}
]
},
{
name: "",
type: "gauge",
radius: "58%",
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9,
splitNumber: 8,
hoverAnimation: true,
axisTick: {
show: false
},
splitLine: {
length: 60,
lineStyle: {
width: 5,
color: "#061740"
}
},
axisLabel: {
show: false
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
},
]
};
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle1) {
let x1 = x0 + r * Math.cos(angle1 * Math.PI / 180)
let y1 = y0 + r * Math.sin(angle1 * Math.PI / 180)
return {
x: x1,
y: y1
}
}
function draw2() {
angle2 = angle2+11
timeOutTask.setOption(optionTask, true)
//window.requestAnimationFrame(draw);
}
setInterval(function () {
//用setInterval做动画感觉有问题
draw2()
}, 100);
timeOutTask.setOption(optionTask);
</script>
<!--七天新增老人数量js-->
<script>
var numberOfElderlyyu = echarts.init(document.getElementById('numberOfElderly'));
const data = [11, 182, 191, 234, 290, 330, 310]
const sideData = data.map(item => item + 4.5)
optiontasks = {
//设置canvas内部表格的内距
grid: {
left: 0,
right: 0,
bottom: '0%',
top: -5,
containLabel: true
},
backgroundColor: "#010d3a",
tooltip: {
trigger: 'axis',
formatter: "{b} : {c}",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: {
data: ['2020-01-11', '2020-01-11', '2020-01-11', '2020-01-11', '2020-01-11', '2020-01-11', '2020-01-11'],
//坐标轴
axisLine: {
lineStyle: {
color: '#3eb2e8'
}
},
//坐标值标注
axisLabel: {
show: true,
textStyle: {
color: '#fff',
}
}
},
yAxis: {
//坐标轴
axisLine: {
show: false
},
//坐标值标注
axisLabel: {
show: true,
textStyle: {
color: '#fff',
}
},
//分格线
splitLine: {
lineStyle: {
color: '#4784e8'
}
}
},
series: [{
name: 'a',
tooltip: {
show: false
},
type: 'bar',
barWidth: 24.5,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#0B4EC3" // 0% 处的颜色
}, {
offset: 0.6,
color: "#138CEB" // 60% 处的颜色
}, {
offset: 1,
color: "#17AAFE" // 100% 处的颜色
}], false)
}
},
data: data,
barGap: 0
}, {
type: 'bar',
barWidth: 4,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: "#09337C" // 0% 处的颜色
}, {
offset: 0.6,
color: "#0761C0" // 60% 处的颜色
}, {
offset: 1,
color: "#0575DE" // 100% 处的颜色
}], false)
}
},
barGap: 0,
data: sideData
}, {
name: 'b',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
borderWidth: 0,
borderColor: '#0571D5',
color: '#1779E0'
},
symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
symbolSize: ['30', '12'],
symbolOffset: ['0', '-11'],
//symbolRotate: -5,
symbolPosition: 'end',
data: data,
z: 3
}]
};
numberOfElderlyyu.setOption(optiontasks);
</script>
</html>
echarts如何使用
首先是选择 echarts模板 百度搜索echarts Gallery 出来第一个
链接 echarts Gallery
点进去会发现很多小的模板 我们只需要挑选 几个需要的 然后拼凑在一起就行
之后随便点开一个 然后看模板给出的代码 是没法直接复制到html就使用的
如何使用这个模板 先导入js文件 我这里是直接网上引入
<script src="https://cdn.staticfile.org/echarts/4.5.0/echarts.min.js"></script>
引入完成js后
创建一个div块
取一个id名 并且设置div宽高 这里是必须设置如果不设置会显示不出来，这里设置id名称为main
div id="main" style="width: 300px;height: 300px"></div>
之后创建script标签 并把网站上面给的代码复制进去
在script里面 创建echarts获取id方法
var myChart = echarts.init(document.getElementById('main'));
并在代码的最后面加上
myChart.setOption(option);
这两句分别在
这个main就是在div设置的id
这个var myChart
要和官网复制来的代码这里保证一致
这个option
要和这里保持一致
之后运行起来看效果
这个时候已经成功出来了 现在如何设置图形的大小呢
在js 里面 option方法里添加如下代码
/*调整表格大小*/
grid: {
left: 0,
right: 0,
bottom: '6%',
top: 90,
containLabel: true
},
这时已经添加上去 看效果 图形已经明显的变大 这里要注意的是echarts的大小会受限于div的宽高有时候调整了echarts的大小 但是还是没有变化 那么有可能div块的宽高限制了
好了到这里如何使用echarts就结束了 最后贴上上图的全部代码
如果有疑问可以私聊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/echarts/4.5.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 659px; height: 473px;"></div>
</body>
<script>
var myChart = echarts.init(document.getElementById('main'));
let value = 65.23;
let title = 'vision';
let int = value.toFixed(2).split('.')[0];
let float = value.toFixed(2).split('.')[1];
option = {
/*调整表格大小*/
grid: {
left: 100,
right: 100,
bottom: '0%',
top: 10,
containLabel: true
},
backgroundColor: '#020f18',
title: {
text: '{a|' + int + '}{b|.' + float + '}\n{c|' + title + '}',
x: 'center',
y: 'center',
textStyle: {
rich: {
a: {
fontSize: 48,
color: '#fff',
fontWeight: '600',
},
b: {
fontSize: 20,
color: '#fff',
padding: [0, 0, 14, 0]
},
c: {
fontSize: 20,
color: '#fff',
padding: [5, 0]
}
}
}
},
series: [{
type: 'gauge',
radius: '60%',
clockwise: false,
startAngle: '90',
endAngle: '-269.9999',
splitNumber: 30,
detail: {
offsetCenter: [0, -20],
formatter: ' '
},
pointer: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: [
[0, '#2CFAFC'],
[36.7 / 100, '#0ff'],
[1, '#0f232e']
],
width: 20
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 100,
lineStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0, 255, 255, 1)',
shadowOffsetY: '0',
color: '#020f18',
width: 2
}
},
axisLabel: {
show: false
}
},
{
type: 'pie',
radius: ['44%', '45%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
color: '#0C355E'
}
},
label: {
show: false
},
data: _dashed()
},
{
type: 'pie',
radius: [0, '30%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: '#000',
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#0FF',
}, {
offset: 1,
color: '#060f20'
}])
}
},
label: {
show: false
},
data: [100]
},
{
type: 'pie',
radius: ['64%', '65.5%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: 'rgba(0, 255, 255,.3)',
color: '#0f232e'
}
},
label: {
show: false
},
data: [100]
},
{
type: 'pie',
radius: ['68%', '69.5%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: 'rgba(0, 255, 255,.3)',
color: 'rgba(15, 35, 46,.6)',
}
},
label: {
show: false
},
data: [100]
},
]
};
function _dashed() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgb(0,255,255,.3)',
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgb(0,0,0,0)',
borderWidth: 1,
borderColor: "rgba(0,255,255,1)"
}
}
})
}
}
return dataArr
}
function doing() {
let option = myChart.getOption();
option.series[1].startAngle = option.series[1].startAngle - 1;
myChart.setOption(option);
}
function startTimer() {
timer = setInterval(doing, 100);
}
setTimeout(startTimer, 0);
myChart.setOption(option);
</script>
</html>