Question

求图片中网页效果代码

求图片中网页效果代码，圆形统计图 鼠标点到的 地方放大 坐等大侠
是网页中实现这种特效 不是手机中哦

Answer 1

利用ECharts可以很好的实现这个功能。

利用内置的嵌套饼图可以实现该效果，

测试数据代码：

option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['AA','BB','CC','DD','EE','FF','GG','HH','II','JJ']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : false,
    series : [
        {
            name:'s1',
            type:'pie',
            selectedMode: 'single',
            radius : [0, 70],
            
            // for funnel
            x: '20%',
            width: '40%',
            funnelAlign: 'right',
            max: 1548,
            
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner'
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data:[
                {value:335, name:'s2'},
                {value:679, name:'s3'},
                {value:1548, name:'s4', selected:true}
            ]
        },
        {
            name:'s5',
            type:'pie',
            radius : [100, 140],
            
            // for funnel
            x: '60%',
            width: '35%',
            funnelAlign: 'left',
            max: 1048,
            
            data:[
                {value:335, name:'11'},
                {value:310, name:'22'},
                {value:234, name:'33'},
                {value:135, name:'44'},
                {value:1048, name:'55'},
                {value:251, name:'66'},
                {value:147, name:'77'},
                {value:102, name:'88'}
            ]
        }
    ]
};
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){
    var selected = param.selected;
    var serie;
    var str = '当前选择： ';
    for (var idx in selected) {
        serie = option.series[idx];
        for (var i = 0, l = serie.data.length; i < l; i++) {
            if (selected[idx][i]) {
                str += '【系列' + idx + '】' + serie.name + ' : ' + 
                       '【数据' + i + '】' + serie.data[i].name + ' ';
            }
        }
    }
    document.getElementById('wrong-message').innerHTML = str;
})

效果：

ECharts (Enterprise Charts 商业产品图表库)

提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。