ECharts--给图表添加阴影

近期要做图表，我选择了 ECharts 做可视化图表，图表的样式有阴影。

html

//引入所需要的js

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

js

//饼图
app.title = '环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        data:['总量','使用']
    },
    backgroundColor:"#fff",
    color: ["#ececec","#fee529"],
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '42%'],
            avoidLabelOverlap: false,
            itemStyle: { 
                normal: {
                    // 设置扇形的阴影
                    shadowBlur: 30,
                    shadowColor: 'rgba(255,227,42,0.3)', 
                    shadowOffsetX: -5,
                    shadowOffsetY: 5

                }
            },
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '16',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:500, name:'总量'},
                {value:200, name:'使用'}
            ]
        }

    ]
};

这块代码主要是设置阴影的

itemStyle: { 
     normal: {
         // 设置扇形的阴影
         shadowBlur: 30,
         shadowColor: 'rgba(255,227,42,0.3)', 
         shadowOffsetX: -5,
         shadowOffsetY: 5

     }
 },

效果如下图所示

原文链接：https://blog.csdn.net/sx_lidan/article/details/81537477