echars水状_ECharts阴影设置

title.shadowBlur   |   number

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

示例：{

shadowColor: 'rgba(0, 0, 0, 0.5)',

shadowBlur: 10

}

注意：此配置项生效的前提是，设置了 show: true 以及值不为 tranparent 的背景色 backgroundColor。

title.shadowColor   |  Color

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

注意：此配置项生效的前提是，设置了 show: true。

title.shadowOffsetX   |  number

[ default: 0 ]

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

注意：此配置项生效的前提是，设置了 show: true。

title.shadowOffsetY   |  number

[ default: 0 ]

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

注意：此配置项生效的前提是，设置了 show: true。

饼状图设置阴影实例：

W3Cschool(www.w3cschool.cn)

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

backgroundColor: '#FAFAD2',

title: {

text: '国民营销信息来源渠道',

subtext: 'W3Cschool',

left: 'center',

//标题栏的高度，值越大，距离顶部的距离越大

top: 20,

//标题栏字体的颜色

textStyle: {

color: '#FFD700'

}

},

tooltip: {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

visualMap: {

show: false,

//饼图中在最大值最小值颜色范围中的亮度，值越大颜色越深

min: 10,

max: 600,

inRange: {

//0-1之间，值越小颜色越深

colorLightness: [0, 1]

}

},

series: [

{

//饼图中内容介绍

name: '客户访问来源',

//统计表的类型

type: 'pie',

//饼图的弧度，值越小生成的饼状图越小

radius: '60%',

//饼图生成后的位置

center: ['50%', '50%'],

data: [

{ value: 335, name: '直接访问' },

{ value: 310, name: '邮件营销' },

{ value: 274, name: '联盟广告' },

{ value: 235, name: '视频广告' },

{ value: 400, name: '搜索引擎' }

].sort(function (a, b) { return a.value - b.value; }),

roseType: 'radius',

//饼状图的外围标签

label: {

normal: {

textStyle: {

color: 'rgba(0, 0, 0, 0.3)'

}

}

},

//指向外围标签的线条

labelLine: {

normal: {

lineStyle: {

color: 'rgba(0, 0, 255, 0.3)'

},

smooth: 0.2,

length: 10,

length2: 20

}

},

itemStyle: {

normal: {

//具体决定了饼状图每一份的颜色显示

color: '#FFA07A',

//饼状图阴影，值越大阴影亮度越高

shadowBlur: 200,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

},

animationType: 'scale',

animationEasing: 'elasticOut',

//图表生成的随机时间

animationDelay: function (idx) {

return Math.random() * 200;

}

}

]

};;

if (option && typeof option === "object") {

myChart.setOption(option, true);

}

折线图设置阴影实例：

W3Cschool(www.w3cschool.cn)

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

legend: {

data: ['高度(km)与气温(°C)变化关系']

},

tooltip: {

trigger: 'axis',

formatter: 'Temperature :
{b}km : {c}°C'

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: {

type: 'value',

axisLabel: {

formatter: '{value} °C'

}

},

yAxis: {

type: 'category',

axisLine: { onZero: false },

axisLabel: {

formatter: '{value} km'

},

boundaryGap: false,

data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']

},

series: [

{

name: '高度(km)与气温(°C)变化关系',

type: 'line',

smooth: true,

lineStyle: {

width: 3,

shadowColor: 'rgba(0,0,0,0.4)',

shadowBlur: 10,

shadowOffsetY: 10

},

data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]

}

]

};

if (option && typeof option === "object") {

myChart.setOption(option, true);

}