图标类型参考地址:
http://echarts.baidu.com/echarts2/doc/doc.html
知识点一:
堆叠柱状图与普通柱状图的区别在于:
堆叠柱状图 在series中需要设置 “stack:'XX'”,如:
{
name:'你好',
type:'bar',
barWidth: 20,
stack: '遗留',
label: labelOption,
data:undoOfLastMonthT
},
知识点二:
环形图设置鼠标悬停时不展示百分比的设置方法:
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
其中,({d}%)就是悬停是括号中的百分比展示,去掉就可以了
知识点三、
图的点击事件:
借鉴地址:https://www.cnblogs.com/qingcui277/p/9895282.html;
利用echarts提供的新API convertFromPixel完美解决。
这种方法借助于convertFromPixel和zr来实现需要的效果,实现方法如下:
this.echart.getZr().on('click',params=>{
const pointInPixel= [params.offsetX, params.offsetY];
if (this.echart.containPixel('grid',pointInPixel)) {
let xIndex=this.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
/*事件处理代码书写位置*/
}
});
实现的代码解释如下:
使用getZr添加图表的整个canvas区域的点击事件,并获取params携带的信息:
this.echart.getZr().on('click',params=>{})
获取到鼠标点击位置:
const pointInPixel= [params.offsetX, params.offsetY];
使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,比如X、Y轴lable、空白位置等的点击事件。
if (this.echart.containPixel('grid',pointInPixel)) {}
使用API convertFromPixel获取点击位置对应的x轴数据的索引值,我的实现是借助于索引值的,当然可以获取到其它的信息,详细请查看文档。
let xIndex=this.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
四、设置图例只选择一个的方法
1)添加selectMode :'single',
例如:
selectedMode: 'single',
selected: {
'回风温度': false,
'室外温度': false,
'室外湿度': false
}
2)重写legend的点击事件
myChart.on('legendselectchanged', function(obj) {
});
根据参数中获取到的name,设置其他的选项的选择与否。