Echarts3实例 柱状折线图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/idomyway/article/details/82390109

实现效果

知识点

• Y轴垂直标题
• 柱状折线联合使用

代码实现

option = {
        title: {
          text: '2018年项目入库统计',
          top:10,
          left:10
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}个"
        },
        toolbox: {
          show : true,
          top:10,
          right:10,
          feature : {
              mark : {show: true},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true}
          }
        },
        grid:{
            top:60,
            right:20,
            bottom:30,
            left:60
        },
        legend: {
            data:['']
        },
        xAxis: {
          type: 'category',
          data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
          type: 'value',
          name:"入\n库\n项\n目\n数\n︵\n个\n︶",
          nameLocation:"center",
          nameGap:35,
          nameRotate:0,
          nameTextStyle:{
              fontSize: 16,
          },
          //默认以千分位显示，不想用的可以在这加一段
          axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
              show:true,
              showMinLabel:true,
              showMaxLabel:true,
              formatter: function (value) {
                  return value;
              }
          }
        },
        series: [
            {
                name:'入库项目',
                type: 'bar',
                barMaxWidth:25,
                data:[16,16,6,5,4,4,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}}
            },{
                name:'入库项目',
                data:[16,16,6,5,4,4,3,0,0,0,0,0],
                type: 'line',
                smooth: true
            }
        ]
      }
      console.log();

  }
  ionViewDidLoad() {
  }

}