Echarts3实例 光滑折线图—垂直Y轴标注

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

实现效果

知识点

• 折线光滑
• 设置grid
• 设置标题，toolbar
• Y轴垂直标题

代码实现

option = {
      title: {
        text: '近十年管线长度变化',
        top:10,
        left:10
      },

      tooltip : {
        trigger: 'axis',
        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: [2009,2010,2011,2012,2013,2014,2015,2016,2017,2018]
      },
      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;
            }
        }
        //箭头
        // axisLine:{
        //     symbol:['none', 'arrow'],
        //     synbolSize:[2,2],
        //     symbolOffset:[0,12]
        // }
      },
      series: [{
        name:'管线长度',
        data: [155.1,189.71,89.72,176.54,146.90,51.21,43.96,27.95,4.03,51.44],
        type: 'line',
        smooth: true,
        itemStyle : { normal: {label : {show: true}}}
      }]
    }