zoukankan      html  css  js  c++  java
  • echarts中显示效果option中必有的属性

    写一个最简单的效果让option中不可缺少的属性。

    var option = {
            xAxis:[ //x轴,数组对象,其下至少有一个对象
                {.....}
            ],
            yAxis:[//y轴,数组对象,其下可以有空对象
                {.....}
            ],
            series :[//驱动图表生成的数据内容数组,其下至少有一个对象
                {}
            ]
     }

    写一个小demo

    var option ={
                xAxis:[
                    {
                        name:'test',
                        type:'category',
                        position:'left',
                        show:true,
                        data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis:[
                    {
                        type : 'value',
                        position: 'left'
    
                    }
                ],
                series : [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
     }

    效果图如下:

    当没有xAxis时候

    var option ={
                //注意此时没有xAxis
                yAxis:[
                    {
                        type : 'value',
                        position: 'left'
    
                    }
                ],
                series : [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
     }

    效果图如下:

    当没有yAxis时候或者yAxis数组下没对象时

         当没有yAxis时

        

    var option ={
                xAxis:[
                    {
                        name:'test',
                        type:'category',
                        position:'left',
                        show:true,
                        data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                //注意此时没有yAxis
                series : [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
    }

    效果图如下:

         当yAxis数组下没对象时

        

    var option ={
                xAxis:[
                    {
                        name:'test',
                        type:'category',
                        position:'left',
                        show:true,
                        data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis:[//注意此时yAxis数组下没对象时
    
                ],
                series : [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
     }

    效果图如下

    当没有series时

          当没有series 时候是没有数据,可想而知肯定是不会出效果的,效果如下所示,同时也不会出现x轴和y轴,即只会出现空白。

  • 相关阅读:
    zoj 3593 One Person Game
    poj 2115 C Looooops
    hdu 1576 A/B
    hdu 2669 Romantic
    poj1006 Biorhythms
    中国剩余定理(孙子定理)
    Pseudoprime numbers---费马小定理
    青蛙的约会----POJ1061
    [POJ2942]:Knights of the Round Table(塔尖+二分图染色法)
    [BZOJ1718]:[Usaco2006 Jan] Redundant Paths 分离的路径(塔尖)
  • 原文地址:https://www.cnblogs.com/zycy/p/6232142.html
Copyright © 2011-2022 走看看