Echarts前端学习

最新推荐文章于 2024-09-22 22:43:34 发布

Paul George

最新推荐文章于 2024-09-22 22:43:34 发布

阅读量310

点赞数

文章标签： echarts 前端学习

本文链接：https://blog.csdn.net/weixin_43955915/article/details/128062376

版权

前端学习

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

如何实现跳转页面？

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

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

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

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

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

    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

    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"));
  }