当前位置:   article > 正文

echarts属性的设置(完整大全)

echarts散点图点设置css属性

// 全图默认背景 

// backgroundColor: ‘rgba(0,0,0,0)’,
// 默认色板
color: [ '#ff7f50' , '#87cefa' , '#da70d6' , '#32cd32' , '#6495ed' ,
     '#ff69b4' , '#ba55d3' , '#cd5c5c' , '#ffa500' , '#40e0d0' ,
     '#1e90ff' , '#ff6347' , '#7b68ee' , '#00fa9a' , '#ffd700' ,
     '#6699FF' , '#ff6666' , '#3cb371' , '#b8860b' , '#30e0e0' ],
 
// 图表标题
title: {
    
    text:'标题文本', //主標題
     x:  'left' ,                 // 水平安放位置,默认为左对齐,可选为:
                       // 'center' ¦ 'left' ¦ 'right'
                       // ¦ {number}(x坐标,单位px)
     y:  'top' ,              // 垂直安放位置,默认为全图顶端,可选为:
                       // 'top' ¦ 'bottom' ¦ 'center'
                       // ¦ {number}(y坐标,单位px)
     //textAlign: null          // 水平对齐方式,默认根据x设置自动调整
     backgroundColor:  'rgba(0,0,0,0)' ,
     borderColor:  '#ccc' ,           // 标题边框颜色
     borderWidth: 0,            // 标题边框线宽,单位px,默认为0(无边框)
     padding: 5,              // 标题内边距,单位px,默认各方向内边距为5,
                               // 接受数组分别设定上右下左边距,同css
     itemGap: 10,              // 主副标题纵向间隔,单位px,默认为10,
     textStyle: {
         fontSize: 18,
         fontWeight:  'bolder' ,
         color:  '#333'                              // 主标题文字颜色
     },
    
    subtext:'副标题',
     subtextStyle: {
         color:  '#aaa'                             // 副标题文字颜色
     }
},
 
// 图例
legend: {
     orient:  'horizontal' ,           // 布局方式,默认为水平布局,可选为:
                        // 'horizontal' ¦ 'vertical'
     x:  'center' ,                 // 水平安放位置,默认为全图居中,可选为:
                               // 'center' ¦ 'left' ¦ 'right'
                        // ¦ {number}(x坐标,单位px)
     y:  'top' ,               // 垂直安放位置,默认为全图顶端,可选为:
                        // 'top' ¦ 'bottom' ¦ 'center'
                        // ¦ {number}(y坐标,单位px)
     backgroundColor:  'rgba(0,0,0,0)' ,
     borderColor:  '#ccc' ,             // 图例边框颜色
     borderWidth: 0,                 // 图例边框线宽,单位px,默认为0(无边框)
     padding: 5,                   // 图例内边距,单位px,默认各方向内边距为5,
                                // 接受数组分别设定上右下左边距,同css
     itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
                         // 横向布局时为水平间隔,纵向布局时为纵向间隔
     itemWidth: 20,              // 图例图形宽度
     itemHeight: 14,             // 图例图形高度
     textStyle: {
         color:  '#333'                               // 图例文字颜色
     },
    icon: "circle",   //  这个字段控制形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
},
 
// 值域
dataRange: {
     orient:  'vertical' ,              // 布局方式,默认为垂直布局,可选为:
                         // 'horizontal' ¦ 'vertical'
     x:  'left' ,                    // 水平安放位置,默认为全图左对齐,可选为:
                         // 'center' ¦ 'left' ¦ 'right'
                         // ¦ {number}(x坐标,单位px)
     y:  'bottom' ,                   // 垂直安放位置,默认为全图底部,可选为:
                          // 'top' ¦ 'bottom' ¦ 'center'
                          // ¦ {number}(y坐标,单位px)
     backgroundColor:  'rgba(0,0,0,0)' ,
     borderColor:  '#ccc' ,              // 值域边框颜色
     borderWidth: 0,                  // 值域边框线宽,单位px,默认为0(无边框)
     padding: 5,                     // 值域内边距,单位px,默认各方向内边距为5,
                          // 接受数组分别设定上右下左边距,同css
     itemGap: 10,                // 各个item之间的间隔,单位px,默认为10,
                         // 横向布局时为水平间隔,纵向布局时为纵向间隔
     itemWidth: 20,              // 值域图形宽度,线性渐变水平布局宽度为该值 * 10
     itemHeight: 14,             // 值域图形高度,线性渐变垂直布局高度为该值 * 10
     splitNumber: 5,             // 分割段数,默认为5,为0时为线性渐变
     color:[ '#1e90ff' , '#f0ffff' ], //颜色
     //text:['高','低'],              // 文本,默认为数值文本
     textStyle: {
         color:  '#333'                                 // 值域文字颜色
     }
},
 
toolbox: {
     orient:  'horizontal' ,             // 布局方式,默认为水平布局,可选为:
                         // 'horizontal' ¦ 'vertical'
     x:  'right' ,               // 水平安放位置,默认为全图右对齐,可选为:
                         // 'center' ¦ 'left' ¦ 'right'
                         // ¦ {number}(x坐标,单位px)
     y:  'top' ,                // 垂直安放位置,默认为全图顶端,可选为:
                         // 'top' ¦ 'bottom' ¦ 'center'
                         // ¦ {number}(y坐标,单位px)
     color : [ '#1e90ff' , '#22bb22' , '#4b0082' , '#d2691e' ],
     backgroundColor:  'rgba(0,0,0,0)' ,     // 工具箱背景颜色
     borderColor:  '#ccc' ,              // 工具箱边框颜色
     borderWidth: 0,                  // 工具箱边框线宽,单位px,默认为0(无边框)
     padding: 5,                     // 工具箱内边距,单位px,默认各方向内边距为5,
                                 // 接受数组分别设定上右下左边距,同css
     itemGap: 10,                   // 各个item之间的间隔,单位px,默认为10,
                                 // 横向布局时为水平间隔,纵向布局时为纵向间隔
     itemSize: 16,               // 工具箱图形宽度
     featureImageIcon : {},             // 自定义图片icon
     featureTitle : {
         mark :  '辅助线开关' ,
         markUndo :  '删除辅助线' ,
         markClear :  '清空辅助线' ,
         dataZoom :  '区域缩放' ,
         dataZoomReset :  '区域缩放后退' ,
         dataView :  '数据视图' ,
         lineChart :  '折线图切换' ,
         barChart :  '柱形图切换' ,
         restore :  '还原' ,
         saveAsImage :  '保存为图片'
     }
},
 
// 提示框
tooltip: {
     trigger:  'item' ,            // 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis'
     showDelay: 20,              // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
     hideDelay: 100,             // 隐藏延迟,单位ms
     transitionDuration : 0.4,          // 动画变换时间,单位s
    
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号