2023-03-26

Echart JS

字数统计: 776字 | 阅读时长: 3分

前端学习

本次学习了包含HTML JS Echarts的内容

如何实现跳转页面？

1	window.open(URL,name,specs,replace)

具体参考方法可以考虑网址
window.open()用法

js如何实现跳转页面的同时传值？

let params = {
"allnodes":data.cloudnodes,
"reachpaths":data.reachpaths
};
window["filter"] = params;

从原页面想要传输两个数据:allnodes 与 reachpaths
要从跳转后页面的数据，只需要以下情况

1
2
3

let receive = window.opener["filter"];
let allnodes = receive["allnodes"];
let reachpaths = receive["reachpaths"];

至此便可以实现从一个页面到另一个页面的传值
#注意："filter"是自定义的
具体参考方法:
window.opner()用法

用什么框架可以渲染矩阵？

目前我是采用Echarts中热力图来渲染矩阵
Echarts使用：
Echarts使用
Echarts实例：
Echarts实例

如何保证窗口变化时Echarts大小也随之调整？

当前页面只有一个图表

var myChart = echarts.init(document.getElementById('main'));
var option={title:{text:'ECharts 入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]};
myChart.setOption(option);
window.onresize = myChart.resize;

当前页面有多个图表

var myChart = echarts.init(document.getElementById('main'));
var myChartA = echarts.init(document.getElementById('mainA'));
var myChartB = echarts.init(document.getElementById('mainB'));
// 指定图表的配置项和数据
var option={title:{text:'ECharts 入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChartA.setOption(option);
myChartB.setOption(option);
window.addEventListener("resize",function (){
    myChart.resize();
    myChartA.resize();
    myChartB.resize();
});

参考文章：
Echarts实现随窗口变化而调整

如何使每次刷新页面，会使图表展现不同的颜色？

function getColor(num) {
  var colorList = [];
  for (var i = 0; i < num; i++) {
    colorList.push(randColor());
  }
  return colorList;
}
function showdetails(i){
  var elementById = document.getElementById(i);
  alert(elementById.getAttribute("value"));
}
function randColor() {
  return '#' +
          (function (color) {
            return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
            && (color.length == 6) ? color : arguments.callee(color);
          })('')
}

如何保证输入框中不能修改其内容数据？

添加代码readonly="readonly

1	tdBodys += `<td><input class="${i}x" id="${i}" type="text" value=${isReachnodes} style="border: none;text-align: center;color: #444444;color: #444444" readonly="readonly"></td>`;

如何通过input中id获得其对应的value值？

tdBodys += `<td><input class="${i}x" id="${i}" type="text" value=${isReachnodes} style="border: none;text-align: center;color: #444444;color: #444444" readonly="readonly"></td>`;   
tdBodys += `<td><button type="button" onclick="showdetails(${i})">展开</button></td>`;
  
function showdetails(i){
  var elementById = document.getElementById(i);
  alert(elementById.getAttribute("value"));
}