说明

有时候项目组要求做的一些折线图比较奇葩一点，比如本年每个月的数据和去年的数据进行比较，而且标注的文字要根据数据的大小变化，大的值标注的文字在上面，小的值标注的文字要在下面，这个案例在官方或者论坛上都没有案例，后面经过自己的一些想法和研究，搞了一个案例出来了。
废话不多说，直接上干货。

示例图

QQ截图20190318110859.png

HTML代码

  1. <div id="main" style="width: 50%;height:400px;margin: 0 auto;"></div>

JS代码

  1. <script src="js/jquery-1.6.2.min.js"></script>
  2. <script src="js/echarts.min.js"></script>
  3. <script>
  4.         $(function () {
  5.             var data={
  6.                 title:"xxx标题",
  7.                 color:["red","blue"],
  8.                 x:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  9.                 y:[{min:null,max:null,name:"(单位：亿元)"}],
  10.                 data:[
  11.                     {
  12.                         name:"本年累计",
  13.                         data:["21","3","38","9","8.5","5","35","25","14","11","9","25"]
  14.                     },
  15.                     {
  16.                         name:"去年累计",
  17.                         data:["13","9.3","9","17","8.5","11.5","9.3","9","17","8.5","27.5","23.666"]
  18.                     }
  19.                 ]
  20.             };
  21.             //前端细节区分
  22.             var tip={
  23.                 tofiexd:2,//y轴刻度保留2位数小数
  24.                 unit:"%",//y轴刻度单位
  25.             }
  26.             drawLine("main","line_auto_up_down",data,tip);
  28.         });
  30.         /**
  31.          * @func
  32.          * @desc     折线函数
  33.          * @param {string} id - string |目标id
  34.          * @param {string} type - string | line_auto_up_down（双折线，并且排列标记字的位置
  35.          * @param {object} data - 后端数据 @returns {...}
  36.          * @param {object} tip - 前端重定义echar画图细节和区别 @returns {...}
  37.          * 
  38.          */
  39.         function drawLine(id,type,data,tip){
  40.             var myChart = echarts.init(document.getElementById(id));
  41.             var option = {
  42.                 backgroundColor:"rgba(10,10,10,0.1)",
  43.                 title: {
  44.                     text: "默认标题",
  45.                     x: 'center',
  46.                     top: '5'
  47.                 },
  48.                 tooltip: {
  49.                     trigger:'axis',
  50.                     confine: true,
  51.                     axisPointer:{
  52.                         type:"line"
  53.                     }
  54.                 },
  55.                 legend:{
  56.                     show:true,
  57.                     bottom: 15,
  58.                 },
  59.                 xAxis: {
  60.                     type: 'category',
  61.                     data: ['周一','周二','周三','周四','周五','周六','周日']
  62.                 },
  63.                 yAxis: [
  64.                     {
  65.                         type: 'value',
  66.                         show: true,
  67.                         min: null,
  68.                         max: null,
  69.                         name:"(单位：xx)",
  70.                         splitLine:{show:false}
  71.                     },
  72.                     {
  73.                         type: 'value',
  74.                         show: false,
  75.                         min: null,
  76.                         max: null,
  77.                         name:"(单位：xx)",
  78.                         splitLine:{show:false}
  79.                     },
  80.                 ],
  81.                 grid: {
  82.                     left: '4%',
  83.                     right: '4%',
  84.                     bottom: '15%',
  85.                     top:"20%",
  86.                     containLabel: true
  87.                 },
  88.                 series: []
  89.             }
  90.             //后端传数据源进行处理
  91.             if(data.title){
  92.                 option.title.text = data.title;
  93.             }
  94.             if(data.color){
  95.                 var arrColor = data.color;
  96.                 option.color = arrColor;
  97.             }
  98.             if(data.x){
  99.                 option.xAxis.data = data.x;
  100.             }
  101.             //全局处理设置Y轴刻度单位（默认无单位），显示多少位小数(默认0位)
  102.             var sunit = "",stofixed = 0;
  103.             //前端控制设置
  104.             if(tip){
  105.                 if(tip.tofiexd){
  106.                     stofixed = tip.tofiexd
  107.                 }
  108.                 if(tip.unit){
  109.                     sunit = tip.unit
  110.                 }
  111.             }
  112.             for(var mm=0;mm<data.y.length;mm++){
  113.                 if( data.y[mm].name){
  114.                     option.yAxis[mm].name = data.y[mm].name;
  115.                 }
  116.                 if( data.y[mm].min){
  117.                     option.yAxis[mm].min = data.y[mm].min;
  118.                 }
  119.                 if( data.y[mm].max){
  120.                     option.yAxis[mm].max = data.y[mm].max;
  121.                 }
  122.                 option.yAxis[mm].axisLabel={
  123.                     formatter: function(val){
  124.                         if(stofixed == 0){
  125.                             return val + sunit;
  126.                         }else{
  127.                             return val.toFixed(stofixed) + sunit;
  128.                         }
  129.                     }
  130.                 }
  131.             }
  132.             if(data.y.length > 1){
  133.                 //双Y轴处理
  134.                 option.yAxis[1].show = true;
  135.             }
  136.             //line_auto_up_down标注文字上下自动排序显示类型处理
  137.             if(type=="line_auto_up_down"){
  138.                 var arrVal1=[],arrVal2=[];
  139.                 for(var i=0;i<data.data.length;i++){
  140.                     var val=data.data[i];
  141.                     var tmp={
  142.                             name:val.name,
  143.                             yAxisIndex:0,
  144.                             type:"line",
  145.                             data:[]
  146.                     }
  147.                     for(var j=0;j<val.data.length;j++){
  148.                         var vval={
  149.                             value:val.data[j],
  150.                             label:{show:true},
  151.                         };
  152.                         tmp.data.push(vval)
  153.                     }
  154.                     option.series.push(tmp)
  155.                 }
  157.                 for(var j=0;j<data.data[0].data.length;j++){
  158.                     arrVal1.push(data.data[0].data[j])
  159.                     arrVal2.push(data.data[1].data[j])
  160.                 }
  161.                 //判断数组大小并进行上下自动显示
  162.                 if(arrVal1.length == arrVal2.length){
  163.                     for(var j=0;j<arrVal1.length;j++){
  164.                         var val0 = option.series[0].data[j].value;
  165.                         var val1 = option.series[1].data[j].value;
  166.                         if(Number(val0)>Number(val1) || Number(val0)==Number(val1)){
  167.                             option.series[0].data[j].label.position="top";
  168.                             option.series[1].data[j].label.position="bottom";
  169.                         }else{
  170.                             option.series[0].data[j].label.position="bottom";
  171.                             option.series[1].data[j].label.position="top";
  172.                         }
  173.                     }
  174.                 }
  175.             }
  176.             // 画图
  177.             myChart.setOption(option,true);
  178.             myChart.resize();
  179.         }
  180.         </script>

本文为原创文章，转载请附上原文链接！