手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏

沉迷...2025-04-25 19:08

通过html实现legend的样式 提供调用echarts的api实现与echarts图表交互的效果

实现饼图element实现类似于legend与echartstu表交互效果

效果图

配置代码

html 复制代码 
<template>
  <div style="height: 400px; width: 500px;background-color: #CCC;">
    <v-chart
      :option="options"
      autoresize
      style="width: 100%; height: 100%"
      ref="chart"
    />
    <div style="display: flex; margin-right: 20px">
      <div
        v-for="item in dataList"
        :key="item.name"
        style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"
        @mouseenter="handleMouseenter(item)"
        @mouseleave="handleMouseleave(item)"
        @click="handleClick(item)"
      >
        <i :style="{'background-color': item.isShow ? item.itemStyle.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i>
        <span style="margin-right:10px;">{{item.name}}</span>
        <span>{{item.value}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AboutView',
    data() {
      return{
        dataList: [
          { value: 1048, name: 'Search Engine',isShow: true,itemStyle: {color: '#006699'} },
          { value: 735, name: 'Direct',isShow: true,itemStyle: {color: '#009966'}  },
          { value: 580, name: 'Email',isShow: true,itemStyle: {color: '#FFCC00'}  },
        ]
      }
    },
    computed: {
      options() {
        return {
          tooltip: {
            trigger: 'item'
          },
          legend:{
            show: false
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['45%', '50%'],
              center: ['50%', '38.5%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data: this.dataList
            }
          ]
        }
      }
    },
    methods: {
      handleMouseenter(item){
        this.$refs.chart.dispatchAction({
            type: 'highlight',
            name: item.name,
            // seriesIndex: 1
            // dataIndex: 1
            // // 用 index 或 id 或 name 来指定系列。
            // // 可以使用数组指定多个系列。
            // seriesIndex?: number | number[],
            // seriesId?: string | string[],
            // seriesName?: string | string[],

            // // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
            // dataIndex?: number | number[],
            // // 可选，数据项名称，在有 dataIndex 的时候忽略
            // name?: string | string[],
        })
      },
      handleMouseleave(item){
        this.$refs.chart.dispatchAction({
            type: 'downplay',
            name: item.name,
            // seriesIndex: 1
            // dataIndex: 1
            // // 用 index 或 id 或 name 来指定系列。
            // // 可以使用数组指定多个系列。
            // seriesIndex?: number | number[],
            // seriesId?: string | string[],
            // seriesName?: string | string[],

            // // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
            // dataIndex?: number | number[],
            // // 可选，数据项名称，在有 dataIndex 的时候忽略
            // name?: string | string[],
        })
      },
      handleClick(item){
        item.isShow = !item.isShow
        this.$refs.chart.dispatchAction({
          type: 'legendToggleSelect',
          name: item.name,
          // // 用 index 或 id 或 name 来指定系列。
          // // 可以使用数组指定多个系列。
          // seriesIndex?: number | number[],
          // seriesId?: string | string[],
          // seriesName?: string | string[],

          // // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
          // dataIndex?: number | number[],
          // // 可选，数据项名称，在有 dataIndex 的时候忽略
          // name?: string | string[],
        })
      }
    }

  }
</script>

<style lang="scss" scoped>

</style>

通过js实现柱形图同一组数据时 隐藏某一个柱子

效果图

配置代码

html 复制代码 
<template>
  <div style="height: 400px; width: 500px;background-color: #CCC;">
    <v-chart
      :option="options"
      autoresize
      style="width: 100%; height: 100%"
      ref="chart"
    />
    <div style="display: flex; margin-right: 20px">
      <div
        v-for="item in dataList"
        :key="item.name"
        style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"
        @click="handleClick(item)"
        @mouseenter="handleMouseenter(item)"
        @mouseleave="handleMouseleave(item)"
      >
        <i :style="{'background-color': item.isShow ? item.itemStyle.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i>
        <span style="margin-right:10px;">{{item.name}}</span>
        <span>{{item.value}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AboutView',
    data() {
      return{
        dataList: [
          { value: 1048, name: 'Search Engine',isShow: true,itemStyle: {color: '#006699'} },
          { value: 735, name: 'Direct',isShow: true,itemStyle: {color: '#009966'}  },
          { value: 580, name: 'Email',isShow: true,itemStyle: {color: '#FFCC00'}  },
        ]
      }
    },
    computed: {
      options() {
        return {
          tooltip: {
            trigger: 'item'
          },
          legend:{
            show: false
          },
          xAxis: {
            type: 'category',
            data: this.computedSeriesData.map(item => item.name)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: 'Access From',
              type: 'bar',
              radius: ['45%', '50%'],
              center: ['50%', '38.5%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data: this.computedSeriesData
            }
          ]
        }
      },
      computedSeriesData() {
        return this.dataList.filter(item => item.isShow)
      }
    },
    methods: {
      handleClick(item){
        item.isShow = !item.isShow
      },
       handleMouseenter(item){
        this.$refs.chart.dispatchAction({
            type: 'highlight',
            name: item.name,
            // seriesIndex: 1
            // dataIndex: 1
            // // 用 index 或 id 或 name 来指定系列。
            // // 可以使用数组指定多个系列。
            // seriesIndex?: number | number[],
            // seriesId?: string | string[],
            // seriesName?: string | string[],

            // // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
            // dataIndex?: number | number[],
            // // 可选，数据项名称，在有 dataIndex 的时候忽略
            // name?: string | string[],
        })
      },
      handleMouseleave(item){
        this.$refs.chart.dispatchAction({
            type: 'downplay',
            name: item.name,
            // seriesIndex: 1
            // dataIndex: 1
            // // 用 index 或 id 或 name 来指定系列。
            // // 可以使用数组指定多个系列。
            // seriesIndex?: number | number[],
            // seriesId?: string | string[],
            // seriesName?: string | string[],

            // // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
            // dataIndex?: number | number[],
            // // 可选，数据项名称，在有 dataIndex 的时候忽略
            // name?: string | string[],
        })
      },
    }

  }
