vue实现如下效果：用DataV写多个水位图（dv-water-level-pond），点击哪个水位图就改变它的css样式，而其他水位图样式不变

要实现这个效果，你可以使用Vue的条件渲染和动态绑定样式的功能，结合DataV的组件来实现。

首先，安装DataV和其所依赖的echarts和resize-observer-polyfill：

npm install @jiaminghi/data-view echarts resize-observer-polyfill --save

然后，在Vue组件中引入所需的DataV组件和样式：

<template>
  <div>
    <dv-water-level-pond
      v-for="(pond, index) in ponds"
      :key="index"
      :option="pondOption"
      :class="{ active: activeIndex === index }"
      @click="changeActive(index)"
    ></dv-water-level-pond>
  </div>
</template>

<script>
import { WaterLevelPond } from '@jiaminghi/data-view';

export default {
  components: {
    'dv-water-level-pond': WaterLevelPond
  },
  data() {
    return {
      activeIndex: null, // 初始化时没有选中的水位图
      ponds: [
        // 水位图配置...
      ]
    };
  },
  computed: {
    pondOption() {
      return {
        // 水位图的配置项...
      };
    }
  },
  methods: {
    changeActive(index) {
      this.activeIndex = index;
    }
  }
};
</script>

<style>
.active {
  /* 添加选中样式 */
}
</style>

在上面的代码中，我们使用了`dv-water-level-pond`组件来展示水位图。通过`v-for`指令遍历多个水位图，为每个水位图绑定点击事件，并根据`activeIndex`的值来动态添加`active`类的样式，以改变选中水位图的样式。

你可以根据具体的需求，在`ponds`数组中添加具体的水位图配置项。同时，你也可以根据DataV文档提供的API来进一步自定义水位图的样式和行为。