说明

基于上篇文章做，数据data顺序要一一对应。关键部分的代码判断比较麻烦，如哪位大神有更好的办法，请指教，谢谢！

示例图

QQ截图20190415164825.png

css代码

  1. .boder {
  2.   border: solid 1px #c5c5c5;
  3. }
  5. .eDiv {
  6.   width: calc(50% - 2px);
  7.   height: 350px;
  8.   float: left;
  9. }

HTML代码

  1. <div class="eDiv boder" id="Q1"></div>

JS代码

  1. <script src="js/jquery-1.6.2.min.js"></script>
  2. <script src="js/echarts.min.js"></script>
  3.  $(function () {
  4.       //三折线图标注文字上下自动排序
  5.         var Q9data={
  6.                 title:"三折线图标注文字上下自动排序",
  7.                 tip:"累计同比:+1.0%",
  8.                 color:["B1","B2","B3"],
  9.                 x:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
  10.                 y:[{min:null,max:null,name:"(单位：亿元)",unit:"圆"}],
  11.                 data:[
  12.                     {
  13.                         name:"本年累计",yAxisIndex:0,type:"line",
  14.                         data:["21","3","38","9","3","5","35","25","14","11","9","25"]
  15.                     },
  16.                     {
  17.                         name:"去年累计",yAxisIndex:0,type:"line",
  18.                         data:["13","9.3","9","17","8.5","11.5","9.3","9","17","8.5","27.5","23.666"]
  19.                     },
  20.                     {
  21.                         name:"本年预测值",yAxisIndex:0,type:"line",
  22.                         data:["25","25","25","25","25","25","25","25","25","25","25","25"]
  23.                     }
  24.                 ]
  25.             };
  26.             /**
  27.              * @var {object}
  28.              * @desc 前端重定义echar画图细节和区别
  29.              * @property {number} left - 图形备注上离左边多少距离（单位为%）
  30.              * @property {number} top - 图形备注上离顶部多少距离（单位为%）
  31.              * @property {string} unit - Y轴刻度上的单位
  32.              * @property {number} tofiexd - Y轴刻度上保留多少位小数
  33.              * @property {boolean} tipUnit - true|强制使用tip的unit;false|不使用tip的unit
  34.              * 
  35.              */
  36.             var tip={
  37.                 left:11,
  38.                 top:20,
  39.                 tofiexd:1, 
  40.                 unit:"%",
  41.                 tipUnit:true,
  42.             }
  43.             drawThreeLine("Q9","line_auto_up_down",Q9data,tip);
  44.             var t = setInterval(function(){
  45.                 var d1=[],d2=[],d3=[];
  46.                 for(let i = 0 ; i<10;i++){
  47.                     var val1 =  fRandomBy(10,40).toString();
  48.                     d1.push(val1);
  49.                 }
  50.                 for(let i = 0 ; i<12;i++){
  51.                     var val2 =  fRandomBy(20,40).toString();
  52.                     var val3 =  "25";
  53.                     d2.push(val2);
  54.                     d3.push(val3);
  55.                     tip.left=fRandomBy(10,20);
  56.                     tip.top=fRandomBy(20,70);
  57.                 }
  58.                 Q9data.data[0].data=d1;
  59.                 Q9data.data[1].data=d2;
  60.                 Q9data.data[2].data=d3;
  61.                 drawThreeLine("Q9","line_auto_up_down",Q9data,tip)
  62.             },3000);
  63.  });
  64. /**
  65.  * @func
  66.  * @desc 三折线标注文字位置自动排序
  67.  * @param {string} id - string |目标id
  68.  * @param {string} type - string | line_auto_up_down（三条折线，并且排列标记字的位置
  69.  * @param {object} data - 后端数据 @returns {...}
  70.  * @param {object} tip - 前端重定义echar画图细节和区别 @returns {...}
  71.  * 
  72.  */
  73. function drawThreeLine(id,type,data,tip){
  74.     var myChart = echarts.init(document.getElementById(id));
  75.     var option = {
  76.         title: {
  77.             text: "默认标题",
  78.             x: 'center',
  79.             top: '5'
  80.         },
  81.         tooltip: {
  82.             trigger:'axis',
  83.             confine: true,
  84.             axisPointer:{
  85.                 type:"line"
  86.             }
  87.         },
  88.         legend:{
  89.             show:true,
  90.             bottom: 15,
  91.         },
  92.         xAxis: {
  93.             type: 'category',
  94.             data: ['周一','周二','周三','周四','周五','周六','周日']
  95.         },
  96.         yAxis: [
  97.             {
  98.                 type: 'value',
  99.                 show: true,
  100.                 min: null,
  101.                 max: null,
  102.                 name:"(单位：xx)",
  103.                 splitLine:{show:false}
  104.             },
  105.             {
  106.                 type: 'value',
  107.                 show: false,
  108.                 min: null,
  109.                 max: null,
  110.                 name:"(单位：xx)",
  111.                 splitLine:{show:false}
  112.             },
  113.         ],
  114.         grid: {
  115.             left: '4%',
  116.             right: '4%',
  117.             bottom: '15%',
  118.             top:"20%",
  119.             containLabel: true
  120.         },
  121.         series: []
  122.     }
  123.     //全局处理
  124.     var sunit = "",stofixed = 0;
  125.     //前端控制设置
  126.     if(tip){
  127.         if(tip.tofiexd){
  128.             stofixed = tip.tofiexd
  129.         }
  130.         if(tip.unit){
  131.             sunit = tip.unit
  132.         }
  133.     }
  134.     //后端传数据源
  135.     if(data){
  136.         if(data.title){
  137.             option.title.text = data.title;
  138.         }
  139.         if(data.color){
  140.             var arrColor=["blue","red","green"];
  141.             option.color = arrColor;
  142.         }
  143.         if(data.x){
  144.             option.xAxis.data = data.x;
  145.         }
  146.         for(var mm=0;mm<data.y.length;mm++){
  147.             if( data.y[mm].name){
  148.                 option.yAxis[mm].name = data.y[mm].name;
  149.             }
  150.             if( data.y[mm].min){
  151.                 option.yAxis[mm].min = data.y[mm].min;
  152.             }
  153.             if( data.y[mm].max){
  154.                 option.yAxis[mm].max = data.y[mm].max;
  155.             }
  156.             if(tip){
  157.                 if(tip.tipUnit){
  158.                     sunit=tip.unit
  159.                 }else{
  160.                     if( data.y[mm].unit){
  161.                         sunit=data.y[mm].unit
  162.                     }
  163.                 }
  164.             }
  165.             option.yAxis[mm].axisLabel={
  166.                 formatter: function(val){
  167.                     if(stofixed == 0){
  168.                         return val + sunit;
  169.                     }else{
  170.                         return val.toFixed(stofixed) + sunit;
  171.                     }
  173.                 }
  174.             }
  175.         }
  176.         if(data.y.length > 1){
  177.             option.yAxis[1].show = true;
  178.             var _sunit=[];
  179.             for(var kk=0;kk<data.y.length;kk++){
  180.                 if( data.y[kk].unit){
  181.                     var uit={unit:data.y[kk].unit}
  182.                     _sunit.push(uit);
  183.                 }
  185.             }
  186.             if(_sunit.length>1){
  187.                 option.yAxis[0].axisLabel={
  188.                     formatter: function(val){
  189.                         if(stofixed == 0){
  190.                             return val + _sunit[0].unit;
  191.                         }else{
  192.                             return val.toFixed(stofixed) +  _sunit[0].unit;
  193.                         }
  195.                     }
  196.                 }
  197.                 option.yAxis[1].axisLabel={
  198.                     formatter: function(val){
  199.                         if(stofixed == 0){
  200.                             return val + _sunit[1].unit;
  201.                         }else{
  202.                             return val.toFixed(stofixed) +  _sunit[1].unit;
  203.                         }
  205.                     }
  206.                 }
  207.             }
  208.         }
  209.     }
  210.     //line_auto_up_down类型处理
  211.     if(type=="line_auto_up_down"){
  212.         var arrVal1=[],arrVal2=[];
  213.         for(var i=0;i<data.data.length;i++){
  214.             var val=data.data[i];
  215.             var tmp={
  216.                     name:val.name,
  217.                     type:val.type,
  218.                     yAxisIndex:val.yAxisIndex,
  219.                     data:[]
  220.             }
  221.             for(var j=0;j<val.data.length;j++){
  222.                 var vval={value:val.data[j]};
  223.                 tmp.data.push(vval)
  224.             }
  225.             option.series.push(tmp)
  226.         }
  228.         for(var j=0;j<data.data[0].data.length;j++){
  229.             arrVal1.push(data.data[0].data[j])
  230.             arrVal2.push(data.data[1].data[j])
  231.         }
  232.         //预测数据长度
  233.         var lastLength = data.data[2].data.length;
  234.         //本年最后月数据(长度以本年为基准)
  235.         var val0 = option.series[0].data[arrVal2.length-1].value;
  236.         //去年最后月数据(长度以本年为基准)
  237.         var val1 = option.series[1].data[arrVal2.length-1].value;
  238.         //去年最后月数据(长度以预测为基准)
  239.         var val2 = option.series[1].data[lastLength-1].value;
  240.         //预测最后月数据(长度以预测为基准)
  241.         var val3 = option.series[2].data[lastLength-1].value;
  242.         /* 2组数组长度相同，即本年全年每个月数据都齐了，要和去年每个月数据比较，但是只显示最后的数据处理方法 */
  243.         if(arrVal1.length == arrVal2.length && arrVal2.length == lastLength){
  244.             option.series[2].data[arrVal2.length-1].label={show:true,position:"right"};
  245.             if(Number(val0)>Number(val1)){
  246.                 option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  247.                 option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  248.             }else if(Number(val0) == Number(val1)){
  249.                 option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  250.                 option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  251.             }else{
  252.                 option.series[0].data[arrVal2.length-1].label={show:true,position:"bottom"};
  253.                 option.series[1].data[arrVal2.length-1].label={show:true,position:"top"};
  254.             }
  255.             if(Number(val0) < Number(val3) && Number(val1)<Number(val3)){
  256.                 option.series[2].data[arrVal2.length-1].label={show:true,position:"top"};
  257.                 option.series[0].data[arrVal2.length-1].label={show:true,position:"right"};
  258.                 option.series[1].data[arrVal2.length-1].label={show:true,position:"right"};
  259.             }
  260.             if(Number(val0) == Number(val3) && Number(val1)==Number(val3)){
  261.                 option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  262.                 option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  263.             }
  264.             if(Number(val0) > Number(val3) && Number(val1)>Number(val3)){
  265.                 option.series[2].data[arrVal2.length-1].label={show:true,position:"bottom"};
  266.                 option.series[0].data[arrVal2.length-1].label={show:true,position:"right"};
  267.                 option.series[1].data[arrVal2.length-1].label={show:true,position:"right"};
  268.             }                    
  269.         }else{
  270.             /* 本年有不齐每个月数据，即没有12月份的数据处理方法 */
  271.             if(arrVal1.length==arrVal2.length){
  272.                 for(var i = 0; i <arrVal2.length; i++) {
  273.                     //本年和去年所有月份比较
  274.                     if(Number(arrVal1[i]) <= Number(arrVal2[i]) ) {
  275.                         option.series[0].data[i].label={show:false,position:"bottom"};
  276.                         option.series[1].data[i].label={show:false,position:"top"};
  277.                     }else{
  278.                         option.series[0].data[i].label={show:false,position:"top"};
  279.                         option.series[1].data[i].label={show:false,position:"bottom"};
  280.                     }
  281.                     //本年和去年最后月比较(以本年最后月为基准)
  282.                     if(Number(val0)>Number(val1)){
  283.                         option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  284.                         option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  285.                     }else if(Number(val0) == Number(val1)){
  286.                         option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  287.                         option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  288.                     }else{
  289.                         option.series[0].data[arrVal2.length-1].label={show:true,position:"bottom"};
  290.                         option.series[1].data[arrVal2.length-1].label={show:true,position:"top"};
  291.                     }
  292.                     //去年和预测最后月比较(预测最后月为基准)
  293.                     if(Number(val2) > Number(val3)){
  294.                         option.series[1].data[lastLength-1].label={show:true,position:"top"};
  295.                         option.series[2].data[lastLength-1].label={show:true,position:"bottom"};
  296.                     }else if(Number(val2) == Number(val3)) {
  297.                         option.series[1].data[lastLength-1].label={show:true,position:"bottom"};
  298.                         option.series[2].data[lastLength-1].label={show:true,position:"top"};
  299.                     }else{
  300.                         option.series[1].data[lastLength-1].label={show:true,position:"bottom"};
  301.                         option.series[2].data[lastLength-1].label={show:true,position:"top"};
  302.                     }
  303.                     /*  */
  304.                     if(Number(val0) < Number(val3) && Number(val1)<Number(val3)){
  305.                         if(Number(val0)>Number(val1)){
  306.                             option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  307.                             option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  308.                         }else if(Number(val0) == Number(val1)){
  309.                             option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  310.                             option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  311.                         }else{
  312.                             option.series[0].data[arrVal2.length-1].label={show:true,position:"bottom"};
  313.                             option.series[1].data[arrVal2.length-1].label={show:true,position:"top"};
  314.                         }
  315.                     }
  316.                     if(Number(val0) == Number(val3) && Number(val1)==Number(val3)){
  317.                         option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  318.                         option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  319.                     }
  320.                     if(Number(val0) > Number(val3) && Number(val1)>Number(val3)){
  321.                         if(Number(val0)>Number(val1)){
  322.                             option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  323.                             option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  324.                         }else if(Number(val0) == Number(val1)){
  325.                             option.series[0].data[arrVal2.length-1].label={show:true,position:"top"};
  326.                             option.series[1].data[arrVal2.length-1].label={show:true,position:"bottom"};
  327.                         }else{
  328.                             option.series[0].data[arrVal2.length-1].label={show:true,position:"bottom"};
  329.                             option.series[1].data[arrVal2.length-1].label={show:true,position:"top"};
  330.                         }
  331.                     }    
  332.                     /*  */
  334.                 }
  335.             }
  336.         }
  337.         /* 控制三条数据的层级 */
  338.         option.series[0].zlevel=2;
  339.         option.series[1].zlevel=1;
  340.         option.series[2].zlevel=0;
  341.         /*  备注显示隐藏*/
  342.         if (data.tip !== null) {
  343.             var left = '15%',
  344.                 top = '50%';
  345.             /*  备注位置处理*/
  346.             if (tip) {
  347.                 if (tip.left) {
  348.                     left = tip.left + "%";
  349.                 }
  350.                 if (tip.top) {
  351.                     top = tip.top + "%";
  352.                 }
  353.             }
  354.             var _html = "<div class='Tips' style='position: absolute;left: " + left + "; top: " + top + "; color:red;'>" + data.tip + "</div>";
  355.             $('#' + id + " .Tips").remove();
  356.             $(myChart._dom.childNodes[0]).after(_html);
  357.         }else{
  358.             $('#' + id + " .Tips").remove();
  359.         }
  360.         /*  */
  361.     }
  362.     // 画图
  363.     myChart.setOption(option,true);
  364.     $(window).resize(function() {
  365.         myChart.resize();
  366.     });
  367. }