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 事件
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: {}
}
},
来源：https://www.cnblogs.com/genestart/p/11177239.html