ECharts_02_饼图

1.演示

这里写图片描述
2.代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../js/echarts.js" ></script>
        <title></title>
    </head>
    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 600px;height:400px;"></div>

        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            //背景设置
            backgroundColor: '#2c343c',

            //饼图标题设置
            title: {
                text: '饼图', //标题文本
                left: 'center',//标题位置（left,center,right）
                top: 20,      //位置调整
                textStyle: { 
                    color: '#ccc'  //标题文本颜色
                }
            },          
            //提示框组件
            tooltip : {
                //触发条件
                //   item 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
                //   axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                trigger: 'item', 

                //格式化输出 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            //视觉映射组件
            visualMap: {
                //是否显示 visualMap-continuous 组件
                show: false,
                //指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
                min: 80,
                max: 600,
                //定义 在选中范围中 的视觉元素。（用户可以和 visualMap 组件交互，用鼠标或触摸选择范围）
                inRange: {
                    //颜色的明暗度
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name: '访问来源', //系列名称
                    type: 'pie',   //饼图
                    radius: '55%',
                    data:[
                        {value:235, name:'视频广告'},
                        {value:274, name:'联盟广告'},
                        {value:310, name:'邮件营销'},
                        {value:335, name:'直接访问'},
                        {value:400, name:'搜索引擎'}
                    ],

                    //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
                    //radius 扇区圆心角展现数据的百分比，半径展现数据的大小
                    //area 所有扇区圆心角相同，仅通过半径展现数据大小
                    roseType: 'radius',



                    //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 1)'
                            }
                        }
                    },
                    //标签的视觉引导线样式
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    //
                    itemStyle: {
                        normal: {
                            //饼图颜色
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        </script>
    </body>
</html>
1.演示

2.代码

猜你喜欢
