Echarts自定义图表显隐开关

  1. 插入折线
    // 插入折线
    function appendLineToChart(name, data, zeroData) {
        var line = {
            name: name,
            type: 'line',
            xAxisIndex: 0,
            smooth: false,
            connectNulls: true,
            data: data,
            markLine: {
                lineStyle: {
                    type: 'dashed'
                },
                data: zeroData
            }
        }
        option.series.push(line);
        chart.setOption(option);
    }

     

  2. 清除折线
    function removeLineFromChart(name) {
        var index = -1;
        for (var i = 0; i < option.series.length; i++) {
            if (option.series[i].name == name) {
                index = i;
                break;
            }
        }
    
        if (index > -1) {
            option.series.splice(index, 1);
            chart.setOption(option, true);  // 设置option不合并(覆盖)
        }
    }

     

  3. 对于其中的交互和传值可以动态的去创建对象
    function parseSkData(skData, dataInfo) {
    
        var skTime = dataInfo.time;
        var skAgingType = dataInfo.skAgingType;
        var fileName = getSKFileName(skTime, skAgingType);
    
        data = skData["stationDataList"];
    
        var Station = {};
    
        Station[fileName + ':tmp'] = new Array();
        Station[fileName + ':dp'] = new Array();
        Station[fileName + ':tmp_zero'] = null;
    
    
        if (!(data == null || data == undefined || data == '')) {
            /*获取折线折点*/
    
            for (var i = 0; i < data.length; i++) {
                var line = data[i];
                var _dew = line.dew;
                var _height = line.height;
                var _hpa = line.hpa;
                var _tmp = line.tmp;
                var _winDir = line.winDir;
                var _winSpeed = line.winSpeed;
    
                _dew = _dew == 9999 ? '-' : _dew;
                _height = _height == 9999 ? '-' : _height;
                _hpa = _hpa == 9999 ? '-' : _hpa;
                _tmp = _tmp == 9999 ? '-' : _tmp;
                _winDir = _winDir == 9999 ? '-' : _winDir;
                _winSpeed = _winSpeed == 9999 ? '-' : _winSpeed;
    
                Station[fileName + ':tmp'][i] = new Array(_tmp, _hpa);
                Station[fileName + ':dp'][i] = new Array(_dew, _hpa);
            }
    
            Station[fileName + ':tmp_area_data'] = [];
            Station[fileName + ':tmp_zero'] = calcZero(data, 'tmp', Station[fileName + ':tmp_area_data']);
    
            /*计算冷暖层强度*/
            if (Station[fileName + ':tmp_zero'].length > 1) {
                Station[fileName + ':tmp_areas'] = [];
                Station[fileName + ':tmp_areas'] = calAreas(Station[fileName + ':tmp_area_data']);
            }
        }
        return Station;
    }

     

转载于:https://www.cnblogs.com/unique1319/p/9157183.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 Flask 和 Echarts 实现世界地图图层显隐、搜索标绘、快速标注和快速追踪的简单示例: 1. 安装 Flask 和 Echarts ``` pip install Flask pip install pyecharts ``` 2. 创建 Flask 应用并定义路由 ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') ``` 3. 创建 HTML 模板和 JavaScript 代码 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts Map Demo</title> <style> #chart { width: 100%; height: 600px; } </style> </head> <body> <div id="chart"></div> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/bmap.min.js"></script> <script> var myChart = echarts.init(document.getElementById('chart')); // 初始化地图 myChart.setOption({ bmap: { center: [104.114129, 37.550339], zoom: 5, roam: true }, series: [{ type: 'map', map: 'world' }] }); // 标绘点 function addMarker(name, lng, lat) { myChart.setOption({ series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [{ name: name, value: [lng, lat] }], symbolSize: 10, itemStyle: { color: 'red' } }] }); } // 显示/隐藏图层 function toggleLayer(layerName) { var series = myChart.getOption().series; for (var i = 0; i < series.length; i++) { if (series[i].name === layerName) { series[i].visible = !series[i].visible; myChart.setOption({ series: series }); break; } } } // 搜索标绘 function searchMarker(name) { var series = myChart.getOption().series; for (var i = 0; i < series.length; i++) { if (series[i].type === 'scatter' && series[i].data[0].name === name) { myChart.setOption({ bmap: { center: series[i].data[0].value } }); break; } } } </script> </body> </html> ``` 4. 在路由中渲染 HTML 模板 ```python @app.route('/') def index(): return render_template('index.html') ``` 5. 在 HTML 中调用 JavaScript 函数实现交互功能 ```html <button onclick="toggleLayer('world')">Toggle World Map</button> <button onclick="toggleLayer('china')">Toggle China Map</button> <input type="text" id="markerName"> <button onclick="searchMarker(document.getElementById('markerName').value)">Search Marker</button> <button onclick="addMarker('Beijing', 116.4074, 39.9042)">Add Marker</button> ``` 6. 运行 Flask 应用 ```python if __name__ == '__main__': app.run() ``` 通过上述步骤,我们就可以使用 Flask 和 Echarts 实现世界地图图层显隐、搜索标绘、快速标注和快速追踪的功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值