• 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轴,即只会出现空白。

  • 相关阅读:
    Debian6.0 linux安装redmine
    Backtrack无线WPA2破解过程
    回溯法解决0-1背包问题
    机试笔记8--栈与优先队列
    计算机网络笔记--数据链路层
    计算机网络笔记--物理层--调制
    计算机网络笔记--物理层--编码
    计算机网络笔记--物理层-概述
    机试笔记7--数学问题
    两种简单的字符串匹配算法
  • 原文地址:https://www.cnblogs.com/zycy/p/6232142.html
Copyright © 2020-2023  润新知