阴影设置
编辑教程阴影设置
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>JSRUN(jsrun.net)</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></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: 'JSRUN',
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>JSRUN(jsrun.net)</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:300px;width:450px"></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>
Mos固件,小电视必刷固件
ES6 教程
Vue.js 教程
JSON 教程
jQuery 教程
HTML 教程
HTML 5 教程
CSS 教程
CSS3 教程
JavaScript 教程
DHTML 教程
JSON在线格式化工具
JS在线运行
JSON解析格式化
jsfiddle中国国内版本
JS代码在线运行
PHP代码在线运行
Java代码在线运行
C语言代码在线运行
C++代码在线运行
Python代码在线运行
Go语言代码在线运行
C#代码在线运行
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。
大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
选择支付方式:
立即支付
¥
9.99
无法付款,请点击这里
金额: 0 元
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