最后一个点有涟漪的波纹ECharts Gallery

20:11:45图表已生成
代码
var axisDataS1=['WK21','WK22','WK23','WK24','WK25','WK26','WK27'];
    var dataS1=['98.35','98.72','99.07','98.85','98.73','98.95','99.77'];
    var effectScatterData=[];
    for(var i=dataS1.length-1; i >= 0; i--){
        if(dataS1[i] != '-'){
            effectScatterData.push([axisDataS1[i],dataS1[i]]);
            break;
        }
    }

    var axisDataS2=['WK21','WK22','WK23','WK24','WK25','WK26','WK27'];
    var dataS2=['98.35','98.62','98.80','98.98','98.86','99.02','99.51'];
    var effectScatterData2=[];
    for(var i=dataS2.length-1; i >= 0; i--){
        if(dataS2[i] != '-'){
            effectScatterData2.push([axisDataS2[i],dataS2[i]]);
            break;
        }
    }

    var option={
        backgroundColor: '#262D45',
        color:['#01C5FD','#01C5FD','#01C5FD'],
        title : {
            text: 'LH',  //标题 QL OUTPUT 单引号
            //subtext: '生產數據'
          x:'center',
           textStyle : {
                color:'#f1f1f1',
                fontSize : '20',
              //  fontFamily : '微軟雅黑',
                fontWeight : 'normal'
                },
        },
     tooltip : {
        trigger: 'axis',  //item,axis(item鼠標指向圖形顯示單個點數據，axis顯示所有圖形數據)
        axisPointer:{
            type: 'shadow'
        },
        textStyle:{
            fontSize:20
        }
    },
     legend: {
      x:'center', 
      y:'top', 
      padding:[100,0,0,0],
      itemGap:100,
      itemWidth :40,
      itemHeight:24,
      textStyle : {
         color:'#f1f1f1',
         fontSize : '26',
         fontWeight : 'normal'
       },
       data:['TX0','TX1']
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line','bar']},  //工具行對應可變換图形
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
     calculable : false,  //是否可以拖拽默认为false
     grid :{
           x:'60',   //圖表距離左邊距的距離
           y:'100',
          x2:'60',  //圖表距離右邊距的距離
           y2:'100'

        },
     xAxis : [
        {
           // name:'時間',  //坐标轴名字 时间(時)
           type : 'category',  //坐标轴类型category|value|time
           boundaryGap: [0, 0],
           splitLine : {show : false},  //去除网格线
           splitArea : {show : false},  //保留网格区域
            axisLine:{
              lineStyle:{
                     color:'#f1f1f1',
                     width:'2'
             },
           },
            axisLabel:{
              textStyle:{
                color:'#f1f1f1',
                fontSize : '18',
                //fontFamily : '微软雅黑',
                fontWeight : 'normal'
            }
          },
         axisTick:{
                show:true,
                length:2,
                lineStyle:{
                    width:2
                }
             },
            data : ['WK21','WK22','WK23','WK24','WK25','WK26','WK27']  //X轴依次显示名字，值加单引号，值间逗号隔开
        }
    ],
    yAxis : [
        {
           // name:'%',  //坐标轴名字 PCS
           type : 'value',
           max : 100.00,
           min :'97',
           scale:true,
           boundaryGap: false,
           splitNumber :5,
           axisLine:{
              lineStyle:{
                     color:'#f1f1f1',
                     width:'2'
             },
           },
            axisLabel : {  
                 formatter: '{value}% ',  //Y坐标轴值后面加文字可以加单位'{value}K'，此处为空
                 interval:0,
                 textStyle:{
                  color:'#f1f1f1',
                  fontSize : '26',
                  //fontFamily : '微软雅黑',
                  fontWeight : 'normal'
                }
             },
           axisTick:{
                show:true,
                length:8,
                lineStyle:{
                    width:2
                }
             },
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#EEEEEE',
                    width:2,
                    type:'solid'
                }
            }
        }
    ],
       visualMap: {
            show: false,
            pieces: [{
                gt: 97,
                lte: 98,
                color: '#E04F23'
            }, {
                gt: 98,
                lte: 99,
                color: '#EAB62A'
            }, {
                gt: 99,
                lte: 100,
                color: '#01C5FD'
            }],
            outOfRange: {
                color: '#999'
            }
        },
       series : [
        {
            name:'TX0',
            type:'line',
            smooth:true,
            showAllSymbol:true,
            symbol:'circle',
            symbolSize: 20,
            itemStyle:{
              normal:{
                //color:'#9D47B2',
                label : {  //数值显示在bar上
                          show : true,
                          textStyle : {
                            color:function(value,index){
                                if(value<98){
                                    return '#E04F23'
                                }else if(value>=98 && value<99){
                                    return '#EAB62A'
                                }else{
                                    return '#01C5FD'
                                }
                              },
                            fontSize : '26',
                            fontWeight : 'normal'
                        }
                    },
                lineStyle:{ 
                  width:'2', //線條寬度
                  type:'solid',
                  //color: '#CCDEE6'
                }
              }
            },
            markArea:{
                data:[
                  [{
                    yAxis:'99',
                    itemStyle:{
                        color:'rgba(1,197,253,0.4)'
                      }
                    },{
                     yAxis:'100'
                    }],
                    [{
                    yAxis:'98',
                    itemStyle:{
                        color:'rgba(234,182,42,0.4)'
                      }
                    },{
                     yAxis:'99'
                    }],
                    [{
                    yAxis:'97',
                    itemStyle:{
                        color:'rgba(224,79,35,0.4)'
                      }
                    },{
                     yAxis:'98'
                    }],
                 ]
             },
            data:['98.35','98.72','99.07','98.85','98.73','98.95','99.77']  //图形2数据
        },
		 {
            name:'TX1',
            type:'line',
            smooth:true,
            showAllSymbol:true,
            symbol:'diamond',
            symbolSize: 15,
            itemStyle:{
              normal:{
              //color:'#B79D5C',    //線條顏色
                label : {  //数值显示在bar上
                          show : true,
                          textStyle : {
                          color:function(value,index){
                            if(value<98){
                                return '#E04F23'
                            }else if(value>=98 && value<99){
                                return '#EAB62A'
                            }else{
                                return '#01C5FD'
                            }
                          },
                          fontSize : '26',
                          fontWeight : 'normal'
                        }
                    },
                lineStyle:{
                  width:'2', //線條寬度
                  type:'solid',
                  //color:'#CCDEE6'
                }
              }
            },
            data:['98.35','98.62','98.80','98.98','98.86','99.02','99.51']  //图形3数据
        },
        {
            name:'TX0',
            type:'effectScatter',
            coordinateSystem: 'cartesian2d',
            data:effectScatterData,
            symbolSize:30,
            showEffectOn:'render',
            rippleEffect:{
                brushType:'stroke'
            },
            
            symbol:'circle',
            hoverAnimation:true,
            itemStyle: {
                normal: {
                    shadowBlur: 35,
                    shadowColor: '#333'
              }
            },
            zlevel: 1
        },
        {
            name:'TX1',
            type:'effectScatter',
            coordinateSystem: 'cartesian2d',
            data:effectScatterData2,
            symbolSize:30,
            showEffectOn:'render',
            rippleEffect:{
                brushType:'stroke'
            },
            symbol:'diamond',
            hoverAnimation:true,
            itemStyle: {
                normal: {
                    shadowBlur: 35,
                    shadowColor: '#333'
               }
            },
            zlevel: 1
        }
    ]
  } ;
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
