vue js自定义一个类似echart图表的颜色筛选器

最新推荐文章于 2023-09-19 18:03:38 发布

Lan.W

最新推荐文章于 2023-09-19 18:03:38 发布

阅读量231

点赞数

分类专栏： vue2 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/LlanyW/article/details/128128596

版权

vue2 专栏收录该内容

21 篇文章

订阅专栏

效果：

源码：

<template>
  <div style="display:flex;width: 90%;height: 55px;margin: 50px">
    <div style="font-size:5px;width:150px;display:flex;justify-self: flex-start"
         v-for="(name,index) in projectList" :key="index">
      <div v-if="name!=null" style="cursor:pointer;display: flex;justify-self:flex-start;padding-left: 5px ">
        <div @click='changeColor(name,index)' :id="name"
             class="box2" :style="{cursor:'pointer',background: colors[index],'margin-right':'3px'}">
        </div>
        {{ name }}
      </div>
      <div style="width: 3px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectorChart",
  data() {
    return {
      colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#0000FF', '#008000', '#800080', '#FFA500',
        '#00FFFF', '#808080', '#D2691E', '#8FBC8F', '#FF1493', '#00BFFF', '#FFB6C1', '#B0C4DE',
        '#191970', '#6B8E23', '#BC8F8F', '#3C3C3C', '#600000', '#9F0050', '#750075', '#4B0091',
        '#4F4F4F', '#750000', '#BF0060', '#930093', '#5B00AE', '#5B5B5B', '#930000', '#D9006C',
        '#AE00AE', '#6F00D2', '#6C6C6C', '#AE0000'],
      projectList: ['项目DD', '项目BB', '项目AA', '项目CC', '项目FF', '项目SHE']
    }
  },
  methods: {
    changeColor(name, index) {
      console.log('onClick color div')
    }
  }
}
</script>

<style scoped>

.box2 {
  width: 25px;
  height: 15px;
  line-height: 20px;
  border-radius: 4px;
}

</style>