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

  • 相关阅读:
    零基础入门深度学习(1)
    RxJava 复杂场景 Schedulers调度
    Kotlin 学习
    Cordova CrossWalk
    Android Studio工程导入另一个工程作为lib
    Android 数据存储相关
    Android Activity 生命周期中onStart()和onResume()的区别
    反省与规划
    Android 依赖注入 ButterKnife 基本使用
    Android Socket 相关
  • 原文地址:https://www.cnblogs.com/zycy/p/6232142.html
Copyright © 2011-2022 走看看