常用eharts图表展示方法(内附5个常用样例)

最近项目中大量运用了图表的东西,现贴出几个demo,供大家参考,如有类似需求的童鞋,直接拿走不谢。点击进入echarts官方网址demo将下面的代码直接复制粘贴即可

1.效果图:
这里写图片描述

option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            x:'center',
            y: 'bottom',
            data:['百度','腾讯',"阿里","百度百分比","腾讯百分比",'阿里百分比']
        },
        xAxis: [
            {
                type: 'category',
                data: ['05/01','05/08','05/15','05/22','05/29','06/05','06/12'],
                axisPointer: {
                    type: 'none'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '亿\n元',
                min: 0,
                max: 100,
                interval: 20,
            },
            {
                type: 'value',
                name: '百\n分\n比',
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value}%'
                }
            }
        ],
        series: [
            {
                name:'百度',
                type:'bar',
                yAxisIndex: 0,
                data:[12,34,23,21,21,23,12]
            },
            {
                name:'腾讯',
                type:'bar',
                yAxisIndex: 0,
                data:[13,23,34,21,2,45,23]
            },
            {
                name:'阿里',
                type:'bar',
                yAxisIndex: 0,
                data:[25,57,57,42,23,68,35]
            },
            {
                name:'百度百分比',
                type:'line',
                yAxisIndex: 1,
                data:[12,34,23,21,21,23,12]
            },
            {
                name:'腾讯百分比',
                type:'line',
                yAxisIndex: 1,
                data:[13,23,34,21,2,45,23]
            },
            {
                name:'阿里百分比',
                type:'line',
                yAxisIndex: 1,
                data:[25,57,57,42,23,68,35]
            }
        ]
    };

2.效果图
这里写图片描述

var weekPoundateDataset = {
    "工资": [9, 8, 7, 8, 4],
    "绩效": [3, 4, 6, 2, 6]
};
var  weekPoundateKey = ['2016/06/01','2016/06/03','2016/06/05','2016/06/07','2016/06/09'];
var  weekPoundateSum=[];
var  weekPoundateData1 = {};
for (var x in weekPoundateDataset["工资"]) {
    weekPoundateSum[x] = weekPoundateDataset["工资"][x]+weekPoundateDataset["绩效"][x];
    weekPoundateData1[weekPoundateKey[x]] = weekPoundateSum[x];
}

option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'none'        // 默认为直线,可选为:'line' | 'shadow'
            },
        },
        legend: {
            x:'center',
            y: 'bottom',
            data:['工资','绩效','总收入','工资百分比','绩效百分比']
        },
        grid: {
            right: '4%',
            bottom: '8%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['2016/06/01','2016/06/03','2016/06/05','2016/06/07','2016/06/09']
            }
        ],
        yAxis : [
            {
                type : 'value',
                name: '万\n元',
                min: 0,
                max: 15,
                interval: 3,
            },
            {
                type: 'value',
                name: '百\n分\n比',
                min: 0,
                max: 100,
                interval: 20,
                axisLabel: {
                    formatter: '{value}%'
                },
            }
        ],
        series : [
            {
                name:'工资',
                type:'bar',
                barWidth : 40,
                stack: '收入',
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: function(params) {
                            return Math.round(params.value/weekPoundateData1[params.name]*1000)/10+"%";
                        },
                        textStyle:{color:'black'}
                    }
                },
                data:[9, 8,7,8,4]
            },
            {
                name:'绩效',
                type:'bar',
                stack: '收入',
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: function(params) {
                            return Math.round(params.value/weekPoundateData1[params.name]*1000)/10+"%";
                        },
                        textStyle:{color:'black'}
                    }
                },
                data:[3, 4, 6, 2, 6]
            },
            {
                name:'总收入',
                type:'line',
                yAxisIndex: 0,
                data:[12,12,13,10,10]
            },
            {
                name:'工资百分比',
                type:'line',
                yAxisIndex:1,
                data:[75,66.7,53.8,80,40],
            },
            {
                name:'绩效百分比',
                type:'line',
                yAxisIndex:1,
                data:[25,33.3,46.2,20,60]
            }
        ],
        color:['#4f81bc','#f79647','red','green','blue']
    };

