zoukankan      html  css  js  c++  java
  • 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',
                          stack: '总量',
                          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                          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',
                          stack: '总量',
                          itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
                          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="main1" style="margin-bottom:-70px;margin-top:-50px;"></div>

  • 相关阅读:
    java操作Redis
    Redis安装和基本操作
    IDEA使用教程+JRebel破解
    java环境配置
    qtp10安装步骤(比较完整)
    c++第一章1.6
    软件测试第二章作业
    c++作业22题
    c++第二周阶段小测2
    oracle12c数据库第一周小测验
  • 原文地址:https://www.cnblogs.com/hwaggLee/p/4754131.html
Copyright © 2011-2022 走看看