ECharts的学习（二）：制作一个简单的饼状图，并对其设置样式

来源：互联网发布：去黑头收缩毛孔知乎编辑：程序博客网时间：2024/05/23 02:05
这是学习ECharts的练手之作，中文学习网址：http://echarts.baidu.com/index.html
实现效果图如下：
这里写图片描述
<!DOCTYPE html><html>    <head>    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />    <!-- 引入 ECharts 文件 -->    <script src="js/echarts.js"></script>    <script src="js/jquery-3.0.0.min.js"></script></head><style type="text/css">    html,body{        margin:0;        padding: 0;    }    .chartContainer{        width:100%;        height:13rem;        border:1px solid pink;        box-sizing:border-box;    }</style>    <body>        <div class="chartContainer" id="chart1">        </div>    </body>    <script type="text/javascript">    //初始化echarts实例    var chart1=$("#chart1").get(0);    var myChart=echarts.init(chart1);    //对echarts做基础配置    myChart.setOption({        //背景色是全局的，所以直接在 option 下设置 backgroundColor,一开始放在series里面没有效果        backgroundColor:'#2c343c',         visualMap:{            show:false, // 不显示 visualMap 组件，只用于明暗度的映射            min:80,// 映射的最小值为 80            max:600,// 映射的最大值为 600            inRange:{                colorLightness:[0,1] // 明暗度的范围是 0 到 1            }        },        series:[{            name:"访问来源",            type:"pie",            radius:"55%",            roseType: 'angle',//此字段表示南丁格尔图（通过半径表示数据大小）            itemStyle:{                normal:{//正常情况下的样式                    shadowBlur:200,//阴影的大小                    shadowOffsetx:0,//阴影水平方向上的偏移                    shadowOffsetY:0,//阴影垂直方向上的偏移                    shadowColor:"rgba(0,0,0,0.5)",                    color:"pink" //设置扇叶整体颜色                },                emphasis:{//鼠标hover的高亮时候的样式                    shadowBlur:400,                    shadowColor:"rgba(0,0,0,1)"                }            },            label:{                normal:{                    textStyle:{                        color:"rgba(255,255,255,0.3)",                        fontSize:"12"                    }                }            },            labelLine:{//跟itemStyle一样，label和labelLine的样式也有normal和emphasis两个状态。                normal:{                    lineStyle:{                        color:"rgba(255,255,255,0.3)"                    }                }            },            data:[                {                    value:400,                    name:"搜索引擎",                    /*itemStyle:{                        normal:{                            color:"red"                        }                    }*/                },                {                    value:340,                    name:"直接访问",                    /*itemStyle:{                        normal:{                            color:"blue"                        }                    }*/                },                {                    value:310,                    name:"邮件营销",                    /*itemStyle:{                        normal:{                            color:"green"                        }                    }*/                },                {                    value:140,                    name:"联盟广告",                    /*itemStyle:{                        normal:{                            color:"pink"                        }                    }*/                },                {                    value:230,                    name:"视频广告",                    /*itemStyle:{                        normal:{                            color:"yellow"                        }                    }*/                },            ]        }]    });    </script></html>
0 0