echarts.js 仿网商银行app定活宝模块的 历史支取

移动端适配问题 本人用的flexible 插件

 var   len=document.getElementById('main'),//找到div
       qf=parseFloat(document.documentElement.style.fontSize),//找到底层的font-size
       fn=(350/75)*parseFloat(document.documentElement.style.fontSize);//对宽高限制
   len.style.height=(fn<200?220:fn)+"px";
  len.style.width=document.documentElement.clientWidth+"px";
  var myChart = echarts.init(len);//echart的初始化
  var option = {
    backgroundColor:"#fff", //图表的背景言责
    title: { //标题的个人化设置   
        text:"历史支取收益率",//
        left:(250/75)*qf,//相当于margin-left
        textStyle:{//title 文本样式的
          fontSize:(30/75)*qf,
          align:"center"
        }
    },
    tooltip: { //点击之后的弹出框
      display:false
    },
    xAxis: {//x轴的个性化设置
      axisLine:{//坐标轴轴线相关设置
        lineStyle:{
          color:"white"
        }
      },
      axisLabel:{//坐标轴文本的相关设置
        fontSize:(20/75)*qf,
        color:"#ccc",
        interval:9, //强制设置坐标轴分割间隔。![k线图.png](https://img.haomeiwen.com/i8368726/075896a500cbc802.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

        formatter:function(value){
            return value
        }
      },
      axisTick: {//坐标轴刻度相关设置。
        show: false
      },
      data: ["11.12","11.13","11.14","11.15","11.16","11.17","11.18","11.19","11.20","11.21","11.22","11.23","11.24","11.25","11.26","11.27","11.28","11.29","11.30","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12"]
    },
    grid:[{//直角坐标系内绘图网格（全局canvas对这个表的设置）
      borderColor:"#ffffff",//内绘网格的背景颜色
      width:"80%",//内绘网格的宽度
      x:"15%"//x轴==left
    }],
    animation:false,//动画是否执行
    textStyle:{//全局样式
      fontSize:(30/75)*qf,
    },
    yAxis: {//Y轴的一些个性化定制
      offset:"-5", //Y轴线的偏移度
      axisTick: {//坐标轴刻度相关设置
        show: false //坐标刻度是否显示
      },
      axisLine:{//坐标轴轴线相关设置。
        lineStyle:{//坐标轴线样式
          color:"white"
        }
      },
      splitLine:{//坐标轴在grid区域的分割线
        show:true,//是否显示分隔线
        lineStyle:{//分割线样式
          color:["white"]
        }
      },
      show:true,//是否显示Y轴
      min:0,//坐标轴刻度最小值。
      max:5,//坐标最大刻度
      name:"支取收益率(%)",//坐标轴的名字
      nameTextStyle:{//坐标轴名字的样式
        align:"left",//坐标位置
        padding:[0,0,0,(50/75)*qf],//内边距
        color:"#ccc", //坐标颜色
        fontSize:(30/75)*qf //做名字的尺寸
      },
      axisLabel:{//坐标轴刻度标签的相关设置。
        fontSize:(20/75)*qf,// 坐标轴刻度标签尺寸
        color:"#ccc",//颜色
        formatter:function(value,num){ //对尺寸标签的需求定制 （如没有可以不写）
          if(value==0)return
          return value.toFixed(2)
        }
      }
    },
    series: [{// 系列表   k线的走势数据及k线标注的一些个性化设置
      name: '销量',
      type: 'line', //表示是哪个系列 具体请看echart官方文档
      symbolSize:0,//小圆点的大小
      areaStyle:{//区域填充样式。
        normal: {
           color:"rgba(255, 235, 245, 0.5)"//填充颜色
      }},
      lineStyle:{//线条样式。
        normal:{
          color:"#5793f3",//线条的颜色
          width:2 //x线条的宽度
        }
      },
      smooth:true,//是否平滑曲线显示。
      markLine:{ //图表标线。
        silent:true //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
      },
      markPoint:{// 图表标注。标注的一些个性化定制
        symbol:"pin",//标记的图形
        silent:true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
        symbolSize:(60/75)*qf,//标记的大小
        itemStyle:{//标注的样式。
          normal:{//标注的样式必须写在normal对象里
            color:"#5793f3"
          }
        },
        label:{//标注的文本。
          normal:{
            fontSize:(20/75)*qf,//标注文本的大小
            formatter:function(){ // formatter方法是对标注文本的一些个性化定制，比如你要保留小数点后两位 或加单位
              return "3.80"
            }
          }
        },
        data:[{//指定标注目标 在数组里可以写很多个对象
          coord: ["12.12", 3.80]
        }],
        markArea:{
          label:{}
        }
       },
      data: [3.8, 3.8, 3.8, 3.8, 4, 3.8,2, 3.8, 3.8, 3.8, 4, 3.8,2, 1,2,3,4,1,3.8,3.8,3.8,3,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8,3.8]
    }]
  };
 // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);