You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by 薛松松 <75...@qq.com> on 2020/02/07 08:34:20 UTC

echart您好，提一个问题，当滚动条滚动的时候就不显示markArea，option在正文

option = {
&nbsp; &nbsp; xAxis: {
&nbsp; &nbsp; &nbsp; &nbsp; type: 'category',
&nbsp; &nbsp; &nbsp; &nbsp; data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
&nbsp; &nbsp; },
&nbsp; &nbsp; yAxis: {
&nbsp; &nbsp; &nbsp; &nbsp; type: 'value'
&nbsp; &nbsp; },
&nbsp; &nbsp; series: [{
&nbsp; &nbsp; &nbsp; &nbsp; data: [820, 932, 901, 934, 1290, 1330, 1320],
&nbsp; &nbsp; &nbsp; &nbsp; type: 'line',
&nbsp; &nbsp; &nbsp; &nbsp; smooth: true,
&nbsp; &nbsp; &nbsp; &nbsp; markArea: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xAxis: 'Mon',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxis: 0,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemStyle:{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:'red'
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; show: true,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: ['50%', '50%'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: 'black',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontStyle: 'oblique',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 20,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rotate: 90,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formatter: "wwww"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xAxis: 'Sun',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxis: '900',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemStyle:{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:''
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }],
&nbsp; &nbsp; dataZoom:[{
&nbsp; &nbsp; &nbsp; &nbsp; type:'slider',
&nbsp; &nbsp; &nbsp; &nbsp; start:'0',
&nbsp; &nbsp; &nbsp; &nbsp; end:'50'
&nbsp; &nbsp; }]
};

Re: echart您好，提一个问题，当滚动条滚动的时候就不显示markArea，option在正文

Posted by Ovilia <ov...@gmail.com>.
Hi,

Please use English in the mailing list for others to understand.

Please save your demo with https://gallery.echartsjs.com/editor.html or
https://jsfiddle.net/ovilia/n6xc4df3/ .


Thanks

Wenli


On Fri, Feb 7, 2020 at 10:24 PM 薛松松 <75...@qq.com> wrote:

> option = {
> &nbsp; &nbsp; xAxis: {
> &nbsp; &nbsp; &nbsp; &nbsp; type: 'category',
> &nbsp; &nbsp; &nbsp; &nbsp; data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',
> 'Sat', 'Sun']
> &nbsp; &nbsp; },
> &nbsp; &nbsp; yAxis: {
> &nbsp; &nbsp; &nbsp; &nbsp; type: 'value'
> &nbsp; &nbsp; },
> &nbsp; &nbsp; series: [{
> &nbsp; &nbsp; &nbsp; &nbsp; data: [820, 932, 901, 934, 1290, 1330, 1320],
> &nbsp; &nbsp; &nbsp; &nbsp; type: 'line',
> &nbsp; &nbsp; &nbsp; &nbsp; smooth: true,
> &nbsp; &nbsp; &nbsp; &nbsp; markArea: {
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: [
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [{
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> xAxis: 'Mon',
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> yAxis: 0,
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> itemStyle:{
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; color:'red'
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp;&nbsp;
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> label: {
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; show: true,
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; position: ['50%', '50%'],
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; color: 'black',
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; fontStyle: 'oblique',
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; fontSize: 20,
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; rotate: 90,
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; formatter: "wwww"
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> xAxis: 'Sun',
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> yAxis: '900',
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> itemStyle:{
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; color:''
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp;&nbsp;
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
> &nbsp; &nbsp; &nbsp; &nbsp; }
> &nbsp; &nbsp; }],
> &nbsp; &nbsp; dataZoom:[{
> &nbsp; &nbsp; &nbsp; &nbsp; type:'slider',
> &nbsp; &nbsp; &nbsp; &nbsp; start:'0',
> &nbsp; &nbsp; &nbsp; &nbsp; end:'50'
> &nbsp; &nbsp; }]
> };