美文网首页
修改echarts的option配置后,图不能刷新

修改echarts的option配置后,图不能刷新

作者: _信仰zmh | 来源:发表于2021-03-25 14:40 被阅读0次

    多条折线的时候,每条折线单独自定义了一些样式,删除自定义配置的时候,不需要把自定义的配置一个一个初始化掉,因为有的我也不知道echarts内置的初始值是什么,那么初始化的时候有哪些属性,就用什么属性,用个新的obj覆盖,不要一个一个去修改。

    export var LINE_CONFIG = {
        //面积折线图一上来显示个默认示例
        defaultOption: {
            backgroundColor: "transparent",
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                        name: '邮件营销',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }]
        },
        //图表设置配置项
        //折线颜色、网格辅助线是否显示、横纵坐标是否显示线、背景图颜色、线条是否有弧度、tooltip样式、
        //是否多条
        serirsConfig: {
            lineStyle: {
                name: "折线样式配置",
                child: [{type: 'string', name: '折线系列别名', mappingValue: "name"},
                    {type: 'color', name: '折线颜色', mappingValue: "lineStyle**color"},
                    {type: 'select', name: '折线类型', mappingValue: "lineStyle**type", selection: [
                        {name: "实线", value: "solid"},
                        {name: "虚线", value: "dashed"},
                        {name: "点线", value: "dotted"},
                    ], default: '实线'},
                    {type: 'number', name: '折线宽度', mappingValue: "lineStyle**width"},
                    // {type: 'number', name: '折线透明度(0~1)', mappingValue: "lineStyle**opacity", default: 0},
                    {type: "number", name: "折线的平滑度(0~1)", mappingValue: "smooth", default: 0}]
            },
            // showAreaLineBackground: {type: 'boolean', name: '自定义区域面积样式', mappingValue: "showAreaStyle"},
            // emphasisStyle: {
            //     name: "高亮状态",
            //     child: [{type: 'boolean', name: '是否开启hover在拐点标志上的放大效果', mappingValue: "emphasis**scale"}]
            // },
            // showSymbol: {type: 'boolean', name: '是否显示折点', mappingValue: "showSymbol"},
            symbolStyle: {
                name: "折点样式",
                child: [
                    {type: 'select', name: "折点形状", mappingValue: "symbol", selection: [
                        {name: "圆形", value: "circle"},
                        {name: "矩形", value: "rect"},
                        {name: "圆角矩形", value: "roundRect"},
                        {name: "三角形", value: "triangle"},
                        {name: "菱形", value: "diamond"},
                        // {name: "", value: "pin"},
                        {name: "箭头", value: "arrow"},
                        {name: "空", value: "none"},
                    ]},
                    {type: "number", name: "折点大小", mappingValue: "symbolSize"},
                ],
                // needValue: "showSymbol"
            }
        },
        //需要自定义添加的全局配置 格式同上
        coverConfig: {
            //下面是栗子
            // general: {
            //     test1: {type: "string", name: "测试自定义添加", mappingValue: "title**text1"},
            //     test2: {type: "string", name: "测试自定义添加2", mappingValue: "title**text2"}
            // },
            // axis: {},
            // legend: {
            //     test3: {type: "string", name: "测试自定义添加3", mappingValue: "title**text3"},
            // },
            tooltip: {
                tooltipBGstyle: {type: "color", name: "气泡背景色", mappingValue: "tooltip**backgroundColor", needValue: ["tooltip**show"]},
            }
        },
        //需要去除的全局配置 这里只要mappingValue就行
        //如果整个设置类型都不要,则直接添加设置类型
        //例如:["axis" ,"title**text", "title**textStyle**fontSize"]
        uselessConfig: [
            //下面是栗子
            // "axis", "title**text", "title**top"
        ]
    };
    

    改完option然后通过setOption去让图重新渲染,发现图没更新,需要再加个参数true。

    myChart.setOption(chartOption);//图不更新
    myChart.setOption(chartOption, true);//加true后更新
    
    removeSeries(index){
            this.panel.seriesConfigPlans.splice(index,1);
            this.schemeIndex = 0;
            // this.render();
            let idx = index;
            if(this.panel.chartOption.series[idx]){
                var obj = {};
                
                obj.data = this.panel.chartOption.series[idx].data;
                if(this.dataList){
                    obj.name = this.dataList[idx].target;
                }else{
                    obj.name = '';
                }
                obj.type = this.panel.chartOption.series[idx].type;
                this.panel.chartOption.series[idx]=obj; 
            }
            //需要加个true才能更新
            this.ctrl.myChart.setOption(this.panel.chartOption,true);
        }
    
    

    相关文章

      网友评论

          本文标题:修改echarts的option配置后,图不能刷新

          本文链接:https://www.haomeiwen.com/subject/slalhltx.html