Echart 随便写的
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: {}
}
},
