echarts实现饼状图散片可拖动效果代码-html代码-BFW代码库

echarts实现饼状图散片可拖动效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现饼状图散片可拖动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
</head>
<body>
    <div id="myChart" style="width: 800px; height: 600px;"></div>

    <script type="text/javascript">
        var chart = echarts.init(document.getElementById('myChart'));

        var originData = [{
            value: 335,
            name: '直接访问'
        },
            {
                value: 310,
                name: '邮件营销'
            },
            {
                value: 234,
                name: '联盟广告'
            },
            {
                value: 135,
                name: '视频广告'
            },
            {
                value: 1548,
                name: '搜索引擎'
            },
        ];

        var color = ['#4a6dbf', '#15b3bc', '#f37a18', '#83c775', ' #fcb552'];

        originData.forEach(function(list, i) {
            list.itemStyle = {
                color: color[i],
            };
        });

        var data = [].slice.call(originData)

        var option = {
            tooltip: {},
            toolbox: {
                feature: {
                    myRestore: {
                        show: true,
                        title: '还原',
                        icon: 'M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5',
                        onclick: refreshChart,
                    },
                },
            },
            legend: {
                // 图例
                icon: 'rect',
                data: [],
                itemWidth: 12,
                itemHeight: 12,
                bottom: 'bottom',
            },
            grid: {
                top: '5%',
                left: '5%',
                right: '5%',
                bottom: '40',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                splitLine: {
                    // grid上每一条竖轴线
                    show: true,
                    interval: 'auto',
                    lineStyle: {
                        color: '#e8e8e8',
                    },
                },
                axisLine: {
                    // x刻度上方的横轴线
                    lineStyle: {
                        color: '#e8e8e8',
                    },
                },
                axisLabel: {
                    // x轴的刻度
                    textStyle: {
                        color: '#999',
                    },
                },
                data: [],
            },
            yAxis: {
                type: 'value',
                boundaryGap: false,
                axisLine: {
                    // y刻度上方的横轴线
                    lineStyle: {
                        color: '#e8e8e8',
                    },
                },
                splitLine: {
                    // grid上每一条竖轴线
                    lineStyle: {
                        color: '#e8e8e8',
                    },
                },
                axisLabel: {
                    // y轴的刻度
                    textStyle: {
                        color: '#999',
                    },
                },
            },
            series: [{
                name: 'pie',
                type: 'pie',
                center: ['50%',
                    '45%'],
                radius: ['0',
                    '45%'],
                data: data,
            },
                {
                    name: '模拟一个pie容器',
                    type: 'pie',
                    center: ['50%',
                        '45%'],
                    radius: ['0',
                        '49%'],
                    cursor: 'default',
                    hoverAnimation: true,
                    hoverOffset: 2,
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    tooltip: {
                        padding: 0,
                        formatter: function() {
                            return '';
                        },
                    },
                    z: 0,
                    data: [{
                        value: 0,
                        name: '容器',
                        itemStyle: {
                            color: '#000',
                            opacity: '.1',
                        },
                    }],
                }],
        };

        chart.setOption(option, true);

        var sector = null; // 鼠标点击选中的扇形
        var sectorIndex; // 选中扇形在data中的index
        var sx; // 原型横坐标距离鼠标位置横坐标的偏移距离
        var sy; // 原型纵坐标距离鼠标位置纵坐标的偏移距离
        var zr = chart.getZr(); // 生成一个zrender实例
        var circleData = null; // 记录鼠标选中的小圆点的数据
        var circleEl = []; // 保存生成的小圆点的数据，注意目前只有push.........完整代码请登录后点击上方下载按钮下载查看