3.效果图
这里写图片描述

ption = {
        title: {
            text: '万\n元'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            x:'center',
            y: 'bottom',
            data:['网络支付','移动支付','跨境支付','金融业务','搜索引擎']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2016-01-05','2016-01-06','2016-01-07','2016-01-08','2016-01-09','2016-01-10','2016-01-11','2016-01-12','2016-01-13','2016-01-14','2016-01-15','2016-01-16','2016-01-17','2016-01-18','2016-01-19'],
            axisLabel: {
                interval:0,
                rotate:40
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'网络支付',
                type:'line',
                data:[120, 132, 101, 134, 90, 230, 210,243,212,234,245,231,233,323,211,112,115,355,221]
            },
            {
                name:'移动支付',
                type:'line',
                data:[220, 182, 191, 234, 290, 330, 310,231,234,211,245,234,321,234,111,124,232,235,676]
            },
            {
                name:'跨境支付',
                type:'line',
                data:[150, 232, 201, 154, 190, 330, 410,221,335,486,433,222,111,233,455,444,333,222,333]
            },
            {
                name:'金融业务',
                type:'line',
                data:[320, 332, 301, 334, 390, 330, 320,231,124,353,231,132,342,233,455,423,123,123,334]
            }
        ]
    };

4.效果图
这里写图片描述

option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            x:'center',
            y: 'bottom',
            data:['工行','中行',"建行","农行","招行",'总计','总计折线']
        },
        xAxis: [
            {
                type: 'category',
                data: ['05/01','05/08','05/15','05/22','05/29','06/05','06/12'],
                axisPointer: {
                    type: 'none'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '万\n元',
            }
        ],
        series: [
            {
                name:'工行',
                type:'bar',
                data:[12,34,23,21,21,23,12]
            },
            {
                name:'中行',
                type:'bar',
                data:[13,23,34,21,2,45,23]
            },
            {
                name:'建行',
                type:'bar',
                data:[25,57,57,42,23,68,35]
            },
            {
                name:'农行',
                type:'bar',
                data:[12,34,23,21,21,23,12]
            },
            {
                name:'招行',
                type:'bar',
                data:[13,23,34,21,2,45,23]
            },
            {
                name:'总计',
                type:'bar',
                data:[225,257,257,242,223,268,235]
            },
            {
                name:'总计折线',
                type:'line',
                yAxisIndex: 0,
                data:[225,257,257,242,223,268,235]
            }
        ]
    };

5.效果图
这里写图片描述

option = {
        title : {
            subtext:'单位:万元',
            x:'right'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            bottom: 'left',
            data: ['中国建设银行','中国工商银行','中国农业银行','招商银行','中国邮政储蓄银行','中国银行','平安银行','交通银行','中国民生银行','其他']
        },
        series : [
            {
                name:'行业分布',
                type: 'pie',
                radius : '45%',
                center: ['50%', '40%'],
                data:[
                    {value:2324.34, name:'中国建设银行'},
                    {value:3434.33, name:'中国工商银行'},
                    {value:22332, name:'中国农业银行'},
                    {value:44545, name:'招商银行'},
                    {value:4900, name:'中国邮政储蓄银行'},
                    {value:55663, name:'中国银行'},
                    {value:34343, name:'平安银行'},
                    {value:58596, name:'交通银行'},
                    {value:2323, name:'中国民生银行'},
                    {value:5983, name:'其他'}
                ],

                itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            formatter: function (params) {
                                return params.value;
                            }
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
发布了54 篇原创文章 · 获赞 83 · 访问量 14万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览