echarts3报表

wyr123789

浏览: 38113 次
性别:

最近访客更多访客>>

oooot04

jianli021

a1002323289

遥远的想念

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<html>    <div id="main" style="width: 100%;height:400px;"></div></html>

<script type="text/javascript" src="../js/v3.0/js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="../js/v3.0/js/echarts.common.min.js"></script>
<script>
// 指定图表的配置项和数据
        var option = {
        baseOption: {
            title: {
                text: '日销量'
            },
            tooltip: {},/*配置提示框*/
            legend: {
                data: ["衬衫","羊毛衫"]
            },
            xAxis: {
            axisLabel :{
    interval:0,
     rotate:45
} ,
            nameGap:1,
                data: ["2016/05/08","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12","2016/005/13","2016/05/09","2016/05/10","2016/05/11","2016/05/12"]
            },
            yAxis: {},
            series: [
            {
                name: '衬衫',
                type: 'line',/*图表类型 bar(柱状图),line(line)*/
                data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10] /*数量*/
            },
{
                name: '羊毛衫',
                type: 'line',/*图表类型 bar(柱状图),line(line)*/
                data: [20, 5, 60, 70, 40, 30, 5, 60, 70, 40] /*数量*/

}]
          },
          media: [/*兼容app端*/
            {
                option: {
                    legend: {
                        right: 'center',
                        bottom: "0%",
                        orient: 'horizontal'
                    },
                    series: [
                        {
                            radius: [20, '50%'],
                            center: ['25%', '50%']
                        },
                        {
                            radius: [30, '50%'],
                            center: ['75%', '50%']
                        }
                    ]
                }
            },
            {
                query: {
                    minAspectRatio: 1
                },
                option: {
                    legend: {
                        right: 'center',
                        top: "0%",
                        orient: 'horizontal'
                    },
                    series: [
                        {
                            radius: [20, '50%'],
                            center: ['25%', '50%']
                        },
                        {
                            radius: [30, '50%'],
                            center: ['75%', '50%']
                        }
                    ]
                }
            },
            {
                query: {
                    maxAspectRatio: 1
                },
                option: {
                    legend: {
                        right: 'center',
                        top: 0,
                        orient: 'horizontal'
                    },
                    series: [
                        {
                            radius: [20, '50%'],
                            center: ['50%', '30%']
                        },
                        {
                            radius: [30, '50%'],
                            center: ['50%', '70%']
                        }
                    ]
                }
            },
            {
                query: {
                    maxWidth: 500
                },
                option: {
                    legend: {
top:0,
right:"20%",
                        orient: 'horizontal'
                    },
                    series: [
                        {
                            radius: [20, '50%'],
                            center: ['50%', '30%']
                        },
                        {
                            radius: [30, '50%'],
                            center: ['50%', '75%']
                        }
                    ]
                }
            }
        ]
        };
</script>

分享到：