• Echarts-画柱状,折线图


     导入echarts包

    <script src='../scripts/libraries/echarts/echarts-all.js'></script>

    堆积图js

        var myChart = echarts.init(document.getElementById('main2'));
        myChart.setOption({
            title : {
                text : ""
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            tooltip : {
                trigger : 'axis',
                showDelay : 0, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            legend: {
                data:['蒸发量','降水量','平均温度']
            },
            xAxis : [
                     {
                         type : 'category',
                         data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                     }
                 ],
            yAxis : [
                     {
                         type : 'value',
                         name : '水量',
                         axisLabel : {
                             formatter: '{value} ml'
                         }
                     },
                     {
                         type : 'value',
                         name : '温度',
                         axisLabel : {
                             formatter: '{value} °C'
                         }
                     }],
            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]
                      },
                      {
                          name:'平均温度',
                          type:'line',
                          yAxisIndex: 1,
                          data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                      }
                  ]
        });

    html

    <div class="chart" id="main2"></div>

     

  • 相关阅读:
    求解整数集合的交集(腾讯笔试)
    关于屏幕适配之比例布局
    (转)注册JNI函数的两种方式
    正则表达式记录
    当年一个简单可用的多线程断点续传类
    最近用到的几个工具方法
    Android中包含List成员变量的Parcel以及Parcel嵌套写法示例
    java实现计算MD5
    一个用于去除状态栏和虚拟导航栏的BaseActivity
    MVP的模板
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4754086.html
Copyright © 2020-2023  润新知