说明

要求做表格类型竖着折线图

示例图

QQ截图20190625091924.png

HTML代码

  1. <button id="btn1">某单位1按钮</button>
  2. <button id="btn2">某单位2按钮</button>
  3. <div id="main" style="width: 50%;height:400px;"></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 jsonData={
  6.                     backgroundColor: '#001534',
  7.                     topData:{
  8.                         planTitle:"计划值1",
  9.                         planLineOne:"2017数据1",
  10.                         planLineTwo:"2018数据2",
  11.                         topPlanTipIsTrue:true
  12.                     },
  13.                     topColor:["rgba(0,255,91,0.5)","rgba(0,255,91,1)","#18daff","#fffa4a"],
  14.                     yAxisText1:[
  15.                         {value :-15,text:""},
  16.                         {value :-15,text:"↓ 18",upIsTrue:false},
  17.                         {value :-15,text:"↑ 4664",upIsTrue:true},
  18.                         {value :-15,text:""},
  19.                         {value :-15,text:"↓ 183",upIsTrue:false},
  20.                         {value :-15,text:"↓ 184",upIsTrue:false},
  21.                         {value :-15,text:""},
  22.                         {value :-15,text:"↓ 185",upIsTrue:false},
  23.                         {value :-15,text:"↑ 1855",upIsTrue:true},
  24.                         {value :-15,text:"↑ 18555",upIsTrue:true},
  25.                         {value :-15,text:""},
  26.                         {value :-15,text:"↑ 18555",upIsTrue:true},
  27.                         {value :-15,text:"↑ 1855",upIsTrue:true}
  28.                     ],
  29.                     yAxisText2:[
  30.                         {value :-30,text:""},
  31.                         {value :-30,text:"181"},
  32.                         {value :-30,text:"1822"},
  33.                         {value :-30,text:""},
  34.                         {value :-30,text:"1833"},
  35.                         {value :-30,text:"1844"},
  36.                         {value :-30,text:""},
  37.                         {value :-30,text:"1855"},
  38.                         {value :-30,text:"1866"},
  39.                         {value :-30,text:"1877"},
  40.                         {value :-30,text:""},
  41.                         {value :-30,text:"1811"},
  42.                         {value :-30,text:"181111"}
  43.                     ],
  44.                     yAxis:{
  45.                         name:"指标名称（单位）",
  46.                         data:[
  47.                             {value:'单位分类0',textStyle:{width:150,align:"left",rich:{},color:"#fff",fontWeight:"bold",fontSize:14,backgroundColor:"rgba(190,290,290,0.3)",padding:3}},
  48.                             {value:'单位00单位00',textStyle:{align:"left"}}, 
  49.                             {value:'单位10单位10单位10',textStyle:{align:"left"}}, 
  50.                             {value:'单位分类1',textStyle:{width:150,align:"left",rich:{},color:"#fff",fontWeight:"bold",fontSize:14,backgroundColor:"rgba(250,250,250,0.3)",padding:3}}, 
  51.                             {value:'单位20',textStyle:{align:"left"}}, 
  52.                             {value:'单位30',textStyle:{align:"left"}}, 
  53.                             {value:'单位分类2',textStyle:{width:150,align:"left",rich:{},color:"#fff",fontWeight:"bold",fontSize:14,backgroundColor:"rgba(250,250,250,0.3)",padding:3}}, 
  54.                             {value:'单位40',textStyle:{align:"left"}}, 
  55.                             {value:'单位50',textStyle:{align:"left"}}, 
  56.                             {value:'单位60',textStyle:{align:"left"}}, 
  57.                             {value:'单位分类3',textStyle:{width:150,align:"left",rich:{},color:"#fff",fontWeight:"bold",fontSize:14,backgroundColor:"rgba(250,250,250,0.3)",padding:3}},
  58.                             {value:'单位70',textStyle:{align:"left"}},
  59.                             {value:'单位80',textStyle:{align:"left"}},
  60.                         ],
  61.                         yAxisUnit:[
  62.                             {yAxis: "单位分类0"},
  63.                             {yAxis: "单位分类1"}, 
  64.                             {yAxis: "单位分类2"}, 
  65.                             {yAxis: "单位分类3"}
  66.                         ]
  67.                     },
  68.                     xAxis:{
  69.                         min:-30,
  70.                         max:50,
  71.                         markArea:{
  72.                             nwIsTrue:true,
  73.                             borderColor:"rgba(0,255,91,1)",
  74.                             data: [
  75.                                 {startNum:"-15",endNum:"-30",startColor:"rgba(0,0,0,0.0)",endColor:"rgba(0,0,0,0.0)",text:"实际值\n▼"},
  76.                                 {startNum:"0",endNum:"-15",startColor:"rgba(0,0,0,0.0)",endColor:"rgba(0,0,0,0.0)",text:"增长\n▼"},
  77.                                 {startNum:"0",endNum:"5",startColor:"rgba(255,36,47,0.0)",endColor:"rgba(255,36,47,0.5)",text:"平均值\n▼"},
  78.                                 {startNum:"5",endNum:"25",startColor:"rgba(255,250,74,0.0)",endColor:"rgba(255,250,74,0.5)",text:"前25%\n▼"},
  79.                                 {startNum:"25",endNum:"40",startColor:"rgba(24,218,250,0.0)",endColor:"rgba(24,218,250,0.5)",text:"世界一流标准前\n12.5%\n▼"},
  80.                                 {startNum:"40",endNum:"50",startColor:"rgba(0,255,91,0.0)",endColor:"rgba(0,255,91,0.5)",text:"第一名\n▼"},
  81.                             ]
  82.                         },
  83.                         markAreaData:[
  84.                             {xAxis:-30},
  85.                             {xAxis:-15},
  86.                             {xAxis:5},
  87.                             {xAxis:25},
  88.                             {xAxis:40},
  89.                             {xAxis:50}
  90. //                            {xAxis:50,label: {borderColor: 'rgba(0,255,91,1)',borderWidth: 3}}
  91.                         ]
  92.                     },
  93.                     seriesData:[
  94.                         {
  95.                             data:[
  96.                                 {value :null,ranking:"排名1",Percentage:"1%",Static:"0",symbolSize:0,label: {normal:{}},itemStyle:{}},
  97.                                 {value :14,ranking:"排名2",Percentage:"2%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  98.                                 {value :12,ranking:"排名3",Percentage:"3%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  99.                                 {value :8.25,ranking:"排名4",Percentage:"4%",Static:"0",symbolSize:0,label: {normal:{}},itemStyle:{}}, 
  100.                                 {value :4.5,ranking:"排名5",Percentage:"5%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}},
  101.                                 {value :12,ranking:"排名6",Percentage:"6%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}},
  102.                                 {value :13.5,ranking:"排名7",Percentage:"7%",Static:"1",symbolSize:0,label: {normal:{}},itemStyle:{}},
  103.                                 {value :15,ranking:"排名8",Percentage:"8%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}},  
  104.                                 {value :null,ranking:"排名9",Percentage:"9%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  105.                                 {value :13,ranking:"排名10",Percentage:"10%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  106.                                 {value :14,ranking:"排名11",Percentage:"11%",Static:"1",symbolSize:0,label: {normal:{}},itemStyle:{}},
  107.                                 {value :15,ranking:"排名12",Percentage:"12%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  108.                                 {value :19,ranking:"排名13",Percentage:"13%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}
  109.                             ],
  110.                             lineColor:"#18daff"
  112.                         },
  113.                             {data:[
  114.                                 {value :null,ranking:"排名1",Percentage:"1%",Static:"0",symbolSize:0,label: {normal:{}},itemStyle:{}},
  115.                                 {value :24,ranking:"排名2",Percentage:"2%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  116.                                 {value :22,ranking:"排名3",Percentage:"3%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  117.                                 {value :31.5,ranking:"排名4",Percentage:"4%",Static:"0",symbolSize:0,label: {normal:{}},itemStyle:{}}, 
  118.                                 {value :4.1,ranking:"排名5",Percentage:"5%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}},
  119.                                 {value :22,ranking:"排名6",Percentage:"6%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}},
  120.                                 {value :23.5,ranking:"排名7",Percentage:"7%",Static:"1",symbolSize:0,label: {normal:{}},itemStyle:{}},
  121.                                 {value :25,ranking:"排名8",Percentage:"8%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}},  
  122.                                 {value :28,ranking:"排名9",Percentage:"9%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  123.                                 {value :23,ranking:"排名10",Percentage:"10%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  124.                                 {value :24,ranking:"排名11",Percentage:"11%",Static:"1",symbolSize:0,label: {normal:{}},itemStyle:{}},
  125.                                 {value :25,ranking:"排名12",Percentage:"12%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  126.                                 {value :29,ranking:"排名13",Percentage:"13%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}
  127.                             ],
  128.                             lineColor:"#fffa4a"
  129.                         },
  130.                     ]
  131.             }
  132.             var jsonOtherData={
  133.                     backgroundColor: '#001534',
  134.                     topData:{
  135.                         planTitle:"计划值1",
  136.                         planLineOne:"2017数据1",
  137.                         planLineTwo:"2018数据2",
  138.                         topPlanTipIsTrue:false
  139.                     },
  140.                     topColor:["rgba(0,255,91,0.5)","rgba(0,255,91,1)","#fff","blue"],
  141.                     yAxisText1:[
  142.                         {value :-15,text:""},
  143.                         {value :-15,text:"↓ 18",upIsTrue:false},
  144.                         {value :-15,text:"↓ 182",upIsTrue:false},
  145.                         {value :-15,text:""},
  146.                         {value :-15,text:"↑ 183",upIsTrue:true},
  147.                         {value :-15,text:"↑ 184",upIsTrue:true},
  148.                         {value :-15,text:""},
  149.                         {value :-15,text:"↓ 185",upIsTrue:false},
  150.                         {value :-15,text:"↑ 1855",upIsTrue:true},
  151.                         {value :-15,text:"↑ 18555",upIsTrue:true},
  152.                         {value :-15,text:""},
  153.                         {value :-15,text:"↑ 18555",upIsTrue:true},
  154.                         {value :-15,text:"↓ 1855",upIsTrue:false}
  155.                     ],
  156.                     yAxisText2:[
  157.                         {value :-30,text:""},
  158.                         {value :-30,text:"181"},
  159.                         {value :-30,text:"1822"},
  160.                         {value :-30,text:""},
  161.                         {value :-30,text:"1833"},
  162.                         {value :-30,text:"1844"},
  163.                         {value :-30,text:""},
  164.                         {value :-30,text:"1855"},
  165.                         {value :-30,text:"1866"},
  166.                         {value :-30,text:"1877"},
  167.                         {value :-30,text:""},
  168.                         {value :-30,text:"1811"},
  169.                         {value :-30,text:"181111"}
  170.                     ],
  171.                     yAxis:{
  172.                         name:"指标名称（单位）",
  173.                         data:[
  174.                             {value:'单位分类0',textStyle:{width:150,align:"left",rich:{},color:"#fff",fontWeight:"bold",fontSize:14,backgroundColor:"rgba(250,250,250,0.3)",padding:3}},
  175.                             {value:'单位00单位00',textStyle:{align:"left"}}, 
  176.                             {value:'单位10单位10单位10',textStyle:{align:"left"}}, 
  177.                             {value:'单位分类1',textStyle:{width:150,align:"left",rich:{},color:"#fff",fontWeight:"bold",fontSize:14,backgroundColor:"rgba(250,250,250,0.3)",padding:3}}, 
  178.                             {value:'单位20单位20单位20单位20',textStyle:{align:"left"}}, 
  179.                             {value:'单位30',textStyle:{align:"left"}}, 
  180.                             {value:'单位分类2',textStyle:{width:150,align:"left",rich:{},color:"#fff",fontWeight:"bold",fontSize:14,backgroundColor:"rgba(250,250,250,0.3)",padding:3}}, 
  181.                             {value:'单位40',textStyle:{align:"left"}}, 
  182.                             {value:'单位50',textStyle:{align:"left"}}, 
  183.                             {value:'单位60',textStyle:{align:"left"}}, 
  184.                             {value:'单位分类3',textStyle:{width:150,align:"left",rich:{},color:"#fff",fontWeight:"bold",fontSize:14,backgroundColor:"rgba(250,250,250,0.3)",padding:3}},
  185.                             {value:'单位70',textStyle:{align:"left"}},
  186.                             {value:'单位80',textStyle:{align:"left"}},
  187.                         ],
  188.                         yAxisUnit:[
  189.                             {yAxis: "单位分类0"},
  190.                             {yAxis: "单位分类1"}, 
  191.                             {yAxis: "单位分类2"}, 
  192.                             {yAxis: "单位分类3"}
  193.                         ]
  194.                     },
  195.                     xAxis:{
  196.                         min:-30,
  197.                         max:50,
  198.                         markArea:{
  199.                             nwIsTrue:false,
  200.                             borderColor:"rgba(0,255,91,1)",
  201.                             data: [
  202.                                 {startNum:"-15",endNum:"-30",startColor:"rgba(0,0,0,0.0)",endColor:"rgba(0,0,0,0.0)",text:"实际值\n▼"},
  203.                                 {startNum:"0",endNum:"-15",startColor:"rgba(0,0,0,0.0)",endColor:"rgba(0,0,0,0.0)",text:"增长\n▼"},
  204.                                 {startNum:"0",endNum:"5",startColor:"rgba(255,36,47,0.0)",endColor:"rgba(255,36,47,0.5)",text:"平均值\n▼"},
  205.                                 {startNum:"5",endNum:"25",startColor:"rgba(255,250,74,0.0)",endColor:"rgba(255,250,74,0.5)",text:"前25%\n▼"},
  206.                                 {startNum:"25",endNum:"40",startColor:"rgba(24,218,250,0.0)",endColor:"rgba(24,218,250,0.5)",text:"世界一流标准前\n12.5%\n▼"},
  207.                                 {startNum:"40",endNum:"50",startColor:"rgba(0,255,91,0.0)",endColor:"rgba(0,255,91,0.5)",text:"第一名\n▼"},
  208.                             ]
  209.                         },
  210.                         markAreaData:[
  211.                             {xAxis:-30},
  212.                             {xAxis:-15},
  213.                             {xAxis:5},
  214.                             {xAxis:25},
  215.                             {xAxis:40},
  216.                             {xAxis:50}
  217.                         ]
  218.                     },
  219.                     seriesData:[
  220.                         {
  221.                             data:[
  222.                                 {value :null,ranking:"",Percentage:"",Static:"",symbolSize:0,label: {normal:{}},itemStyle:{}},
  223.                                 {value :34,ranking:"排名2",Percentage:"2%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  224.                                 {value :32,ranking:"排名3",Percentage:"3%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  225.                                 {value :32.5,ranking:"排名4",Percentage:"4%",Static:"0",symbolSize:0,label: {normal:{}},itemStyle:{}}, 
  226.                                 {value :33,ranking:"排名5",Percentage:"5%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}},
  227.                                 {value :32,ranking:"排名6",Percentage:"6%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}},
  228.                                 {value :28.5,ranking:"",Percentage:"",Static:"",symbolSize:0,label: {normal:{}},itemStyle:{}},
  229.                                 {value :25,ranking:"排名8",Percentage:"8%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}},  
  230.                                 {value :null,ranking:"排名9",Percentage:"9%",Static:"0",symbolSize:0,label: {normal:{}},itemStyle:{}}, 
  231.                                 {value :23,ranking:"排名10",Percentage:"10%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  232.                                 {value :null,ranking:"排名11",Percentage:"11%",Static:"0",symbolSize:0,label: {normal:{}},itemStyle:{}},
  233.                                 {value :null,ranking:"排名12",Percentage:"12%",Static:"0",symbolSize:8,label: {normal:{}},itemStyle:{}}, 
  234.                                 {value :32,ranking:"排名13",Percentage:"13%",Static:"1",symbolSize:8,label: {normal:{}},itemStyle:{}}
  235.                             ],
  236.                             lineColor:"#fff"
  238.                         },
  239.                             {data:[
  240.                                 {value:null,ranking:"排名1",Percentage:"1%",Static:"0",symbolSize:0,label: {normal:{}},itemStyle:{}},
  241.                                 {value:25,ranking:"排名2",Percentage:"2%",Static:"0",symbolSize:8,label:{normal:{}},itemStyle:{}},
  242.                                 {value:20,ranking:"排名3",Percentage:"3%",Static:"1",symbolSize:8,label:{normal:{}},itemStyle:{}},
  243.                                 {value:32.5,ranking:"排名4",Percentage:"4%",Static:"0",symbolSize:0,label:{normal:{}},itemStyle:{}},
  244.                                 {value:45,ranking:"排名5",Percentage:"5%",Static:"0",symbolSize:8,label:{normal:{}},itemStyle:{}},
  245.                                 {value:26,ranking:"排名6",Percentage:"6%",Static:"1",symbolSize:8,label:{normal:{}},itemStyle:{}},
  246.                                 {value:26.5,ranking:"排名7",Percentage:"7%",Static:"0",symbolSize:0,label:{normal:{}},itemStyle:{}},
  247.                                 {value:27,ranking:"排名8",Percentage:"8%",Static:"1",symbolSize:8,label:{normal:{}},itemStyle:{}},
  248.                                 {value:4,ranking:"排名9",Percentage:"9%",Static:"1",symbolSize:8,label:{normal:{}},itemStyle:{}},
  249.                                 {value:29,ranking:"排名10",Percentage:"10%",Static:"0",symbolSize:8,label:{normal:{}},itemStyle:{}},
  250.                                 {value:27,ranking:"排名11",Percentage:"11%",Static:"0",symbolSize:0,label:{normal:{}},itemStyle:{}},
  251.                                 {value:25,ranking:"排名12",Percentage:"12%",Static:"1",symbolSize:8,label:{normal:{}},itemStyle:{}},
  252.                                 {value:39,ranking:"排名13",Percentage:"13%",Static:"0",symbolSize:8,label:{normal:{}},itemStyle:{}},
  253.                             ],
  254.                             lineColor:"blue"
  255.                         },
  256.                     ]
  257.             }
  258.             drawLine("main",jsonData)
  259.             $("#btn1").click(function(){
  260.                 drawLine("main",jsonData)
  261.             })
  262.             $("#btn2").click(function(){
  263.                 drawLine("main",jsonOtherData)
  264.             })
  265.         });
  266.         /*
  267.          * drawLine(id,data)
  268.          * 配置折线属性，默认series至少2组数据，否则无法绘制背景分割背景色和Y轴分割背景色
  269.          * id:目标id string
  270.          * data:json
  271.          */
  272.         function drawLine(id,data){
  273.             var _data=data;
  274.             //绘制头部
  275.             var _tipdata=_data.topData;
  276.             var _html=    "<div style='position: absolute;left: 4% ; top: 30px; color:#fff;'>";
  277.                 _html+=    "    <div style='font-size:12px;'>"+_data.yAxis.name+"</div></div>";
  278.                 _html+=    "<div id='topTitle' style='position: absolute;left: 50% ; top: 5px; color:#fff;'>";
  279.                 _html+=    "    <div id='planTip' style='float:left;'><div style='width:20px;height:8px;background:"+_data.topColor[0]+";border:1px solid "+_data.topColor[1]+"; float:left; margin:7px 5px 0 0 ;'></div><div style='float:left;'>"+_tipdata.planTitle+"</div></div>";
  280.                 _html+=    "    <div id='lineOneTip' style='float:left;'><div style='width:20px;height:3px;background:"+_data.topColor[2]+"; float:left; margin:10px 5px 0 15px ;'></div><div style='float:left;'>"+_tipdata.planLineOne+"</div></div>";
  281.                 _html+=    "    <div id='lineTwoTip' style='float:left;'><div style='width:20px;height:3px;background:"+_data.topColor[3]+"; float:left; margin:10px 5px 0 15px ;'></div><div style='float:left;'>"+_tipdata.planLineTwo+"</div></div></div>";
  283.             // 绘制图表。
  284.             var myChart = echarts.init(document.getElementById(id));
  285.             //头部div显示位置
  286.             $("#topTitle").empty();
  287.             $(myChart._dom.childNodes[0]).after(_html);
  288.             //显示隐藏计划值tip
  289.             if(_tipdata.topPlanTipIsTrue){
  290.                 $("#planTip").css("display","block");
  291.             }else{
  292.                 $("#planTip").css("display","none");
  293.             };
  294.             //tip居中处理
  295.             var marginLeft=$("#topTitle").width()/2;
  296.             $("#topTitle").css("margin-left","-"+marginLeft+"px");
  298.             //echar配置
  299.             var option = {
  300.                 backgroundColor: _data.backgroundColor,
  301.                 legend: {
  302.                     show:false
  303.                 },
  304.                 tooltip: {
  305.                     show: false,
  306.                     triggerOn: "none"
  307.                 },
  308.                 grid: {
  309.                     left: '200',
  310.                     right: '5%',
  311.                     bottom: '5%',
  312.                     containLabel: false
  313.                 },
  314.                 xAxis: {
  315.                     type: 'value',
  316.                     min: 0,
  317.                     max: 50,
  318.                     boundaryGap: true,
  319.                     axisLabel: {
  320.                         show: false,
  321.                         textStyle: {
  322.                             color:"#fff"
  323.                         }
  324.                     },
  325.                     axisLine: {
  326.                         show: false
  327.                     },
  328.                     axisTick: {
  329.                         show: false
  330.                     },
  331.                     splitLine: {
  332.                         show: false
  333.                     }
  334.                 },
  335.                 yAxis: {
  336.                     type: 'category',
  337.                     inverse: true,
  338.                     boundaryGap: true,
  339.                     axisLine: {
  340.                         show: false,
  341.                     },
  342.                     axisTick: {
  343.                         show: false,
  344.                         alignWithLabel: false
  345.                     },
  347.                     axisLabel: {
  348.                         show: true,
  349.                         margin:155.9,
  350.                         backgroundColor:"rgba(50,50,50,0.3)",
  351.                         textStyle: {
  352.                                 color:"#fff"
  353.                         }
  354.                     },
  355.                     axisPointer: {
  356.                         show: true,
  357.                         type: "shadow",
  358.                         label: {
  359.                             show: true
  360.                         }
  361.                     },
  362.                     triggerEvent: true, //坐标轴的标签是否响应和触发鼠标事件，默认不响应
  363.                     data:[]
  364.                 },
  365.                 series: [
  366.                     {
  367.                         name: '数据1',
  368.                         type: 'line',
  369.                         smooth: false,
  370.                         symbol: 'circle',
  371.                         symbolSize: 8,
  372.                         itemStyle:{
  373.                             color:"#18daff"
  374.                         },
  375.                         lineStyle: {
  376.                             normal: {
  377.                                 width: 1,
  378.                                 color:"#18daff",
  379.                                 shadowColor: 'rgba(0,0,0,0.4)',
  380.                                 shadowBlur: 10,
  381.                                 shadowOffsetY: 10
  382.                             }
  383.                         },
  384.                         connectNulls: false, //开启连接空数据
  385.                         label: {
  386.                             normal: {
  387.                                 show: true,
  388.                                 color:"#18daff",
  389.                                 formatter: '{c}',
  390.                                 rich:{},
  391.                                 position: 'left' //值显示
  392.                             }
  393.                         },
  394.                         markArea: {
  395.                             data: [
  396.                             [{
  397.                                         xAxis: ''
  398.                                     }, {
  399.                                         xAxis: '',
  400.                                         itemStyle: {
  401.                                             color: {
  402.                                                 type: 'linear',
  403.                                                 x: 0,
  404.                                                 y: 0,
  405.                                                 x2: 1,
  406.                                                 y2: 0,
  407.                                                 colorStops: [{
  408.                                                     offset: 0,
  409.                                                     color: '' // 0% 处的颜色
  410.                                                 }, {
  411.                                                     offset: 1,
  412.                                                     color: '' // 100% 处的颜色
  413.                                                 }],
  414.                                                 globalCoord: false // 缺省为 false
  415.                                             }
  416.                                         }
  417.                                     }
  419.                                 ],
  420.                                 [{
  421.                                         xAxis: ''
  422.                                     }, {
  423.                                         xAxis: '',
  424.                                         itemStyle: {
  425.                                             color: {
  426.                                                 type: 'linear',
  427.                                                 x: 0,
  428.                                                 y: 0,
  429.                                                 x2: 1,
  430.                                                 y2: 0,
  431.                                                 colorStops: [{
  432.                                                     offset: 0,
  433.                                                     color: '' // 0% 处的颜色
  434.                                                 }, {
  435.                                                     offset: 1,
  436.                                                     color: '' // 100% 处的颜色
  437.                                                 }],
  438.                                                 globalCoord: false // 缺省为 false
  439.                                             }
  440.                                         }
  441.                                     }
  443.                                 ],
  444.                                 [{
  445.                                         xAxis: ''
  446.                                     }, {
  447.                                         xAxis: '',
  448.                                         itemStyle: {
  449.                                             color: {
  450.                                                 type: 'linear',
  451.                                                 x: 0,
  452.                                                 y: 0,
  453.                                                 x2: 1,
  454.                                                 y2: 0,
  455.                                                 colorStops: [{
  456.                                                     offset: 0,
  457.                                                     color: '' // 0% 处的颜色
  458.                                                 }, {
  459.                                                     offset: 1,
  460.                                                     color: '' // 100% 处的颜色
  461.                                                 }],
  462.                                                 globalCoord: false // 缺省为 false
  463.                                             }
  464.                                         }
  465.                                     }
  467.                                 ],
  468.                                 [{
  469.                                     xAxis: ''
  470.                                 }, {
  471.                                     xAxis: '',
  472.                                     itemStyle: {
  473.                                         color: {
  474.                                             type: 'linear',
  475.                                             x: 0,
  476.                                             y: 0,
  477.                                             x2: 1,
  478.                                             y2: 0,
  479.                                             colorStops: [{
  480.                                                 offset: 0,
  481.                                                 color: '' // 0% 处的颜色
  482.                                             }, {
  483.                                                 offset: 1,
  484.                                                 color: '' // 100% 处的颜色
  485.                                             }],
  486.                                             globalCoord: false // 缺省为 false
  487.                                         }
  488.                                     }
  489.                                 }],
  490.                                 [{
  491.                                     xAxis: ''
  492.                                 }, {
  493.                                     xAxis: '',
  494.                                     itemStyle: {
  495.                                         color: {
  496.                                             type: 'linear',
  497.                                             x: 0,
  498.                                             y: 0,
  499.                                             x2: 1,
  500.                                             y2: 0,
  501.                                             colorStops: [{
  502.                                                 offset: 0,
  503.                                                 color: '' // 0% 处的颜色
  504.                                             }, {
  505.                                                 offset: 1,
  506.                                                 color: '' // 100% 处的颜色
  507.                                             }],
  508.                                             globalCoord: false // 缺省为 false
  509.                                         }
  510.                                     }
  511.                                 }],
  512.                                 [{
  513.                                     xAxis: ''
  514.                                 }, {
  515.                                     xAxis: '',
  516.                                     itemStyle: {
  517.                                         color: {
  518.                                             type: 'linear',
  519.                                             x: 0,
  520.                                             y: 0,
  521.                                             x2: 1,
  522.                                             y2: 0,
  523.                                             colorStops: [{
  524.                                                 offset: 0,
  525.                                                 color: '' // 0% 处的颜色
  526.                                             }, {
  527.                                                 offset: 1,
  528.                                                 color: '' // 100% 处的颜色
  529.                                             }],
  530.                                             globalCoord: false // 缺省为 false
  531.                                         }
  532.                                     }
  533.                                 }],
  535.                             ]
  536.                         },
  537.                         markLine: {
  538.                             silent: true,
  539.                             symbolSize: 0,
  540.                             label: {
  541.                                 position: "start",
  542.                                 formatter: function(params) {
  543.                                     return ""
  544.                                 }
  545.                             },
  546.                             lineStyle: {
  547.                                 type: "solid",
  548.                                 color: "rgba(250,250,250,0.3)",
  549.                                 width: "20"
  550.                             },
  551.                             data: [],
  552.                             rich:{
  553.                                 blue: {color: 'blue'},
  554.                                 green: {color: 'green'},
  555.                                 red: {color: 'red'},
  556.                                 white: {color: 'white'}
  557.                             }
  558.                         },
  559.                         data:[]
  560.                     },
  561.                     {
  562.                         name: '数据2',
  563.                         type: 'line',
  564.                         symbol: 'circle',
  565.                         smooth: false,
  566.                         symbolSize: 8,
  567.                         itemStyle:{
  568.                             color:"#fffa4a"
  569.                         },
  570.                         lineStyle: {
  571.                             normal: {
  572.                                 width: 1,
  573.                                 color:"#fffa4a",
  574.                                 shadowColor: 'rgba(0,0,0,0.4)',
  575.                                 shadowBlur: 10,
  576.                                 shadowOffsetY: 10
  577.                             }
  578.                         },
  579.                         connectNulls: false, //开启连接空数据
  580.                         label: {
  581.                             normal: {
  582.                                 show: true,
  583.                                 fontSize: 8,
  584.                                 formatter: "{c}",
  585.                                 rich:{},
  586.                                 position: 'right' //值显示
  587.                             }
  588.                         },
  589.                         markLine: {
  590.                             silent: true,
  591.                             symbolSize: 0,
  592.                             label: {
  593.                                 position: "start",
  594.                                 formatter: function(params) {
  595.                                     var value = params.value;
  596.                                     return value
  597.                                 }
  599.                             },
  600.                             lineStyle: {
  601.                                 type: "solid",
  602.                                 width: "0",
  603.                                 curveness: 1,
  604.                                 color:"#fff"
  605.                             },
  606.                             data: []
  607.                         },
  608.                         data:[]
  609.                     },
  610.                     {
  611.                         name:"实际值",
  612.                         type: 'line',
  613.                         symbol: 'circle',
  614.                         smooth: false,
  615.                         symbolSize: 0.00000001,
  616.                         itemStyle:{
  617.                             color:"rgba(0,0,0,0)"
  618.                         },
  619.                         label: {
  620.                             normal: {
  621.                                 show: true,
  622.                                 color:"green",
  623.                                 formatter: '{c}',
  624.                                 rich:{},
  625.                                 position: 'inside' //值显示
  626.                             }
  627.                         },
  628.                         data:[]
  629.                     },
  630.                     {
  631.                         name:"增长",
  632.                         type: 'line',
  633.                         symbol: 'circle',
  634.                         smooth: false,
  635.                         symbolSize: 0.00000001,
  636.                         itemStyle:{
  637.                             color:"rgba(0,0,0,0)"
  638.                         },
  639.                         label: {
  640.                             normal: {
  641.                                 show: true,
  642.                                 color:"#fff",
  643.                                 formatter: '{c}',
  644.                                 rich:{},
  645.                                 position: 'inside' //值显示
  646.                             }
  647.                         },
  648.                         data:[]
  649.                     }
  650.                 ]
  651.             };
  652.             option.yAxis.data=_data.yAxis.data;
  653.             option.xAxis.min=_data.xAxis.min;
  654.             option.xAxis.max=_data.xAxis.max;
  655.             //处理Y轴多列文字显示问题
  656.             option.series[2].data=_data.yAxisText1;
  657.             option.series[3].data=_data.yAxisText2;
  658.             //折线图1
  659.             option.series[0].name=_tipdata.planLineOne;
  660.             option.series[0].data=_data.seriesData[0].data;
  661.             option.series[0].itemStyle.color=_data.seriesData[0].lineColor;
  662.             option.series[0].lineStyle.normal.color=_data.seriesData[0].lineColor;
  663.             option.series[0].markLine.data=_data.yAxis.yAxisUnit;
  664.             for(var j=0;j<_data.xAxis.markArea.data.length;j++){
  665.                 var leng=_data.xAxis.markArea.data.length;
  666.                 var _nwIsTrue=_data.xAxis.markArea.nwIsTrue
  667.                 option.series[0].markArea.data[j][0].xAxis=_data.xAxis.markArea.data[j].startNum;
  668.                 option.series[0].markArea.data[j][1].xAxis=_data.xAxis.markArea.data[j].endNum;
  669.                 option.series[0].markArea.data[j][1].itemStyle.color.colorStops[0].color=_data.xAxis.markArea.data[j].startColor;
  670.                 option.series[0].markArea.data[j][1].itemStyle.color.colorStops[1].color=_data.xAxis.markArea.data[j].endColor;
  671.                 //是否显示绿色标域的边框
  672.                 if(_nwIsTrue){
  673.                     option.series[0].markArea.data[leng-1][1].itemStyle.color.colorStops[0].color=_data.xAxis.markArea.data[j].endColor;
  674.                     option.series[0].markArea.data[leng-1][1].itemStyle.color.colorStops[1].color=_data.xAxis.markArea.data[j].endColor;
  675.                     option.series[0].markArea.data[leng-1][1].itemStyle.borderWidth="3";
  676.                     option.series[0].markArea.data[leng-1][1].itemStyle.borderColor=_data.xAxis.markArea.borderColor;
  677.                 }
  678.             }
  679.             //折线图2
  680.             option.series[1].name=_tipdata.planLineTwo;
  681.             option.series[1].data=_data.seriesData[1].data;
  682.             option.series[1].itemStyle.color=_data.seriesData[1].lineColor;
  683.             option.series[1].lineStyle.normal.color=_data.seriesData[1].lineColor;
  684.             option.series[1].markLine.data=data.xAxis.markAreaData;
  685.             option.series[1].markLine.label.formatter=function(params){
  686.                 var value = params.value;
  687.                 var y_val0=_data.xAxis.markArea.data[0].endNum;
  688.                 var y_text0=_data.xAxis.markArea.data[0].text;
  689.                 var y_val1=_data.xAxis.markArea.data[1].endNum;
  690.                 var y_text1=_data.xAxis.markArea.data[1].text;
  691.                 var _val0=_data.xAxis.markArea.data[2].endNum;
  692.                 var _text0=_data.xAxis.markArea.data[2].text;
  693.                 var _val1=_data.xAxis.markArea.data[3].endNum;
  694.                 var _text1=_data.xAxis.markArea.data[3].text;
  695.                 var _val2=_data.xAxis.markArea.data[4].endNum;
  696.                 var _text2=_data.xAxis.markArea.data[4].text;
  697.                 var _val3=_data.xAxis.markArea.data[5].endNum;
  698.                 var _text3=_data.xAxis.markArea.data[5].text;
  699.                 //处理顶部标文字
  700.                 if(value == y_val0){
  701.                     value = "{white|"+y_text0+"}"
  702.                 }else if(value == y_val1){
  703.                     value = "{white|"+y_text1+"}"
  704.                 }else if(value == _val0) {
  705.                     value = "{blue|"+_text0+"}"
  706.                 } else if(value == _val1) {
  707.                     value = "{green|"+_text1+"}"
  708.                 } else if(value ==_val2) {
  709.                     value = "{red|"+_text2+"}"
  710.                 } else if(value == _val3) {
  711.                     value = "{white|"+_text3+"}"
  712.                 }
  713.                 return value
  714.             }
  715.             option.series[1].markLine.label.rich={
  716.                 blue: {color: 'blue'},
  717.                 green: {color: 'green'},
  718.                 red: {color: 'red'},
  719.                 white: {color: 'white'}
  720.             }
  721.             //可通过谋属性或者值来格式化点上的文字，颜色，位置
  722.             if(true){
  723.                 for(var n=0;n<2;n++){
  724.                     var val1=[],val2=[];
  725.                     //处理折线1上的点的大小，颜色问题
  726.                     option.series[0].label.normal.position="left";
  727.                     option.series[0].data.forEach(function(value,index,array){
  728. //                        console.log(value)
  729.                         var _val=value.value;
  730.                         val1.push(_val);
  731.                         var _symbolSize=value.symbolSize;
  732.                         if(_val>0 && _val<5 && _symbolSize!=0){
  733.                             value.itemStyle.color="red";
  734.                             value.label.normal.position="left";
  735.                             value.symbolSize=15;
  736.                         }else if(_val>5 && _val<25 && _symbolSize!=0){
  738.                         }else if(_val>25 && _val<40 && _symbolSize!=0){
  740.                         }else if(_val>40 && _val<50 && _symbolSize!=0){
  741.                             value.itemStyle.color="green";
  742.                             value.label.normal.position="right";
  743.                             value.symbolSize=15
  744.                         }
  746.                     });
  747.                     //处理折线2上的点的大小，颜色问题
  748.                     option.series[1].label.normal.position="right";
  749.                     option.series[1].data.forEach(function(value,index,array){
  750.                         var _val=value.value;
  751.                         val2.push(_val);
  752.                         var _symbolSize=value.symbolSize;
  753.                         if(_val>0 && _val<5 && _symbolSize!=0){
  754.                             value.itemStyle.color="red";
  755.                             value.label.normal.position="top";
  756.                             value.symbolSize=15;
  757.                         }else if(_val>5 && _val<25 && _symbolSize!=0){
  759.                         }else if(_val>25 && _val<40 && _symbolSize!=0){
  761.                         }else if(_val>40 && _val<50 && _symbolSize!=0){
  762.                             value.itemStyle.color="green";
  763.                             value.label.normal.position="right";
  764.                             value.symbolSize=15
  765.                         }
  767.                     });
  768.                     //处理2组数据点上文字左右的排布问题
  769.                     var _length=val1.length
  770.                     if(_length==val2.length){
  771.                         for(var i = 0; i < _length; i++) {
  772.                             if(val1[i] <= val2[i]) {
  773.                                 option.series[0].data[i].label.normal.position="left";
  774.                                 if(option.series[0].data[i].itemStyle.color=="red"){
  775.                                     option.series[0].data[i].label.normal.position="right";
  776.                                 }
  777.                                 option.series[1].data[i].label.normal.position="right";
  778.                             }
  779.                             else {
  780.                                 option.series[0].data[i].label.normal.position="right";
  781.                                 option.series[1].data[i].label.normal.position="left";
  782.                             }
  783.                         }
  784.                     }
  785.                     //格式化点上文字描述  
  786.                     option.series[n].label.normal.formatter=function(params){
  787.                         //console.log(params.data)
  788.                         var _val=params.value;
  789.                         var _symbolSize=params.data.symbolSize;
  790.                         var _ranking=params.data.ranking;
  791.                         var _Static=params.data.Static;
  792.                         var _Percentage=params.data.Percentage;
  793.                         var text = "";
  794.                         var _color="";
  795.                         if(_Static==0){
  796.                             _Static="↓"
  797.                             _color="red";
  798.                         }else{
  799.                             _Static="↑"
  800.                             _color="green";
  801.                         };
  802.                         if(_symbolSize != 0) {
  803.                             text = "{white|"+_ranking+"} {blue|"+_val+"}\n{"+_color+"|"+_Static+_Percentage+"}"
  804.                         }
  805.                         return text
  806.                     };
  807.                     option.series[n].label.normal.rich={
  808.                         blue: {color: 'blue'},
  809.                         green: {color: 'green'},
  810.                         red: {color: 'red'},
  811.                         white: {color: 'white'}
  812.                     };
  813.                 }
  814.             }
  815.             //格式化Y轴多列文字
  816.             option.series[2].label.normal.formatter=function(params){
  817.                 var _val = params.data.value;
  818.                 var _text = params.data.text;
  819.                 var _upIsTrue = params.data.upIsTrue;
  820.                 var _color = "green";
  821.                 if(_upIsTrue){
  822.                     _color = "green";
  823.                 }else{
  824.                     _color = "red";
  825.                 };
  826.                 _text = "{"+_color+"|"+_text+"}"
  827.                 return _text
  828.             }
  829.             option.series[2].label.normal.rich={
  830.                 green: {color: 'green'},
  831.                 red: {color: 'red'}
  832.             };
  833.             option.series[3].label.normal.formatter=function(params){
  834.                 var _val = params.data.value;
  835.                 var _text = params.data.text;
  836.                 return _text
  837.             }
  838.             //绘制图
  839.             myChart.setOption(option, true);
  841. //点击事件
  842. //             myChart.on('click', function (params) {
  843. //                 //点击Y轴上的文字 注意给对应的Y轴开启：triggerEvent:true
  844. //                 if(params.componentType=="yAxis" && params.yAxisIndex=="0"){
  845. //                     if(params.value=="单位00"){
  846. //                         option.series[0].data=[34,32,null,33,35,null,39,33,38,null, 39,35]
  847. //                     }else{
  848. //                         option.series[0].data=[14,12,null,13,15,null,19,13,18,null, 19,15]
  849. //                     }
  850. //                     option.yAxis.axisPointer.value=params.value;
  851. //                     myChart.setOption(option,true);
  852. //                 }
  853. //             });
  854.         }
  855.         </script>

DOME下载

竖着的折线图（Y轴多列文字）.rar

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