You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/08/25 09:28:10 UTC
[GitHub] [echarts] hi-mashuo opened a new issue, #17572: 您好，echarts重新渲染大量数据时会发生数据重叠问题[Feature]
hi-mashuo opened a new issue, #17572:
URL: https://github.com/apache/echarts/issues/17572
### What problem does this feature solve?
这个问题困扰了我许久，可以给一些建议吗谢谢
option代码
let option = {
grid: {
top: "2%",
left: "5%",
right: "4%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
xAxis: [
{
boundaryGap: false,
type: "category",
data: this.chart.x,
axisPointer: {
type: "shadow",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "rgba(6,199,255,.2)",
type: "solid",
},
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(6,199,255,.2)",
},
},
},
],
yAxis: [
{
min: Math.min(...this.chart.v),
max: Math.max(...this.chart.v),
type: "value",
splitLine: {
lineStyle: {
color: "rgba(6,199,255,.2)",
},
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(6,199,255,.2)",
},
},
axisLabel: {
formatter: "{value}" + this.value.split('-')[1],
show: true,
textStyle: {
color: "rgba(6,199,255,.2)",
fontWeight: "bold",
},
},
},
],
series: [
{
name: "",
symbolSize: 10,
itemStyle: {
color: 'skyblue',
},
data: this.chart.point,
type: 'scatter'
},
{
name: "",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 2,
color: "#06C7FF",
},
showSymbol: false,
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(22,120,208,.5)",
},
{
offset: 1,
color: "rgba(22,120,208,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: this.chart.v,
markLine: {
symbol: ["none", "none"], //去掉箭头
itemStyle: {
normal: {
lineStyle: {
type: "dashed",
color: '#EB6100',
},
label: {
show: false,
},
},
},
data: [
{
yAxis: this.chart.red, //这里设置false是隐藏不了的，可以设置为-1
},
],
},
}
],
}
### What does the proposed API look like?
js
getChartData(){
stateChart({
end: this.timeValueNew,
start: this.timeValueOld,
name: this.value.split('-')[0],
deviceId: this.info.deviceId
}).then(res => {
let xData = [];
let data = [];
let point = [];
let data1 = res.data.data.list
data1.map((item, index) =>{
xData.push(item.tt)
data.push(item.v)
point.push([item.tt, item.v])
})
this.chart = {}
this.chart = {
x: xData,
v: data,
// red: res.data.data.lineValue,
red: 60,
point
}
this.chart.min = Math.min(...this.chart.v)
this.chart.max = Math.max(...this.chart.v)
this.showDom = !this.showDom
console.log(this.showDom);
this.myChart1()
})
},
myChart1() {
const myChart1s = this.$echarts.init(document.getElementById("myChart1"))
let option = {
grid: {
top: "2%",
left: "5%",
right: "4%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
xAxis: [
{
boundaryGap: false,
type: "category",
data: this.chart.x,
axisPointer: {
type: "shadow",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "rgba(6,199,255,.2)",
type: "solid",
},
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(6,199,255,.2)",
},
},
},
],
yAxis: [
{
min: Math.min(...this.chart.v),
max: Math.max(...this.chart.v),
type: "value",
splitLine: {
lineStyle: {
color: "rgba(6,199,255,.2)",
},
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(6,199,255,.2)",
},
},
axisLabel: {
formatter: "{value}" + this.value.split('-')[1],
show: true,
textStyle: {
color: "rgba(6,199,255,.2)",
fontWeight: "bold",
},
},
},
],
series: [
{
name: "",
symbolSize: 10,
itemStyle: {
color: 'skyblue',
},
data: this.chart.point,
type: 'scatter'
},
{
name: "",
type: "line",
stack: "Total",
smooth: true,
sampling: 'lttb',
lineStyle: {
width: 2,
color: "#06C7FF",
},
showSymbol: false,
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(22,120,208,.5)",
},
{
offset: 1,
color: "rgba(22,120,208,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: this.chart.v,
}
],
}
myChart1s.setOption(option, false);
}
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #17572: [Feature] 您好，echarts重新渲染大量数据时会发生数据重叠问题
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #17572:
URL: https://github.com/apache/echarts/issues/17572#issuecomment-1227014357
@hi-mashuo It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**TITLE**
[Feature] Hello, data overlap issues occur when echarts re-renders large amounts of data
**BODY**
### What problem does this feature solve?
This problem has troubled me for a long time, can you give me some advice? Thank you
option code
let option = {
grid: {
top: "2%",
left: "5%",
right: "4%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
xAxis: [
{
boundaryGap: false,
type: "category",
data: this.chart.x,
axisPointer: {
type: "shadow",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "rgba(6,199,255,.2)",
type: "solid",
},
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(6,199,255,.2)",
},
},
},
],
yAxis: [
{
min: Math.min(...this.chart.v),
max: Math.max(...this.chart.v),
type: "value",
splitLine: {
lineStyle: {
color: "rgba(6,199,255,.2)",
},
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(6,199,255,.2)",
},
},
axisLabel: {
formatter: "{value}" + this.value.split('-')[1],
show: true,
textStyle: {
color: "rgba(6,199,255,.2)",
fontWeight: "bold",
},
},
},
],
series: [
{
name: "",
symbolSize: 10,
itemStyle: {
color: 'skyblue',
},
data: this.chart.point,
type: 'scatter'
},
{
name: "",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 2,
color: "#06C7FF",
},
showSymbol: false,
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(22,120,208,.5)",
},
{
offset: 1,
color: "rgba(22,120,208,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: this.chart.v,
markLine: {
symbol: ["none", "none"], // remove the arrow
itemStyle: {
normal: {
lineStyle: {
type: "dashed",
color: '#EB6100',
},
label: {
show: false,
},
},
},
data: [
{
yAxis: this.chart.red, //The setting of false here cannot be hidden, it can be set to -1
},
],
},
}
],
}
### What does the proposed API look like?
js
getChartData(){
stateChart({
end: this.timeValueNew,
start: this.timeValueOld,
name: this.value.split('-')[0],
deviceId: this.info.deviceId
}).then(res => {
let xData = [];
let data = [];
let point = [];
let data1 = res.data.data.list
data1.map((item, index) =>{
xData.push(item.tt)
data.push(item.v)
point.push([item.tt, item.v])
})
this.chart = {}
this.chart = {
x: xData,
v: data,
// red: res.data.data.lineValue,
red: 60,
point
}
this.chart.min = Math.min(...this.chart.v)
this.chart.max = Math.max(...this.chart.v)
this.showDom = !this.showDom
console.log(this.showDom);
this.myChart1()
})
},
myChart1() {
const myChart1s = this.$echarts.init(document.getElementById("myChart1"))
let option = {
grid: {
top: "2%",
left: "5%",
right: "4%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
xAxis: [
{
boundaryGap: false,
type: "category",
data: this.chart.x,
axisPointer: {
type: "shadow",
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "rgba(6,199,255,.2)",
type: "solid",
},
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(6,199,255,.2)",
},
},
},
],
yAxis: [
{
min: Math.min(...this.chart.v),
max: Math.max(...this.chart.v),
type: "value",
splitLine: {
lineStyle: {
color: "rgba(6,199,255,.2)",
},
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(6,199,255,.2)",
},
},
axisLabel: {
formatter: "{value}" + this.value.split('-')[1],
show: true,
textStyle: {
color: "rgba(6,199,255,.2)",
fontWeight: "bold",
},
},
},
],
series: [
{
name: "",
symbolSize: 10,
itemStyle: {
color: 'skyblue',
},
data: this.chart.point,
type: 'scatter'
},
{
name: "",
type: "line",
stack: "Total",
smooth: true,
sampling: 'lttb',
lineStyle: {
width: 2,
color: "#06C7FF",
},
showSymbol: false,
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(22,120,208,.5)",
},
{
offset: 1,
color: "rgba(22,120,208,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: this.chart.v,
}
],
}
myChart1s.setOption(option, false);
}
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] Ovilia commented on issue #17572: [Feature] 您好，echarts重新渲染大量数据时会发生数据重叠问题
Posted by GitBox <gi...@apache.org>.
Ovilia commented on issue #17572:
URL: https://github.com/apache/echarts/issues/17572#issuecomment-1227049544
请详细描述你的问题，这个也不是 feature request 而是 bug，请选择正确的模板并按照模板要求填写内容。这个 issue 没法让别人帮助到你。
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] Ovilia closed issue #17572: [Feature] 您好，echarts重新渲染大量数据时会发生数据重叠问题
Posted by GitBox <gi...@apache.org>.
Ovilia closed issue #17572: [Feature] 您好，echarts重新渲染大量数据时会发生数据重叠问题
URL: https://github.com/apache/echarts/issues/17572
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org