Echarts3实例柱状折线图

待我称王封你为后i 2021-09-16 07:06 484阅读 0赞

### 实现效果 ###

![70][]

### 知识点 ###

*  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() {
      }
    
    }

[70]: /images/20210726/c611c30dbd4a4fd68f56f5446ead5170.png