Echart 随便写的

主宰稳场 提交于 2020-04-06 06:10:23

test001

startFloor
stopFloor

currentLoad

散点图
legentd 是2个
范围图
图可双击事件

 

-------------------------------------------------------------------
散点图

option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
}]
};

 

时间,值,两个维度

点线,折线图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};


保持平滑
smooth: true


title 和背景色

backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
}, {
offset: 1,
color: '#cdd0d5'
}]),
title: {
text: '1990 与 2015 年各国家人均寿命与 GDP'
},

用于 起点和终点
legend: {
right: 10,
data: ['1990', '2015']
},


==》 series 下面的,如果点上去会显示具体详情

label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},

legend和 name必须相同才可以

yAxis
scale: true 设置 是否从0开始



xAxis 设置x轴是否有边界
boundaryGap: false,



y轴的指数表示方式
yAxis: {
type: 'log',
name: 'y'
},

 

drawCharts3(chartParams){
            for(var idx in chartParams.drivingcharttype){
                var currtype=chartParams.drivingcharttype[idx];
                var seriesx={};
                var times=[];
                this.chartdata.data.map((d,i)=>{//按照xyz分类
                    if(seriesx[d.loadClass]&& Array.isArray(seriesx[d.loadClass])){
                    }else{
                        seriesx[d.loadClass]=[];
                        seriesx[d.loadClass+'top']=[];
                        seriesx[d.loadClass+'bottom']=[];
                    }
                    if(d[chartParams.driving+'_average_'+currtype]){
                        var envelope = d[chartParams.driving+'_envelope_'+currtype]?parseFloat(d[chartParams.driving+'_envelope_'+currtype]):0
                        seriesx[d.loadClass].push([d.firstRideTimeStamp,parseFloat(d[chartParams.driving+'_average_'+currtype]),envelope]);
                        seriesx[d.loadClass+'top'].push([d.firstRideTimeStamp,parseFloat(d[chartParams.driving+'_average_'+currtype])+(envelope),envelope]);
                        seriesx[d.loadClass+'bottom'].push([d.firstRideTimeStamp,parseFloat(d[chartParams.driving+'_average_'+currtype])-(envelope),envelope]);
                    }
                })
                var base=3;
                for(var ls in seriesx){
                    seriesx[ls].map(d=>{
                        if((ls+'').indexOf('top')<0&&(ls+'').indexOf('bottom')<0){
                            times.push(d[0]);
                            return d;
                        }else if((ls+'').indexOf('top')>=0){
                            return d;
                        }else if((ls+'').indexOf('bottom')>=0){
                            return d;
                        }
                    })
                }
                console.log(times.length);
                times=[...new Set(times)].sort();
                console.log(times.length);
                var ssx=[];
                var sesx=[];

                for(var i in this.chartdata.loadClasses){
                    var idx2 = this.chartdata.loadClasses[i].replace('load','');
                    ssx=ssx.concat([{
                        name:'load'+idx2,
                        type: 'line',
                        data:seriesx[idx2+''].map(d=>{
                            d[1]=d[1]+base;
                            return d;
                        }).sort((v1,v2)=>{
                                if(Array.isArray(v1)&&Array.isArray(v2)){
                                    console.log('yes')
                                    return new Date(v1[0])-new Date(v2[0]);
                                }
                                return 0;
                            }),
                        hoverAnimation: false,
                        symbolSize: 6,
                        showSymbol: false
                    }]);
                    if(this.showdeviation){
                        ssx=ssx.concat([{
                            name: 'L'+idx2,
                            type: 'line',
                            data: seriesx[idx2+'bottom'].map(d=>{
                                d[1]=d[1]+base;
                                return d;
                            }).sort((v1,v2)=>{
                                if(Array.isArray(v1)&&Array.isArray(v2)){
                                    return new Date(v1[0])-new Date(v2[0]);
                                }
                                return 0;
                            }),
                            lineStyle: {
                                normal: {
                                    opacity: 0
                                }
                            },
                            stack: 'confidence-band'+idx2,
                            symbol: 'none'
                        }, {
                            name: 'U'+idx2,
                            type: 'line',
                            data:seriesx[idx2+'top'].map(d=>{
                                d[1]=2*d[2];
                                return d;
                            }).sort((v1,v2)=>{
                                if(Array.isArray(v1)&&Array.isArray(v2)){
                                    
                                    return new Date(v1[0])-new Date(v2[0]);
                                }
                                return 0;
                            }),
                            lineStyle: {
                                normal: {
                                    opacity: 0
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: 'rgb(162,237,238)'
                                }
                            },
                            stack: 'confidence-band'+idx2,
                            symbol: 'none'
                    }])
                    }
                }
                 var option = {
                    color:['#ED7C30','#80FF80','#FF8096','#800080'],
                    title: {
                        text: currtype
                    },
                    legend: {
                        data:this.chartdata['loadClasses'],
                        x:chartParams.legendalign
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#ccc',
                                borderColor: '#aaa',
                                borderWidth: 1,
                                shadowBlur: 0,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                textStyle: {
                                    color: '#222'
                                }
                            }
                        },
                        formatter: function (params) {
                            var date=new Date(parseInt(params[0].data[0]));
                            return 'X:'+date.getFullYear()+' '+(date.getMonth()+1)+'-'+date.getDate()+ '<br />Y:' 
                                + params[0].data[1]+'<br/>'+'Deviation:'+params[0].data[2];
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: times,
                        axisLabel: {
                            formatter: function (value, idx) {
                                var date = new Date(parseInt(value));
                                return value;
                            }
                            
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        axisLabel: {
                            formatter: function (val) {
                                return (val - base);
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return ((params.value - base) );
                                }
                            }
                        },
                        splitNumber: 3,
                        splitLine: {
                            show: false
                        }
                    },
                    series: ssx
                }
                var currcht = echarts.init(document.getElementById(chartParams.divids[idx]))
                currcht.setOption(option,true);
            }
        },

 

