首页 > 其他分享 >echarts 图表设置默认选中

echarts 图表设置默认选中

时间:2022-11-18 15:46:46浏览次数:80  
标签:myChart dispatchAction number 图表 图例 选中 type echarts

一、数据图形

import * as echarts from 'echarts'
const myChart = echarts.init(document.querySelector('pie'))

官方文档 events
官方文档 action

设置高亮

myChart.dispatchAction({
    type: "highlight",
    //seriesIndex:number | array系列 index,可以是一个数组指定多个系列
    seriesIndex: 0,
    //dataIndex:number 数据的 index
    dataIndex: 1
})

取消高亮

一般适用于设置默认高亮之后,点击图表之后,取消高亮

myChart.dispatchAction({
    type: "downplay",
    //seriesIndex:number | array   系列 index,可以是一个数组指定多个系列
    seriesIndex: 0,
    //dataIndex:number 数据的 index
    dataIndex: 1
})

二、图例

默认选中图例

myChart.dispatchAction({
    type: 'legendSelect',
    // 图例名称
    name: string
})

取消选中图例

myChart.dispatchAction({
    type: 'legendUnSelect',
    // 图例名称
    name: 'string'
})

切换图例选中状态

myChart.dispatchAction({
    type: 'legendToggleSelect',
    // 图例名称
    name: string
})

控制图例的滚动

myChart.dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

三、提示框 tip

显示提示框

myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: 1
})

说明
对echarts图表的数据进行更新

let option = myChart.getOption()
// 这里可以直接设置option里的各项配置
...
myChart.setOption(option)

上面是直接更新图表,如果需要让图表进行重绘,则需要

myChart.clear()
myChart.setOption(option)

标签:myChart,dispatchAction,number,图表,图例,选中,type,echarts
From: https://www.cnblogs.com/echohye/p/16903434.html

相关文章

  • 关于VMware的将主机虚拟适配器连接到次网络无法选中的问题
    这个问题的原因可能是,你之前卸载VMware的时候,没有卸载完全,所以注册表还存在一些相关的垃圾这里需要用到CCleaner  然后就可以勾上了  ......
  • Echarts横向柱状图,带标题
    效果图:   首先安装echarts,看官网安装文档即可然后要用的文件引入一下import*asechartsfrom'echarts';我用的vue3,setup放标签里的     代码如......
  • element-ui 对话框dialog里使用echarts,报错'dom没有获取到'?
    给el-dialog添加@open="open()"在刚进入页面的时候对话框是关闭的,echarts不进行获取dom,当点击对话框出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数......
  • echarts饼图
    一、需求(图中的点去掉了)  外层的壳createEchart1(){letchartDom=document.getElementById('echart1');myChart1=echarts.init(chartDom);......
  • Python绘制精美可视化数据分析图表(一)-Matplotlib
    前言数据分析是指用适当的统计分析方法对收集来的大量数据进行分析,提取有用信息和形成结论而对数据加以详细研究和概括总结的过程.这一过程也是质量管理体系的支持过程.在实......
  • Zabbix5.0版本监控图表乱码问题
    Zabbix5.0管理界面提供多语种支持,切换中文可以通过如下操作完成:Usersettings→Users →Language→Chinese(zh_CN)→Update。中文界面中有一个小问题,就是汉字不能正常显......
  • vue+echarts绘制地图
    代码实现importchinaJsonfrom'echarts/map/json/china.json'exportdefault{mounted(){letmyChart=this.$echarts.init(document.getElementById("......
  • React+echarts (echarts-for-react) 画中国地图及省份切换
    有足够的地图数据,可以点击到街道,示例我只出到市级以umi为框架,版本是:"react":"^18.2.0","umi":"^4.0.29","echarts":"^5.4.0","echarts-for-rea......
  • ECharts基础概念
    简要介绍下ECharts中的基础概念:1、echarts实例:一个网页中可以创建多个echarts实例。每个echarts实例中可以创建多个图表和坐标系等。dom节点作为echarts的渲染容器,......
  • Python量化中用pyecharts画K线示例
    首先需要安装Python软件,以及pyecharts库相关教程链接:龙哥量化:文档目录(股票,期货,通达信、同花顺、文华等软件使用,Python量化交易,策略编写,学习文档,策略案例等等) 1"""......