HTML 数据可视化模板 echarts实现 |
您所在的位置：网站首页 › 天气统计图模板怎么做 › HTML 数据可视化模板 echarts实现 |
HTML 数据可视化模板 echarts实现
|
HTML 数据可视化模板 echarts实现
🍅 作者主页 央顺技术团队 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 文末获取源码联系方式 📝 🍅 查看下方微信号获取联系方式 承接各种定制系统 📝 🚀🚀🚀精彩系列推荐 Java毕设项目精品实战案例《1000套》 先看效果图 上代码 代码都写到html里面了 复制粘贴就能用 不用在动别的 html代码会比较长 最下面会讲解如何使用echarts 和一些修改设置echarts 如果只要模板可省略 DOCTYPE html> Title 历史发布信息 滚动文字111111111111111111111111111111111111111111111111111111111111111111111111111 滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字 七天完成任务数量 警报任务 执行任务 超时任务 七天新增老人数量 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); 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); 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); 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); 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); echarts如何使用首先是选择 echarts模板 百度搜索echarts Gallery 出来第一个 链接 echarts Gallery 点进去会发现很多小的模板 我们只需要挑选 几个需要的 然后拼凑在一起就行
引入完成js后 创建一个div块 取一个id名 并且设置div宽高 这里是必须设置如果不设置会显示不出来，这里设置id名称为main div id="main" style="width: 300px;height: 300px">之后创建script标签 并把网站上面给的代码复制进去 在script里面 创建echarts获取id方法 var myChart = echarts.init(document.getElementById('main'));并在代码的最后面加上 myChart.setOption(option);这两句分别在 这个main就是在div设置的id
有想加编程交流群的朋友可以加我微信 备注上csdn |
三个圆圈是动的 旁边是一个滚动条
之后随便点开一个 然后看模板给出的代码 是没法直接复制到html就使用的
如何使用这个模板 先导入js文件 我这里是直接网上引入
这个var myChart 
要和官网复制来的代码这里保证一致 
这个option 
要和这里保持一致 
之后运行起来看效果 
这个时候已经成功出来了 现在如何设置图形的大小呢 在js 里面 option方法里添加如下代码
这时已经添加上去 看效果 图形已经明显的变大 这里要注意的是echarts的大小会受限于div的宽高有时候调整了echarts的大小 但是还是没有变化 那么有可能div块的宽高限制了 
好了到这里如何使用echarts就结束了 最后贴上上图的全部代码 如果有疑问可以私聊
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |