Echarts各种属性的设置

爱被打了一巴掌 2022-05-26 06:20 324阅读 0赞

<!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>
         </head>
    <body>
     <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>