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