HTML 数据可视化模板 echarts实现

it2025-11-03 3

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>  <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>  <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">  <marquee width="450" height="200" direction="down" hspace="40" vspace="40" scrollamount="3">滚动文字111111111111111111111111111111111111111111111111111111111111111111111111111 滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字</marquee> </td> </tr> </tbody> </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>  <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> <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> <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> <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>  <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>  <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>  <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>  <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>  <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文件我这里是直接网上引入

引入完成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>

最新回复(0)