Echarts图表通用配置

title: 图表标题组件,显示大字标题、
tooltip: 提示框组件,增强用户体验,增加用户提示,当用户鼠标滑至或点击图表时弹出显示库,显示出阅读帮助信息。
toolbox: 工具按钮组件
legend:图例组件

1.title标题组件:

控制文字样式:textStyle 控制文字标题位置:left-top-bottom-right 控制标题边框:borderColor-borderRadius-borderWidth
以下内容皆配置在option对象下
    //标题组件
    title:{ 
        text: 'titleName',
        textStyle:{  //标题样式
            color: 'pink'
            },
        borderColor: '#1e3' ,  //边框颜色
        borderRadius: 5,  //边框圆角
        borderWidth: 5 , //边框宽度
        left:100,
        top:10},

2.tooltip提示框组件:

  • 触发类型:trigger item:鼠标必须要移入到每条柱子上才显示提示信息。 axis:鼠标只要移入坐标轴就显示提示信息。
tooltip:{  
       //trigger:'axis'
      trigger:'item'
      },
  • 触发时机:triggerOn click:用户点击柱子的时候才显示提示框内容 mouseover:默认方式,用户鼠标滑过时显示提示框内容
tooltip:{
       //trigger:'axis'
      trigger:'item'
      },
  • 格式化数据展示:formatter(在提示框中个性化展示你想输出给用户看的数据,一般搭配字符串模板进行使用,也可以用函数的形式)
https://www.jianshu.com/p/a3466a1b0329

3.toolbox工具栏组件:

由echarts官方提供,内置有导出图片(下载到本地)、数据视图(查看和修改原生数据)、动态类型图表的切换、数据区域显示缩放与还原、数据还原重置等五个工具供用户使用。
toolbox:{//显示工具栏按钮
    feature:{ 
        saveAsImage:{} ,//开启下载功能,将图表以图片的形式下载下来存储到本地
        dataView:{},  //开启视图展示功能,方便查看原生数据和修改原生数据
        restore:{}, //开启重置视图功能,恢复
        dataZoom:{},  //开启视图缩放功能以及恢复功能,选中图表进行缩放
        magicType:{  //开启图表的动态类型转换功能type:['bar','line'] //柱状图与折线图的切换
        }
    }
},

4.legend 图例组件:

用于筛选series系列数组里面的对象,legend组件需要搭配series使用
legend中的data是一个数组,legend中的data的值必须要和series数组中的某组数据的name值保持一致,不然无法显示图例组件
点赞

当前页面评论已关闭。

隐藏
变装