动态加载echarts数据,防止动态加载后数据叠加

最近百度echarts用的不要不要的,刚开始legend数据总还是固定的,现在连legend都要自己赋值,难过!

  c.canaloption = {

        title: {
            text: ‘‘,

        },
        tooltip: {
            trigger: ‘axis‘,
            axisPointer: {
                type: ‘cross‘,
                label: {
                    backgroundColor: ‘#283b56‘
                }
            }
        },
        legend: {
            data: []
        },
        grid: {
            left: ‘3%‘,
            right: ‘4%‘,
            bottom: ‘15%‘,
            containLabel: true
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: { show: true }
            }, right: 20
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [
            {
                type: ‘category‘,
                name: ‘名字‘,
                data: [],
                axisLabel: {
                    interval: 0,
                    rotate: 30
                },
            },
            {
                type: ‘category‘,
                axisTick: {
                    alignWithLabel: true
                },
                data: [],
                show: false
            }
        ],
        yAxis: [

            {
                type: ‘value‘,
                name:‘x名字‘,
                nameTextStyle: {
                    color: ‘#7cb5ec‘
                },
                min: 0,
                boundaryGap: [0.2, 0.2],
                axisLabel: {
                    formatter: ‘{value}‘,
                    //textStyle: {
                    //    color: ‘#7cb5ec‘
                    //}
                },
                lineStyle: {
                    color: ‘#7cb5ec‘
                },

                // nameLocation: ‘middle‘//标题距离
                // 去除y轴上的刻度线
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },//去掉Y轴竖线
            },
        ],
        series: []
    };

接下来就是存数据进去了,大体数据存储可以如下,自己逻辑太多,就只截取了片段

 var CanalSource = new Array();//声明一个数组 CanalSource.push(rows[i].CanalSource);//将后台传来的数据存进去//根据自己的需要对数据进行循环 c.series.push({
            name: CanalSource[j],
            type: ‘line‘,
            data: count,
            label: {
                normal: {
                    show: true,
                    position: ‘top‘
                },
            }
        });

    //然后设置柱状图的数据
    c.canaloption.legend.data = CanalSource;
    c.canaloption.xAxis[0].data = day;//
    c.canaloption.xAxis[1].data = day;

    c.canaloption.series = [];
    c.canaloption.series = c.series;//得到要放这个图表外的一个id,这里不要忘了引入百度echarts的文件
   c.canalchart = echarts.init(document.getElementById("canalchart"));//这里的true如果不加会导致数据叠加,
    c.canalchart.setOption(c.canaloption,true);

    $(window).resize(c.canalchart.resize);
时间: 2024-11-14 15:22:52

动态加载echarts数据,防止动态加载后数据叠加的相关文章

Echarts使用及动态加载图表数据

Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地域.访问者).全方位分析网站流量的统计标准,形成原始数据,数据视觉化,数据行为化,数据深入挖掘的数据分析的模式 2.指标(衡量数据) 指标是指可以按总数或比值衡量的具体维度元素.例如,维度"城市"可以关联指标"人口",其值为具体城市的居民总数  

黑马程序员————java中类的加载、反射、动态代理、枚举

------<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS培训..Net培训</a>.期待与您交流! ------- 类的加载.反射.动态代理.枚举 一.类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 1.加载: 就是指将class文件读入内存,并为之创建一个Class对象 ★★

Objective-C多态:动态类型识别+动态绑定+动态加载

一.Objective-C多态 1.概念:相同接口,不同的实现 来自不同类可以定义共享相同名称的方法. 动态类型能使程序直到执行时才确定对象所属类型 动态类型绑定能使程序直到执行时才确定要对对象调用的实际方法 2.Objective-C不同于传统程序设计语言,它可以再运行时加入新的数据类型和新的程序模块:动态类型识别,动态绑定,动态加载 3.id类型:通用指针类型,弱类型,编译时不进行类型检查 二.动态类型识别 1.任意NSObject的子类都会继承NSObject的isa实例变量,而且当NSO

异步加载 Echarts图的数据

<script src="~/Scripts/NewEcharts/echarts.js"></script> <script type="text/javascript"> var myChart; $(function () { load(); }); function load() { require.config({ paths: { //echarts: '../Scripts/Echartsjs' echarts: '

使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题

一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

180729-Quick-Task 动态脚本支持框架之任务动态加载

Quick-Task 动态脚本支持框架之任务动态加载 前面几篇博文分别介绍了整个项目的基本架构,使用说明,以及整体框架的设计与实现初稿,接下来则进入更细节的实现篇,将整个工程中核心实现捞出来,从为什么这么设计到最终的实现给予说明 相关系列博文: 180702-QuickTask动态脚本支持框架整体介绍篇 180719-Quick-Task 动态脚本支持框架之使用介绍篇 180723-Quick-Task 动态脚本支持框架之结构设计篇 I. 任务动态加载 这个动态脚本调度框架,最大的一个功能点就是

ECharts 环形饼图 动态获取json数据

ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100%; height:400px;"></div> 二.js部分 <script type="text/javascript"> function loadOneColumn() {     var myChart = echarts.init(doc

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果

只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都能使用多种方法实现.但现在这个问题该怎么去解决呢. 对了这个题目,似乎不是那么好解决,毕竟像这类问题我们都是使用js或者模版辅助实现的. 这个题目难点在哪儿? 对动态添加的数据只用css实现这个效果,那就意味着除了动态添加数据外,不可能改变现有的文档结构.什么意思呢?比如对于这种实现,我们可以使用u

OpenLayers学习--加载指定等级指定范围的高德地图数据

在使用高德地图数据的时候,我们通常不需要加载世界地图,只需要指定项目片区地图数据即可:同样,我们也不需要所有等级的数据,只需要指定等级数据即可. 按照<OpenLayers学习--Layer体系(一)>中的方法,直接使用XYZ图层类来加载,显然无法实现该功能.主要原因有以下两点: 1.没有指定地图的分辨率 OpenLayers的机制就是,当你没有给Layer指定分辨率,也没有给Map指定分辨率,则直接将地图的最大范围的左上角点作为切图原点,并且按照18级来计算切图分辨率,分辨率是以1/2向下递

Plist数据表格的加载详细事例

1.本次主要加载单一字典的plist数据(app.plist),形式如下 2.加载plist数据,先将数据字典转换成对应的模型,本例子所用的是各个应用的图标,对应的就应该创建一个应用图标的模型huapp(名称自拟).在头文件中定义所有变量,以及将字典转换成模型数据的两个方法,如下图: 类方法调用对象方法,在对象方法中转换模型 注意:在对象方法中属性的转化还可已使用KVC,一句代码就解决 [self setValuesForKeysWithDictionary:dict]; 但是使用KVC,就会将