echarts图标相关

图标类型参考地址：

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，设置其他的选项的选择与否。

五、环形图环内文本设置

  1.使用griphic 设置文本内容

graphic: [{
type: 'text',
left: 'center',
top: '50%',
style: {
text: data.zxtgPercent * 100 + '%',
fill: '#000',
width: 30,
height: 30,
fontSize: 24,
fontWeight:200
}
}, {
type: 'text',
left: 'center',
top: '62%',
style: {
text: '通过率',
fill: '#000',
width: 30,
height: 30,
fontSize: 12,
}
}],

多行内容使用griphic组，单个就是用一个即可。