echarts动态数据页面刷新问题
现实情况中，有时候我们需要在一个图中切换不同数据，这时候会同意产生数据清除不干净的问题，其实只需要在setOption 的时候，加一个参数即可。
echarts.setOption(option,true),让option不进行合并，而是让旧的数据完全移除，新的option才会创建。
myChart.setOption({
title: {
text: "",
left: "1%",
},
tooltip: {
trigger: "axis",
backgroundColor: "",
borderWidth: 0,
axisPointer: {
type: "line",
lineStyle: {
width: 2,
type: "solid",
color: "white",
shadowColor: "rgba(255, 255, 255, 0.8)",
shadowBlur: 20,
shadowOffsetX: -5,
},
},
textStyle: { align: "center" },
},
grid: {
left: "2%",
right: "3%",
bottom: "10%",
top: "18%",
containLabel: true,
},
legend: {
itemWidth: 10,
itemHeight: 10,
itemGap: 20,
top: "top",
right: "left",
icon: "roundRect",
textStyle: {
fontSize: 14,
fontWight: "bold",
fontFamily: "SourceHanSansCN-Regular",
color: "white",
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: this.Xdata,
axisLine: {
lineStyle: {
type: "solid",
color: "#00CCFF",
width: "2",
opacity: "0.4",
},
},
axisLabel: {
textStyle: {
color: "#319899",
fontSize: "14",
},
},
interval: 1,
},
yAxis: {
name: "MW",
type: "value",
nameTextStyle: {
fontSize: 14,
color: "#319899",
fontFamily: "DIN",
fontWeight: "bold",
},
splitNumber: 5,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
width: "2",
color: "#00CCFF",
opacity: "0.2",
},
},
axisLine: {
lineStyle: {
type: "solid",
color: "#00CCFF",
width: "2",
opacity: "0.4",
},
},
axisLabel: {
textStyle: {
color: "#319899",
fontSize: "14",
},
},
},
dataZoom: [
{
show: true,
height: 10,
bottom: 0,
realtime: true,
start: 0,
end: 100,
},
{
type: "inside",
realtime: true,
start: 35,
end: 100,
},
],
series: [
{
name: "全网用电负荷",
type: "line",
symbol: "circle",
showSymbol: false,
symbolSize: 10,
smooth: true,
itemStyle: {
normal: {
color: "#FFC71E",
// borderColor: "white",
lineStyle: {
width: 2,
},
},
},
areaStyle: {
//折线图颜色半透明
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,199,30, 0.5)", // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(255,199,30, 0.1)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: this.qwysfhList,
},
{
name: "煤电机组出力",
type: "line",
showSymbol: false,
symbol: "circle",
symbolSize: 10,
smooth: true,
itemStyle: {
normal: {
color: "#FF816B",
// borderColor: "white",
lineStyle: {
width: 2,
},
},
},
areaStyle: {
//折线图颜色半透明
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(255,129,107, 0.5)", // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(255,129,107, 0.1)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: this.mdjzclList,
},
]
},true);