[GitHub] [incubator-echarts] simian0826 commented on issue #10975: echarts4.2.1 connect 多图联动，dataview切换之后，每个图都被污染

[GitBox]

simian0826 commented on issue #10975: echarts4.2.1 connect 
多图联动，dataview切换之后，每个图都被污染
URL: 
https://github.com/apache/incubator-echarts/issues/10975#issuecomment-522394624
 
 
   sorry I just received the email now.  this is my options
   
   --------------------------
    setProductTrendOptions(data) {
         this.productTrendChart.setOption({
           title: {
             text: '产量趋势',
             left: '0',
             top: '0'
           },
           axisPointer: {
             label: {
               backgroundColor: '#D50000'
             }
           },
   
           grid: {
             left: 10,
             right: 10,
             top: 70,
             containLabel: true,
             height: '80%',
             width: '97%'
           },
           xAxis: {
             type: 'time',
             name: '时间',
             max: todayMax,
             min: todayMin
           },
           yAxis: {
             name: '产量'
           },
           legend: {
             data: ['产品A', '产品B', '产品A extra', '产品B extra']
           },
           toolbox: {
             show: true,
             orient: 'horizontal',
             left: 'right',
             top: '0',
             feature: {
               mark: { show: true },
               magicType: { show: true, type: ['line', 'bar'] }
   
             }
           },
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'cross'
             },
             padding: [5, 10]
           },
   
           series: [{
             name: '产品A', itemStyle: {
               normal: {
                 color: '#FF005A',
                 lineStyle: {
                   color: '#FF005A',
                   width: 2
                 }
               }
             },
             areaStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: '#FC6A9D'
                 }, {
                   offset: 1,
                   color: '#fff'
                 }])
               }
             },
             smooth: true,
             type: 'line',
             data: productionData,
             animationDuration: 2800,
             animationEasing: 'cubicInOut'
           },
           {
             name: '产品B',
             smooth: true,
             type: 'line',
             itemStyle: {
               normal: {
                 color: '#3888fa',
                 lineStyle: {
                   color: '#3888fa',
                   width: 2
                 }
               }
             },
             areaStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: '#9DC4FC'
                 }, {
                   offset: 1,
                   color: '#fff'
                 }])
               }
             },
             data: productionData2,
             animationDuration: 2800,
             animationEasing: 'quadraticOut'
           },
           {
             name: '产品A extra',
             smooth: true,
             type: 'line',
             itemStyle: {
               normal: {
                 color: '#0D47A1',
                 lineStyle: {
                   color: '#0D47A1',
                   width: 2,
                   type: 'dotted'
                 }
               }
             },
             data: productionDataExtra,
             animationDuration: 2800,
             animationEasing: 'quadraticOut'
           },
           {
             name: '产品B extra',
             smooth: true,
             type: 'line',
             itemStyle: {
               normal: {
                 color: '#880E4F',
                 lineStyle: {
                   color: '#880E4F',
                   width: 2,
                   type: 'dotted'
   
                 }
               }
             },
             data: productionData2Extra,
             animationDuration: 2800,
             animationEasing: 'quadraticOut'
           }]
         })
       },
       setEquipmentOptions(data) {
   
         this.equipmentChart.setOption({
           title: {
             text: '设备状态',
             left: '0',
             top: '0'
           },
           axisPointer: {
             link: { xAxisIndex: 'all' },
             label: {
               backgroundColor: '#D50000'
             }
           },
           legend: {
             data: equipLegend,
             selectedMode: false
           },
           grid: {
             left: 10,
             right: 10,
             top: 70,
             containLabel: true,
             height: '80%',
             width: '97%'
           },
           xAxis: {
             type: 'time',
             name: '时间',
             max: todayMax,
             min: todayMin
           },
           yAxis: {
             name: '设备',
             type: 'category',
             data: equipCategory
           },
           tooltip: {
             trigger: 'item',
             axisPointer: {
               type: 'cross'
             },
             padding: [5, 10],
             formatter: (e) => {
               return `${e.marker} ${e.name} —— 
${echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', e.value[1])} ~ 
${echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', e.value[2])}`
             }
           },
           series: [
             {
               type: 'custom',
               renderItem: renderItem,
               itemStyle: {
                 normal: {
                   opacity: 0.8
                 }
               },
               encode: {
                 x: [1, 2],
                 y: 0
               },
               data: equip,
               animationDuration: 2800,
               animationEasing: 'quadraticOut'
             },
             {
               type: 'custom',
               renderItem: renderLineItem,
               itemStyle: {
                 normal: {
                   opacity: 0.8
                 }
               },
               encode: {
                 x: [1, 2],
                 y: 0
               },
               data: line,
               animationDuration: 2800,
               animationEasing: 'quadraticOut'
             },
             ...equipSeries
   
           ]
         })
       },
       setStaffOptions(data) {
         this.staffChart.setOption({
           title: {
             text: '人员在岗',
             left: '0',
             top: '0'
           },
           axisPointer: {
             link: { xAxisIndex: 'all' },
             label: {
               backgroundColor: '#D50000'
             }
           },
   
           grid: {
             left: 10,
             right: 10,
             top: 70,
             containLabel: true,
             height: '80%',
             width: '97%'
           },
           xAxis: {
             type: 'time',
             name: '时间',
             max: todayMax,
             min: todayMin
           },
           yAxis: {
             name: '人员在岗'
           },
           toolbox: {
             show: true,
             orient: 'horizontal',
             left: 'right',
             top: '0',
             feature: {
               mark: { show: true },
               magicType: { show: true, type: ['line', 'bar'] }
   
             }
           },
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'cross'
             },
             padding: [5, 10]
           },
   
           series: [
             {
               name: '人员在岗',
               type: 'line',
               itemStyle: {
                 normal: {
                   color: 'DarkTurquoise',
                   lineStyle: {
                     color: 'DarkTurquoise',
                     width: 1
                   }
                 }
               },
               areaStyle: {
                 normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: 'PaleTurquoise'
                   }, {
                     offset: 1,
                     color: '#fff'
                   }])
                 }
               },
               data: staffOnJob,
               animationDuration: 2800,
               animationEasing: 'quadraticOut',
             }
           ]
         })
       }
   
     }
   

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org
For additional commands, e-mail: dev-h...@echarts.apache.org