免费 AI IDE
ECharts阴影设置
2020-08-26 16:58 更新
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.w3cschool.cn)</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.w3cschool.cn)</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>以上内容是否对您有帮助：
更多建议：