viser 組合圖表的同一數據多條toolp的解決辦法

viser 圖表可以是通過<v-chart>標簽嵌套了多個圖表標簽生成組合圖表來達到UI的設計效果，

例如：曲線圖表+曲線面積圖表組合成帶線條的曲線面積圖表，代碼如下：

<v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :padding="[36, 0, 18, 0]">
        <v-tooltip :shared="false"/>
        <v-smooth-line position="x*y" :size="1" />
        <v-smooth-area position="x*y" :color="[[ 'l(270) 0:#9CC8FB 1:#0076FE']]"/>
      </v-chart>

當被嵌套的這2個圖表中的color屬性不一致時（包括一個有設置color屬性，另一個沒有），tooltip工具顯示的就會有2條相同的數據分別對應曲線圖表與曲線面積圖表，

 

 

這時可以有2個解決方案：

1、在<tooltip>標簽中設置：shared="false" 屬性【只展示一條tooltip】

2、2個圖表設置一樣的color屬性，但這個方法可能達不到UI設計的

 

 

 

總結：其實viser圖表其實就是通過<v-chart>標簽來配置各個圖表、tooltip、x/y軸、數據的展示圓點等來生成需要的圖表的,另外如果只有一組數據的話【一個圖例數據】，就算你嵌套了<v-legend/> 標簽也是不顯示圖例的

<v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
      <v-tooltip/> <!-- tooltip工具 -->
      <v-axis/> <!-- xy軸 -->
      <v-legend/> <!-- 圖例 -->
      <v-line position="type*y" color="x"/> <!-- 線性圖表 -->
      <v-point position="type*y" color="x" :size="4" :v-style="style" :shape="'circle'"/> <!-- 數據的展示圓點 -->
    </v-chart>