echart图表初始化重置等管理盒子效果代码
代码语言:html
所属分类:图表
代码描述:echart图表初始化重置等管理盒子效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #000; } div.eb { width: 300px; height: 30vh; border: 1px solid #ccff00; float: left; margin-left: 1%; } </style> </head> <body> <div class="eb" id="div1"></div> <div class="eb" id="div2"></div> <div class="eb" id="div3"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script> <script > var $eo = { getLengend1: function (data) { return { show: true, top: '5%', itemWidth: 10, itemHeight: 10, right: '1%', orient: 'horizontal', textStyle: { color: '#d5d5d5', fontSize: 14 }, data: data }; }, getXAxis1: function (data) { return { type: 'category', data: data, axisLine: { lineStyle: { color: "#244163" } }, axisLabel: { // rotate: 30, // interval: 0, color: "#dbe1de" }, axisTick: { show: false, } } }, getYAxis1: function (name, obj) { var o = { type: 'value', name: name, nameTextStyle: { color: "#8c908e" }, nameGap: 10, axisLabel: { color: "#b7bcb9" }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { lineStyle: { color: "#343434", type: "dashed" } } }; if (obj) { for (var k in obj) { o[k] = obj[k]; } } return o; } }; $eo.rowBars = function (param) { var label = { show: true, position: "right", color: "#fff", fontSize: 14, formatter: function (o) { return o.value + param.unit; } }; var series = []; var color = []; param.legendData.forEach(function (value, i) { series.push({ name: value, type: 'bar', label: label, barMaxWidth: "40%", data: param.seriesData[i] }); color.push({ type: 'linear', x: 0, y: 0.5, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0