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',
                    },
     .........完整代码请登录后点击上方下载按钮下载查看