echarts 相关

本文深入探讨了Echarts的各种组件配置,包括图表、坐标轴、图例、提示框、工具箱、数据区域缩放等,详细解析了各组件的属性与用法,帮助读者掌握Echarts的高级定制技巧。
摘要由CSDN通过智能技术生成

/*chart       是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等

 axis        直角坐标系中的一个坐标轴,坐标轴可分为类目轴和数值轴

 xAxis       直角坐标系中的横轴,通常并默认为类目轴

 yAxis       直角坐标系中的纵轴,通常并默认为数值轴

 grid        直角坐标系中除坐标轴外的绘图网格

 legend      图例,表述数据和图形的关联

 dataRange   值域选择,常用于展现地域数据时选择值域范围

 dataZoom    数据区域缩放,常用于展现大数据时选择可视范围

 toolbox     辅助工具箱,辅助功能,如添加标线,框选缩放等

 tooltip     气泡提示框,常用于展现更详细的数据

 timeline    时间轴,常用于展现同一组数据在时间维度上的多份数据

 series      数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据

 line        折线图,堆积折线图,区域图,堆积区域图。

 bar         柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图。

 scatter     散点图,气泡图。散点图至少需要横纵两个数据,更高维度数据加入时可以映射为颜色或大小,当映射到大小时则为气泡图

 k           K线图,蜡烛图。常用于展现股票交易数据。

 pie         饼图,圆环图。饼图支持两种(半径、面积)南丁格尔玫瑰图模式。

 radar       雷达图,填充雷达图。高维度数据展现的常用图表。

 chord       和弦图。常用于展现关系数据,外层为圆环图,可体现数据占比关系,内层为各个扇形间相互连接的弦,可体现关系数据

 force       力导布局图。常用于展现复杂关系网络聚类布局。

 map         地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用,如室内地图、运动场、物件构造等。*/

color=['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];//调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色

backgroundColor="#000000";   //背景色,默认无背景。 'rgb(128, 128, 128)', 'rgba(128, 128, 128, 0.5)',除了纯色之外颜色也支持渐变色和纹理填充

mytextStyle={

    color:"#333",                           //文字颜色

    fontStyle:"normal",                     //italic斜体  oblique倾斜

    fontWeight:"normal",                    //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...

    fontFamily:"sans-serif",                //字体系列

    fontSize:18,                              //字体大小

};

title={

    show:true,                                 //是否显示

    text:"大标题",                             //大标题

    subtext:"小标题",                          //小标题

    sublink:"http://www.baidu.com",          //小标题链接

    target:"blank",                            //'self' 当前窗口打开,'blank' 新窗口打开

    subtarget:"blank",                        //小标题打开链接的窗口

    textAlign:"center",                       //文本水平对齐

    textBaseline:"top",                       //文本垂直对齐

    textStyle:mytextStyle,                     //标题样式

    subtextStyle:mytextStyle,                 //小标题样式

    padding:5,                                  //标题内边距 5  [5, 10]  [5,10,5,10]

    itemGap:10,                                 //大小标题间距

    zlevel:0,                                   //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面

    z:2,                                         //所属组件的z分层,z值小的图形会被z值大的图形覆盖

    left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'

    top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

    right:"auto",                               //组件离容器右侧的距离,'20%'

    bottom:"auto",                              //组件离容器下侧的距离,'20%'

    backgroundColor:"transparent",            //标题背景色

    borderColor:"#ccc",                         //边框颜色

    borderWidth:0,                               //边框线宽

    shadowColor:"red",                          //阴影颜色

    shadowOffsetX:0,                            //阴影水平方向上的偏移距离

    shadowOffsetY:0,                            //阴影垂直方向上的偏移距离

    shadowBlur:10,                               //阴影的模糊大小

};

tooltip ={                                      //提示框组件

    trigger: 'item',                            //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。

    triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发

    showContent:true,                           //是否显示提示框浮层

    alwaysShowContent:true,                     //是否永远显示提示框内容

    showDelay:0,                                  //浮层显示的延迟,单位为 ms

    hideDelay:100,                                //浮层隐藏的延迟,单位为 ms

    enterable:false,                             //鼠标是否可进入提示框浮层中

    confine:false,                               //是否将 tooltip 框限制在图表的区域内

    transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动

    position:['50%', '50%'],                    //提示框浮层的位置

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值