echarts详细设置

theme = {
    // 全图默认背景
    // 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}(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,
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 的图例(legend)功能是指用于显示图表中各个系列的名称以及颜色区分,方便用户对图表中的元素进行区分和分析的工具。通过合理的设置图例,可以有效地提高图表的可读性和可用性。下面,我们来对 Echarts 的图例设置进行详细介绍。 一、基本设置Echarts 中,我们可以通过 legend 属性进行图例的基本设置。legend 属性有一个 data 属性,用于指定图例的名称以及颜色。例如,在下面的代码中,我们可以通过设置 legend 的 data 属性为 ['销售额'] 来为图表添加一个单一的图例,用于显示销售额的名称和颜色。 ``` option = { legend: { data: ['销售额'] }, series: [{ name: '销售额', type: 'pie', data: [] }] } ``` 在上面的代码中,我们还要将 series 中的每个系列的 name 属性设置为同一个名称,以便和图例显示的名称一致。 二、位置设置 除了基本设置之外,Echarts 还提供了多种位置设置方式,用于控制图例的显示位置。我们可以通过设置 legend 的 x 属性控制图例的横坐标位置,通过设置 legend 的 y 属性控制图例的纵坐标位置。例如,在下面的代码中,我们可以通过设置 legend 的 x 属性为 'right',y 属性为 'center',将图例设置在图表的右侧中央位置。 ``` option = { legend: { x: 'right', y: 'center', data: ['销售额'] }, series: [{ name: '销售额', type: 'pie', data: [] }] } ``` 除了设置横坐标和纵坐标之外,我们还可以通过设置 orient 属性来控制图例的显示方向,例如,设置 orient 属性为 'vertical',可以将图例设置为垂直方向。 ``` option = { legend: { orient: 'vertical', x: 'right', y: 'center', data: ['销售额'] }, series: [{ name: '销售额', type: 'pie', data: [] }] } ``` 三、样式设置 除了位置设置之外,Echarts 还提供了多种样式设置方式,用于控制图例的显示样式。我们可以通过设置 textStyle 属性来控制图例文本的字体样式、颜色等。例如,在下面的代码中,我们将图例文本的字体颜色设置为 'red'。 ``` option = { legend: { textStyle: { color: 'red' }, data: ['销售额'] }, series: [{ name: '销售额', type: 'pie', data: [] }] } ``` 除了设置 textStyle 属性之外,我们还可以通过设置 itemWidth 和 itemHeight 属性来控制图例的宽度和高度,通过设置 selectedMode 属性来控制是否默认选中某个系列,通过设置 selected 属性来控制默认选中哪个系列等。 四、高级设置 除了基本设置、位置设置和样式设置之外,Echarts 还提供了许多高级设置方式,用于进一步优化图例的显示效果。例如,我们可以通过设置 showDelay 和 hideDelay 属性来控制图例的显示和隐藏延迟时间,通过设置 padding 属性来控制图例内部的间距等。 综上所述,通过合理的 Echarts 图例设置,可以有效地提高图表的可读性和可用性,方便用户对图表中的元素进行区分和分析。值得注意的是,图例设置需要根据实际需求进行灵活的调整,以达到最佳的显示效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值