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

2021-03-25  本文已影响0人  _信仰zmh

多条折线的时候,每条折线单独自定义了一些样式,删除自定义配置的时候,不需要把自定义的配置一个一个初始化掉,因为有的我也不知道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);
    }

上一篇下一篇

猜你喜欢

热点阅读