问题总结:
 

echarts 分成两列原因是 因为 xAxis没有排序,导致,而且保证数据对应,必须采用 xAxis 中有data属性,同时seriex中 有data属性,且第是数组,且数组里的数组第一个值是时间(x轴属性),第二个才是值

 

设置重新点击legend 事件

currcht.on('legendselectchanged', function(params) {
var option = this.getOption();
var select_key = Object.keys(params.selected);
var select_value = Object.values(params.selected);
if(showdeviation){
option.legend[0].selected[params.name] = true;
}
this.setOption(option)
})
x周坐标线颜色

axisLine:{
lineStyle:{color:'#ddd'}
}

实现动态问题:

myChart.on('legendselectchanged', function(params) {
// console.log(JSON.stringify(params));
var option = this.getOption();
// console.log(JSON.stringify(option));
var select_key = Object.keys(params.selected);
var select_value = Object.values(params.selected);
if(params.name=='邮件营销'){

option.series=option.series.filter(d=>{return d.name!='搜索引擎'})
console.log(option.series);
}
this.setOption(option,true);

})

 

修改版,

出错在于 应先调好的环境,查看实际的 数据打印出来,发现设置和 编译后并不同,以实际为准,在好的环境单独快速调试

                currcht.on('legendselectchanged', function(params) {
                    var option = this.getOption();console.log(option.series);
                    for(var key in params.selected){
                        option.series=option.series.filter(d=>{
                            if(d.name=='U'+key){
                                d.areaStyle.color=params.selected[key]?'rgb(162,237,238)':'#fff';
                            }
                            return true;
                        })
                    }
                    this.setOption(option,true);
                })

 

 5

1 echarts画3d图方法:
加载3dbar需要同时两个js
npm需要额外引入 echarts-gl
 
cnpm install echarts-gl

 var option = {
                    tooltip: {},
                    visualMap: {
                        max: 0.6,
                        inRange: {
                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                        }
                    },
                    xAxis3D: {
                        type: 'category',
                        data: Y
                    },
                    yAxis3D: {
                        type: 'category',
                        data: this.chartdata.firstRideTimeStamps
                    },
                    zAxis3D: {
                        type: 'value'
                    },
                    grid3D: {
                        boxWidth: 200,
                        boxDepth: 160,
                        viewControl: {
                            // projection: 'orthographic'
                        },
                        light: {
                            main: {
                                intensity: 1.2,
                                shadow: true
                            },
                            ambient: {
                                intensity: 0.3
                            }
                        }
                    },
                    series: [{
                        type: 'bar3D',
                        data: data,
                        shading: 'lambert',
                        label: {
                            textStyle: {
                                fontSize: 16,
                                borderWidth: 1
                            }
                        },
                        emphasis: {
                            label: {
                                textStyle: {
                                    fontSize: 20,
                                    color: '#900'
                                }
                            },
                            itemStyle: {
                                color: '#900'
                            }
                        }
                    }]
                }
                echarts.init(document.getElementById(chartParams.divids[idx])).setOption(option,true)

 

//使用透明度而不用颜色,则不会影响其他的 legend的数据
d.areaStyle.opacity=params.selected[key]?1:0;

保存图片和数据预览功能


toolbox: {
feature: {
dataView:{},
saveAsImage: {}
}
},

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!