码迷,mamicode.com
首页 > 其他好文 > 详细

Echart 带坐标轴带图标的柱状图

时间:2018-02-19 23:48:44      阅读:1598      评论:0      收藏:0      [点我收藏+]

标签:com   option   orm   png   line   legend   enter   图片   readonly   

主要过了一遍ECharts的教程,顺带写了个Demo 数据都是假的

技术分享图片

 

        var pasttime={
            ‘PC‘:‘./img/pc.png‘,
            ‘Pad‘:‘./img/pad.png‘,
            ‘Mobile‘:‘./img/mobile.png‘,
            ‘Book‘:‘./img/book.png‘

        };

        var seriesLabel = {
            normal: {
                show: true,
                textBorderColor: ‘#000‘,
                textBorderWidth: 1
            }
        }

        var myChart=echarts.init(document.getElementById(‘myIconChart‘));
        var option={
            //标题
            title:{
                text:‘春节休闲方式‘
            },
            //提示框
            tooltip:{
                trigger:‘axis‘,                //axis:坐标轴|item:数据项|none:无
                axisPointer:{                   //坐标轴指示器配置项
                    type:‘shadow‘               //line:直线|shadow:阴影|cross:十字准星
                }
            },
            //图例
            legend:{
                data:[‘男性‘,‘女性‘,‘儿童‘]
            },
            //
            grid:{
                left:80
            },
            //工具栏
            toolbox:{
                show:true,
                itemSize:20,
                feature:{
                    saveAsImage:{},
                    dataView:{readOnly:true}
                }
            },
            //X坐标轴
            xAxis:{
                type:‘value‘,                   //value:数值|category:类目轴|time:时间轴|log:对数轴
                name:‘人数‘,
                axisLabel:{
                    formatter:‘{value}‘
                }
            },
            yAxis:{
                type:‘category‘,
                inverse:true,                    //反向坐标
                data:[‘PC‘,‘Pad‘,‘Mobile‘,‘Book‘],
                axisLabel:{
                    formatter:function(value){
                        return ‘{‘+value+‘|}\n{value|‘+value+‘}‘;
                    },
                    margin:20,
                    rich:{
                        value:{
                            lineHeight:30,
                            align:‘center‘
                        },
                        PC:{
                            height:40,
                            align:‘center‘,
                            backgroundColor:{
                                image:pasttime.PC
                            }
                        },
                        Pad:{
                            height:40,
                            align:‘center‘,
                            backgroundColor:{
                                image:pasttime.Pad
                            }
                        },
                        Mobile:{
                            height:40,
                            align:‘center‘,
                            backgroundColor:{
                                image:pasttime.Mobile
                            }
                        },
                        Book:{
                            height:40,
                            align:‘center‘,
                            backgroundColor:{
                                image:pasttime.Book
                            }
                        }
                    }
                }
            },
            //系列列表。每个系列通过 type 决定自己的图表类型
            series:[
                {
                    name:‘男性‘,
                    type:‘bar‘,
                    data:[220,130,160,30],
                    label: seriesLabel
                },
                {
                    name:‘女性‘,
                    type:‘bar‘,
                    data:[120,130,180,50],
                    label: seriesLabel
                },
                {
                    name:‘儿童‘,
                    type:‘bar‘,
                    data:[70,110,140,210],
                    label: seriesLabel
                }
            ]
        }

        myChart.setOption(option);

 

Echart 带坐标轴带图标的柱状图

标签:com   option   orm   png   line   legend   enter   图片   readonly   

原文地址:https://www.cnblogs.com/CoffeeEddy/p/8454642.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!