echarts插件饼图，以及柱状折线图（可缩放）手机端

最新推荐文章于 2025-07-11 10:20:42 发布

原创

最新推荐文章于 2025-07-11 10:20:42 发布 · 5.6k 阅读

6 ·

CC 4.0 BY-SA版权

完整图（导航条可动画滑动）

饼图效果图

图1 饼图

柱折线图效果图

图2 全部（未缩放前）图3 缩放后

饼图参数

 var ordersPieChart= echarts.init(document.getElementById('ordersPieChart'));//初始化饼图div
    var oPieOptions={
        backgroundColor: '#fff',
        color: ['#27c6e3','#1d79da'],
        title:{
            show:true,
            text:'2018/07/05',
            right:0,
            top:0,
            z:3,
            textStyle:{
                color:'#333',
                fontFamily:"PingFangSC-Regular",
                fontWeight:"normal",
                fontSize:12
            }
        },
        series : [
            {
                name:'面审量',
                type:'pie',//饼图
                radius : '55%',//半径
                center: ['50%', '50%'],//位置
                data:[//数据 可根据项目情况封装
                    {
                        value:9,//值
                        name:"个人",//每个扇区的名称
                        code:1,//自定义属性 可在项目需要时添加
                        label: {//各扇区的标签
                            show:true,
                            position:'inside',//位置
                            padding:[-5,10,5,0],
                            normal: {
                                formatter:[ //自定义标签
                                    '{label|{b}:}{con1|{c}单}{row|}',//b是name值c是value值
                                    '{label|金额:}{con| 100万元}'
                                ].join('\n'),
                                rich:{//富文本编辑
                                    row:{ //  css类名样式
                                        height:10,
                                    },
                                    label:{
                                        color:"#333",