codecamp

ECharts导出图片的icon样式

toolbox.feature.saveAsImage.iconStyle.normal   |   Object

通过 normal 设置 ECharts 导出图片的 icon 样式。 

toolbox.feature.saveAsImage.iconStyle.normal.color   |   Color

[ default: 自适应 ]

设置图形的颜色。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充。
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

toolbox.feature.saveAsImage.iconStyle.normal.borderColor   |   Color

[ default: #666 ]

设置图形的描边颜色。支持的颜色格式同 color,不支持回调函数。

toolbox.feature.saveAsImage.iconStyle.normal.borderWidth   |   number

[ default: 1 ]

设置图形的描边线宽。为 0 时表示无描边。

toolbox.feature.saveAsImage.iconStyle.normal.borderType   |   string

[ default: 'solid' ]

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。

toolbox.feature.saveAsImage.iconStyle.normal.shadowBlur   |   number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.saveAsImage.iconStyle.normal.shadowColor   |   Color

图形阴影的颜色。支持的格式同color。

toolbox.feature.saveAsImage.iconStyle.normal.shadowOffsetX   |   number

[ default: 0 ]

图形阴影在水平方向上的偏移距离。

toolbox.feature.saveAsImage.iconStyle.normal.shadowOffsetY   |   number

[ default: 0 ]

图形阴影在垂直方向上的偏移距离。

toolbox.feature.saveAsImage.iconStyle.normal.opacity   |   number

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

toolbox.feature.saveAsImage.iconStyle.normal.textPosition   |   string

图形文本的位置,'left' / 'right' / 'top' / 'bottom'。

toolbox.feature.saveAsImage.iconStyle.normal.textAlign   |   string

图形文本的对齐方式,'left' / 'right'。

toolbox.feature.saveAsImage.iconStyle.emphasis   |   Object

通过 emphasis 设置 ECharts 导出图片的 icon 样式。

toolbox.feature.saveAsImage.iconStyle.emphasis.color   |   Color

[ default: 自适应 ]

设置图形的颜色。

颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充。
// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

toolbox.feature.saveAsImage.iconStyle.emphasis.borderColor   |   Color

[ default: "#000" ]

图形的描边颜色。支持的颜色格式同 color,不支持回调函数。

toolbox.feature.saveAsImage.iconStyle.emphasis.borderWidth   |   number

[ default: 0 ]

图形的描边线宽。为 0 时无描边。

toolbox.feature.saveAsImage.iconStyle.emphasis.borderType   |   string

[ default: 'solid' ]

柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowBlur   |   number

图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowColor   |   Color

图形阴影的颜色。支持的格式同color。

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowOffsetX   |   number

[ default: 0 ]

图形阴影在水平方向上的偏移距离。

toolbox.feature.saveAsImage.iconStyle.emphasis.shadowOffsetY   |   number

[ default: 0 ]

图形阴影在垂直方向上的偏移距离。

toolbox.feature.saveAsImage.iconStyle.emphasis.opacity   |   number

图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

ECharts工具栏的feature属性
设置ECharts配置项还原的icon样式
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }