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

x轴类型有三种(y轴类似)
1 category 类目轴,适用于离散的类目数据 ,就是x周的类别是自定义的,都是字符串,需要通过data设置类目数据 与series 中data对应,data是一维数组 demo

2 time 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。 data是二维数组,第一个数值对应x轴 demo

3 value ,数值轴,适用于连续的数据,是数据类型的数据 与series 中data对应,data是二维数组,第一个数值对应x轴 同上

x y轴翻转,就是 xAxis与yAxis的设置 交换一下; 柱图和条形图之间可以相互转换

堆叠图 对应的属性是series 中的stack,默认为null,如果不为空,就堆叠显示
// 全图默认背景

// 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: {
    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'                             // 主标题文字颜色
    },
    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'                              // 图例文字颜色
    }
},

// 值域

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}&
  • 4
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值