Echarts tooltip配置项的属性 图表悬浮框

简介: Echarts tooltip配置项的属性 图表悬浮框

这个小图标就是tooltip的配置项 tooltip:{} //默认样式


自定义显示数据

如果没有自定义的属性可以 只是写data [1254,1551,574,10]…

series: {//图表配置项 如大小,图表类型
            name: '图表名字',
            type: 'bar',//图表类型
            data: [{
              value: '454',
              time: '2012-11-12'
            },
            {
              value: '898',
              time: '2020-5-17'
            },
            {
              value: '514',
              time: '2022-1-22'
            },
            {
              value: '548',
              time: '2013-1-30'
            }, {
              value: '518',
              time: '2012-11-12'
            }]
            //自定义属性 
          },
            tooltip: {
       formatter(params) {
              console.log(params)
              return params.data.time
              // return '<h1>123</h1>' //自定义元素
            }
          }

params里的值


设置触发类型 悬浮框显示的方式

鼠标到柱子上触发

trigger: 'item'//默认 

坐标轴触发 鼠标居然到列显示

trigger: 'axis'//坐标轴触发 


坐标轴指示器

axisPointer:
            {
              type: 'line'//默认效果
            }

十字准星效果

type: 'cross'//默认效果

阴影效果

type: 'shadow'//阴影效果

设置悬浮层样式 背景颜色 字体

backgroundColor: 'red',//背景颜色
textStyle: {
  color: 'white',//字体颜色  
},
//......


关闭显示悬浮框

关后将不会显示上面的那个悬浮框

showContent: false

相关文章
|
2月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
108 0
|
13天前
|
JavaScript 前端开发 搜索推荐
ECharts词云图(案例一)+配置项详解
ECharts,百度的JavaScript图表库,支持词云图(自5.0版起),借助`echarts-wordcloud`插件。配置词云图涉及`tooltip`(如显示、颜色、边框等)和`series`(类型、形状、大小范围等)。示例代码展示了如何在HTML中引入依赖并配置词云图,包括数据、形状、大小、颜色等。完整代码和依赖可下载。调整这些配置可创建个性化词云图。参阅官方文档获取不同版本详情。
56 4
 ECharts词云图(案例一)+配置项详解
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
2天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
|
6天前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
15 0
|
2月前
|
容器
echarts图表怎样实现刷新功能?
echarts图表怎样实现刷新功能?
|
2月前
|
数据可视化 JavaScript 前端开发
Echarts是一个开源的JavaScript可视化库,用于创建各种类型的图表
Echarts是JavaScript的开源可视化库,Python通过Pyecharts库可调用它来绘制图表。示例展示了如何用Pyecharts创建柱状图:定义图表对象,设置标题和坐标轴,添加X轴、Y轴数据,最后渲染展示。Pyecharts还支持折线图、散点图、饼图等多种图表类型,更多详情可查阅官方文档。
60 0
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
49 0
|
2月前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
32 0
|
2月前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
64 0