• 动态加载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);
  • 相关阅读:
    2019-9-23-dotnet-判断特定进程存在方法
    2019-7-4-win10-uwp-处理用户点击关闭按钮
    2019-7-4-win10-uwp-处理用户点击关闭按钮
    2019-9-2-如何使用本模板搭建博客
    2019-8-31-dotnet-使用-System.CommandLine-写命令行程序
    2018-11-3-WPF-内部的5个窗口之-MediaContextNotificationWindow
    2019-4-7-VisualStudio-解决方案筛选器-slnf-文件
    2019-9-2-用自动机的思想说明光速
    2019-10-26-dotnet-core-发布只有一个-exe-的方法
    2018-2-13-win10-uwp-获取按钮鼠标左键按下
  • 原文地址:https://www.cnblogs.com/wangjiaxiaoxi/p/7380582.html
Copyright © 2020-2023  润新知