HTML 数据可视化模板 echarts实现
2024-04-11 10:49:29
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.xAxisPointconst 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.xAxisPointconst 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+11AlertTaskJS.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+11ExecutetaskJSS.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+11timeOutTask.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>
有想加编程交流群的朋友可以加我微信 备注上csdn
HTML 数据可视化模板 echarts实现相关推荐
- 视频教程-跟风舞烟学大数据可视化－Echarts从入门到上手实战-JavaScript
跟风舞烟学大数据可视化-Echarts从入门到上手实战 网名风舞烟,中国科技大学计算机专业.微软认证讲师(MCE).微软数据分析讲师.10多年软件行业从业经验,参与过数百万的企业级ERP系统,在大数据 ...
- 大数据可视化模板、模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、联勤治理、旅游、运输、车辆、校园、舆情、信息监测看板原型
大数据可视化模板.模板框架.动态控件.可视化大数据原型.监控平台.图表元件库.数据看板.驾驶舱.统计图表.大数据驾驶舱.大屏展示.智慧安防.党建.旅游.运输.医疗.校园.工业园区环境监测看板原型 适用 ...
- 可视化框架、Axure原型、大屏可视化、图表组件、图表元件库、统计图表、数据可视化模板、条形图、折线图、散点图、时间轴、仪表盘、饼图、散点图、雷达图、高山图、登录模板、弹窗、弹幕、预警、散点图
可视化框架.数据可视化综合管理平台.大屏可视化.图表组件.图表元件库.统计图表.数据可视化模板.条形图.折线图.散点图.时间轴.仪表盘.饼图.散点图.雷达图.高山图.登录模板.弹窗.弹幕.预警.散点图 ...
- 从数据可视化模板，到数据分析方案，都整理给你了！
数据可视化分析人才一时半会招不到,就没办法做出好看又实用的数据可视化分析了吗?当然不是!从数据可视化模板到专业分析方案,这里都为你准备好了,拿来就能用,足够做一个专业智能的企业级数据可视化分析平台了. ...
- 大数据可视化模板、模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、智慧安防、党建、旅游、运输、医疗、校园、工业园区环境监测看板原型
大数据可视化模板.模板框架.动态控件.可视化大数据原型.监控平台.图表元件库.数据看板.驾驶舱.统计图表.大数据驾驶舱.大屏展示.智慧安防.党建.旅游.运输.医疗.校园.工业园区环境监测看板原型 适用 ...
- 数据可视化图表ECharts视频教程
数据可视化图表ECharts
- 数据可视化模板_10分钟，做一份数据可视化分析报表
做一份涵盖内容多.涉及数据量大的数据可视化分析报表要多久?10分钟够吗?如果奥威BI系列的分析软件会说话,恐怕要吐槽10分钟太多,5分钟足够.不说别的,论做智能数据可视化分析报表的效率,奥威BI系列软 ...
- 数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...
- vue echarts div变化_数据可视化之echarts在Vue中的使用
数据可视化的本质是将数据通过各种视觉通道映射成图形,可以使得用户更快.更准确的理解数据. 一.为什么选择echarts: 简单上手容易 满足绝大部分的开发需要 在可视化库中有较好的体验和口碑 二.在V ...
- 数据可视化（Echarts、antv）
A.Echarts a.安装:npm i echarts@4.9.0 b.在main.js中配置: import * as echarts from 'echarts' Vue.prototype.e ...
最新文章
- 内存泄漏排查攻略之：Show me your Memory
- java中字符串分割器_java简易文本分割器实现代码
- 屏蔽敏感词的正则表达式
- JQuery选择器——基本筛选选择器和内容筛选选择器
- c语言输入与输出库函数#includestdio.h
- curl的安装与简单使用
- JavaScript-概述
- 【重识 HTML + CSS】项目实战
- docker java 中文乱码_java使用awt包在生产环境docker部署时出现中文乱码的处理
- 财务审计工具箱 audtool 数据处理分析必备工具
- 百度硬盘搜索结盟IBM，Lotus邮件也能搜索
- mysql front和mysql_安装 MySQL 和 MySQL-Front
- 公司项目上线正规流程
- python使用二分搜索求log以2为底10的近似值
- 英文书籍下载网站统计(进行中)
- android 5.0 n,EMUI 5.0遭泄漏 基于Android N制作！华为P9用户有福啦
- 数据分析|基础概念/excel/tableau自学笔记
- SharePoint2013简单部署
- 分布式系统相关书籍pdf免费下载
- nagios二次开发（四）---nagios监控原理和nagios架构简介