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]

                  }

              ]

    });