viser 图例 点击事件 反选

这个功能在网上查了半天，得到的最多的一句回答就是viser的文档太简洁了，放弃viser吧.....

最后盯着viser文档，实现了一个比较low的方案，仅供参考。

主要是看到了v-legend有一个属性api为useHtml

相信看到这里你就猜到了我都方案了，对的，你没猜错，使用document原生api操作dom树

实现：

<template>
  <div ref='divRef'>
  <button @click="all">all</button>
    <v-chart 
     :force-fit="true"
    :height="height" :data="data" :scale="scale">
      <v-tooltip />
      <v-axis />
      <v-legend :allowAllCanceled="true" :useHtml="true"/>
      <v-line position="month*temperature" color="city" />
      <v-point position="month*temperature" color="city" :size="4" :v-style="style" :shape="'circle'" />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set');

const sourceData = [
  { month: 'Jan', E: 7.0, F: 3.9, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Feb', E: 6.9, F: 4.2, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Mar', E: 9.5, F: 5.7, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Apr', E: 14.5, F: 8.5, A: 1.0, B: 2, C:3,D:4 },
  { month: 'May', E: 18.4, F: 11.9, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Jun', E: 21.5, F: 15.2, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Jul', E: 25.2, F: 17.0, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Aug', E: 26.5, F: 16.6, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Sep', E: 23.3, F: 14.2, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Oct', E: 18.3, F: 10.3, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Nov', E: 13.9, F: 6.6, A: 1.0, B: 2, C:3,D:4 },
  { month: 'Dec', E: 9.6, F: 4.8, A: 1.0, B: 2, C:3,D:4 },
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: 'fold',
  fields: ['E', 'F','A','B','C','D'],
  key: 'city',
  value: 'temperature',
});
const data = dv.rows;

const scale = [{
  dataKey: 'month',
  min: 0,
  max: 1,
}];

export default {
  data() {
    return {
      data,
      scale,
      height: 400,
      style: { stroke: '#fff', lineWidth: 1 },
    };
  },
  methods: {
      all(){
          const lis = document.getElementsByClassName('g2-legend-list-item')
          for(let item of lis){
              item.click()
          }
      }
      
  }
};

效果图：

样式自己优化下下啦~，内网代码无法拷贝