阅读(3293)
赞(1)
ECharts阴影设置
2017-08-31 18:11:16 更新
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。
饼状图设置阴影实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>W3Cschool(www.zijiebao.com)</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script type="text/javascript">
// 基于准备好的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} <br/>{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);
}
</script>
</body>
</html>折线图设置阴影实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>W3Cschool(www.zijiebao.com)</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel="external nofollow" rel="external nofollow" ></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
legend: {
data: ['高度(km)与气温(°C)变化关系']
},
tooltip: {
trigger: 'axis',
formatter: 'Temperature : <br/>{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);
}
</script>
</body>
</html>