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

时间: 2024-07-31 19:48:40

Echarts自定义图表显隐开关的相关文章

自定义显隐式类型转换

将Cat实例对象转换为Animal实例对象 在Animal类中实现自定义类型转换 /// <summary> /// 隐式转换 /// </summary> /// <param name="cat"></param> public static implicit operator Animal(Cat cat) { return new Animal(cat.Name, cat.Weight); } /// <summary>

knockout+echarts实现图表展示

一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的配置 require.config.js中可以配置我们的自定义模块的加载. require.config({ baseUrl: ".", paths: { text: "requirejs/text", jquery: "jquery/jquery-1.11.

WPF MVVM模式中,通过命令实现窗体拖动、跳转以及显隐控制

在WPF中使用MVVM模式,可以让我们的程序实现界面与功能的分离,方便开发,易于维护.但是,很多初学者会在使用MVVM的过程中遇到一个显而易见且无法回避的问题,那就是不同的窗体之间如何跳转?很多人在介绍MVVM的使用时,都没有明显提到该如何解决这一问题,不知是因为觉得太简单了还是其他原因. 博主根据自己的开发经验,写了一个简单的示例程序,介绍MVVM模式中,如何通过命令来控制窗体的跳转.拖动与显隐控制. 先看效果: 主窗体中只有一个按钮,点击该按钮后,可以打开新的窗. 新窗体可以为自定义样式窗体

控制同一窗体的显隐(Toggle和Button)

公共变量的脚本 using UnityEngine; using System.Collections; using UnityEngine.UI; public class CommonValues : MonoBehaviour { public GameObject AnswerShowWin;//答案显示窗口 public Button CloseBtn; public GameObject SubmitTog;//提交答案 void Start () { } void Update (

Echarts自定义折线图例,增加选中功能

用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应的折线opacity会降低,(柱状图,饼图等等也类似于此),这是一个小例子(如果满足不了您的视觉要求,您可以自己定义css样式,达到自己想要的视觉效果): <!doctype html> <html> <head> <meta charset="utf-8&

关于界面的按钮的显隐 还有jsp页面数据的传递 把页面的标签变成只读

//界面按钮的显示隐藏 界面input的锁定    function change(){       document.getElementById('first1').style.display="inline";       document.getElementById('first2').style.display="inline";       document.getElementById('first3').style.display="in

主攻ASP.NET.4.5.1 MVC5.0之重生:创建UIHelper通用自定义分页和选择开关与PagesHelper和IsSelect简单用法

@helper放入地方 分页效果 选择开关编辑调用 <dl> <dd class="dc1">是否主管:</dd> <dd> @UIHelper.IsSelect("IsManager",Model.IsManager.ToString()); </dd> </dl> 分页调用 <div class="rg5"> @UIHelper.PagesHelper(Vie

FusionCharts中文教程:自定义图表——画布

FusionCharts图表的画布是指在图表数据绘制的区域但不包括标题,图例和轴名称被渲染的区域. 如下图所示的蓝色区域就是图表的画布区域: 本篇教程将从四个方面教你自定义图表的画布: 1.修改画布的填充颜色下载地址  图表的画布颜色填充修饰效果如下图所示: 修改画布填充颜色用到的属性有: 属性名称 描述 canvasBgColor 设置画布的背景颜色. canvasBgAlpha 设置画布背景的透明度. 数据结构如下: JSON: {     "chart": {         &

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ?Copyright 蕃薯耀 2017年5月5日 http://www.cnblogs.com/fanshuyao/ 做了个柱状图的报表,如下: 但是图和下面的表格没有对齐,需要