viser横坐标自动收缩_viser的细节记录

最近做了个可视化的项目，用到的框架是ts+ react+ viser+mobx ，过程中在使用viser的时候，有一些细节的东西，在这里作个记录。

一：viser是什么？

viser就是一个可视化工具，如果你熟悉echarts，viser就比较简单了，但是，现在viser的官方文档api讲解的不是那么的详细，有些东西你还要自己去摸索才能得到。

二：viser的一些细节

1：viser组件的重新加载

viser因为是做图表展示的，底层就是用canvans绘出来的，所以，有时候，你写了一个组件，却发现有数据传入的时候，图标不能自适应(只出现在初始状态)，这样的话，需要一个来解决，解决的原理就是，给组件抛出一个重新加载的函数，这样，组件重新渲染，就可以了，函数为：

componentDidUpdate() {

setTimeout(() => {

const e = document.createEvent('Event')

e.initEvent('resize', true, true)

window.dispatchEvent(e)

}, 10);

}

2： 自定义tooltip：

我们写的组件，鼠标划上去之后，有时候需要给数据加上%，或者单位，或者重新整理数据展示，这时候，我们需要自定义tooltip满足我们的需求，比如，我这里需要给我的ytd执行率加上%；

tooltipPercentageShow = (title, items, all = true) => {

var html = '

';

var titleDom = '

' + title + '

';

var listDom = '

• ';

for (var i = 0; i < items.length; i++) {

var item = items[i];

var itemDom = `

` + ' ' + ' ' + title + '' + ' ' + item.value + '%' + '' + '';

listDom += itemDom;

}

listDom += '

';

return html + titleDom + listDom + '

';

};

自定义tooltip，就需要重新给class定义样式，一般，我会给父元素一个class名，然后，父组件下面的tooltip元素才改变样式，代码是：

.ytd_chart_container_toltip,.ytd_modal_chart_container_tooltip{

.g2-tooltip {

position: absolute;

background-color: rgba(255, 255, 255, 0.9);

border-radius: 3px;

color: rgb(87, 87, 87);

font-size: 12px;

line-height: 20px;

padding: 10px 10px 6px 10px;

z-index: 999;

.g2-tooltip-title {

white-space: nowrap;

}

}

.g2-tooltip-list {

margin: 0;

padding: 0;

list-style-type: none;

}

.g2-tooltip-list-li-display{

display: flex;

justify-content: space-between;

align-items: center;

}

.g2-tooltip-statistic {

font-size: 14px;

padding-bottom: 10px;

margin-top: 10px;

list-style-type: none;

}

.g2-tooltip-statistic-value {

font-weight: 'bold';

display: 'inline-block';

float: right;

margin-left: 30px

}

}

如果tooltips上面不仅要展示金额，并且金额需要一定的规则显示，比如这样：

那么，可以处理成：

tooltipPercentageShow = (title, items, all = true) => {

var html = '

';

var titleDom = '

' + title + '

';

var listDom = '

• ';

for (var i = 0; i < items.length; i++) {

var item = items[i];

const nStr = `${item.value}`;

const x = nStr.split('.');

let x1 = x[0];

const x2 = x.length >