</script>

<style lang="scss" scoped>

</style>

通过js实现柱形图一组数据的显示隐藏 达到legend的效果

效果图


配置代码

html 复制代码 
<template>
  <div style="height: 400px; width: 500px;background-color: #CCC;">
    <v-chart
      :option="options"
      autoresize
      style="width: 100%; height: 100%"
      ref="chart"
    />
    <div style="display: flex; margin-right: 20px">
      <div
        v-for="item in legendList"
        :key="item.name"
        style="display: flex;align-items: center; margin-top: 10px; margin-right: 20px;cursor: pointer"
        @click="handleClick(item)"
        @mouseenter="handleMouseenter(item)"
        @mouseleave="handleMouseleave(item)"
      >
        <i :style="{'background-color': item.isShow ? item.color: '#CCC'}" style="width: 10px;height:10px;border-radius: 50%;margin-right: 5px"></i>
        <span style="margin-right:10px;">{{item.name}}</span>
        <span>{{item.value}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AboutView',
    data() {
      return{
        legendList: [
          { name: '测试1', isShow: true, color: '#00BFFF' },
          { name: '测试2', isShow: true, color: '#FFD700'},
        ],
        dataList1: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct'},
          { value: 580, name: 'Email'},
        ],
        dataList2: [
          { value: 800, name: 'Search Engine' },
          { value: 335, name: 'Direct'},
          { value: 1580, name: 'Email'},
        ]
      }
    },
    computed: {
      options() {
        return {
          tooltip: {
            trigger: 'item'
          },
          legend:{
            show: false
          },
          xAxis: {
            type: 'category',
            data: this.dataList1.map(item => item.name)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '测试1',
              type: 'bar',
              radius: ['45%', '50%'],
              center: ['50%', '38.5%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              itemStyle:{
                color: '#00BFFF'
              },
              data: this.dataList1
            },
            {
              name: '测试2',
              type: 'bar',
              radius: ['45%', '50%'],
              center: ['50%', '38.5%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              itemStyle:{
                color: '#FFD700'
              },
              data: this.dataList2
            }
          ]
        }
      },
    },
    methods: {
      handleClick(item){
        item.isShow = !item.isShow
        this.$refs.chart.dispatchAction({
          type: 'legendToggleSelect',
          // 图例名称
          name: item.name,

          // // 下列参数自 v5.6.0 起开始支持
          // // 图例组件ID
          // legendId: string,
          // // 图例组件索引
          // legendIndex: number,
          // // 图例组件名称
          // legendName: string
        })
      },
       handleMouseenter(item){
        this.$refs.chart.dispatchAction({
            type: 'highlight',
            seriesName: item.name
            // seriesIndex: 1
            // dataIndex: 1
            // // 用 index 或 id 或 name 来指定系列。
            // // 可以使用数组指定多个系列。
            // seriesIndex?: number | number[],
            // seriesId?: string | string[],
            // seriesName?: string | string[],

            // // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
            // dataIndex?: number | number[],
            // // 可选，数据项名称，在有 dataIndex 的时候忽略
            // name?: string | string[],
        })
      },
      handleMouseleave(item){
        this.$refs.chart.dispatchAction({
            type: 'downplay',
            seriesName: item.name
            // seriesIndex: 1
            // dataIndex: 1
            // // 用 index 或 id 或 name 来指定系列。
            // // 可以使用数组指定多个系列。
            // seriesIndex?: number | number[],
            // seriesId?: string | string[],
            // seriesName?: string | string[],

            // // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
            // dataIndex?: number | number[],
            // // 可选，数据项名称，在有 dataIndex 的时候忽略
            // name?: string | string[],
        })
      },
    }

  }
</script>

<style lang="scss" scoped>

</style>
相关推荐
子兮曰3 天前
jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周：7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后，我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时：一份没有历史的账本，回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解：从产生到安全，一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun （React + Umi3） 主站：十个坑的复盘
前端·javascript·react.js
李少兄3 天前
JavaScript 隐式全局变量解析
javascript
汉堡大王95273 天前
Jev：不是聊天机器人， 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据：Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02Telegram APK 下载安装完整指南 — 2026年最新03GitHub 镜像站点04蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接05历年考研数学一、数学二、数学三真题试卷及答案PDF062026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享07如何新建文件夹？ 电脑新建文件夹的4种方法08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新09人工智能（AI）发展史：详细里程碑102026年CSP-J初赛分数线-----预测