Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts中tooltip参数用法介绍

tooltip: {
  show: true,           // 是否显示提示框组件
  trigger: 'axis',        // 触发类型('item',数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用;'axis',坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用;'none',不触发。)
  axisPointer: {
    type: 'cross',        // 指示器类型('line' 直线指示器;'shadow' 阴影指示器;'none' 无指示器;'cross' 十字准星指示器。)
    snap: false,        // 坐标轴指示器是否自动吸附到点上。默认自动判断。
    label: {
      margin: 10,       // label 距离轴的距离
      color: '#FFF',      // 文字的颜色
      fontStyle: 'normal',  // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) 
      fontWeight: 'normal',   // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
      fontSize: '20',     // 文字字体大小
      lineHeight: '50',     // 行高 
      padding = [5, 7, 5, 7], // 内边距,单位px 
      backgroundColor = 'auto',// 文本标签的背景颜色
    },
    animation: true,      // 是否开启动画
    animationDuration: 1000,  // 初始动画时长
    animationDurationUpdate: 200,// 数据更新动画的时长
  },
  showContent: true,        // 是否显示提示框浮层,默认显示
  alwaysShowContent: true,    // 是否永远显示提示框内容,默认情况下在移出可触发提示框区域后一定时间后隐藏
  triggerOn: 'mousemove|click',   // 提示框触发的条件('mousemove',鼠标移动时触发;'click',鼠标点击时触发;'mousemove|click',同时鼠标移动和点击时触发;'none',不在 'mousemove' 或 'click' 时触发)
  confine: true,          // 是否将 tooltip 框限制在图表的区域内
  backgroundColor: 'rgba(50,50,50,0.7)',  // 提示框浮层的背景颜色
  padding: 5,           // 提示框浮层内边距,单位px
  textStyle: {
    color: '#FFF',        // 文字的颜色
    fontStyle: 'normal',    // 文字字体的风格('normal',无样式;'italic',斜体;'oblique',倾斜字体) 
    fontWeight: 'normal',     // 文字字体的粗细('normal',无样式;'bold',加粗;'bolder',加粗的基础上再加粗;'lighter',变细;数字定义粗细也可以,取值范围100至700)
    fontSize: '20',       // 文字字体大小
    lineHeight: '50',       // 行高 
  },
  formatter: function (params) {
    //自定义
    var result = ''
    return result
  }
}
点击展开全文

相关文章

  1. 百度Echarts事件处理方法介绍
  2. 百度Echarts数据集dataset的基本用法
  3. 百度Echarts修改颜色主题
  4. 百度Echarts柱形图series参数用法介绍
  5. 百度Echarts中dataZoom纵向滚动条参数用法介绍