Echarts各种属性的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../bootstrapJ/global/plugins/echarts-2.2.7/build/dist/echarts-all.js"></script>
    <!-- <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>-->
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="box" style="height:400px;width:600px;padding: 20px"></div>
</body>
<script>
    // 获取到这个DOM节点，然后初始化

    var myChart = echarts.init(document.getElementById("box"));
   var option = {
        tooltip : {
            show:true,
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985' //实现折线图鼠标移入显示的颜色
                }
            }
        },
       //调整折线图的位置
       grid: {
           top:"20px",
           left: '2%',
           right: '9%',
           bottom: '5%',
           containLabel: true
       },
        legend: {
            orient: 'vertical',
            //  data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
            data:[''],//echarts 不显示


        },

        toolbox: {
            show : true,
            feature : {
               // mark : {show: true},
                //dataView : {show: true, readOnly: false},
               //magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
               // restore : {show: true},
               // saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                axisLine: {
                    symbol: ['none', 'arrow'], //设置x轴或y轴箭头
                    lineStyle: {
                        color: '#B5B5B5',
                        width: 2, //这里是为了突出显示加上的
                    }
                },
                //刻度是向内还是向外
                axisTick:{
                    inside:true,
                    length:1,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',
                        color:'#FCFCFC',//网格颜色
                    }
                },
                axisLabel:{ //调整x轴的lable
                    //interval:0,  //按x轴的长度显示的刻度的个数    例如：本来显示20个刻度，因为x轴端只显示了10个，
                    rotate:0,  //实现x轴的刻度的标识实现旋转，
                    textStyle:{
                        fontSize:10,// 让字体变大
                        color:"#B5B5B5"
                    }
                },
                name: "(日期)",
                nameTextStyle: {
                    color: "#B5B5B5",
                    verticalAlign: "bottom",
                    fontSize:'10',
                    padding:[35,50,10,-2] //设置x轴的标题的位置
                },
                boundaryGap : false,
                data:['2016-01','2016-07','2016-08','2016-09']
               // data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'VALUE',
                splitNumber:2,//所以将 splitNumber设成3
                axisLine: {
                    symbol: ['none', 'arrow'],
                    lineStyle: {
                        color: '#B5B5B5',
                        width: 2, //这里是为了突出显示加上的
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',//
                        color:'#FCFCFC'///网格颜色
                    }
                },
                //刻度是向内还是向外
                axisTick:{
                    inside:true,
                    length:1,
                },
                axisLabel:{ //调整x轴的lable
                    textStyle:{
                        fontSize:10,// 让字体变大
                        color:"#B5B5B5"
                    }
                },
                name: "(人数)",
                nameLocation:"end",  //实现标题显示的位置
                nameTextStyle:{
                    color: "#B5B5B5",
                    fontSize:10,
                    //                   verticalAlign: 'top',
                    //                  align:"left",
                    padding:[50,0,-6,0]
                },
                //axisLine : {onZero: false},
              /*  boundaryGap : false,
                axisLabel : {
                    formatter: '{value} '
                },
                data:['AA-','AA','AA+']*/

            }
        ],
        series : [

            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                smooth:true,
                itemStyle : {
                    normal : {
                        color:'#5787EB',//设置折线折点颜色
                        lineStyle:{
                            color:'#5787EB'//设置折线线条颜色
                        }
                    }
                },
                data:[5820, 832, 801, 834]
                //data:['aa','AA']
            }
        ]
    };

    myChart.setOption(option);
</script>

</html>
Echarts各种属性的设置

猜你喜欢
