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} 
{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

     }
 },

效果如下图所示
ECharts--给图表添加阴影_第1张图片

你可能感兴趣的:(ECharts)