Package for a mobile phone chart (echarts) line chart

Define a set of color values, in order to remove var colorgroup = ["#6ca3c4", "#76bfa3", "#ea8f7a", "#499acd", "#ba97c9", "#98bd76", "#e0ab57"];
Get phone screen width var iwidth = document.documentElement.clientWidth; Encapsulates a multi-polyline var morebrokenlineoption = function (options) {var option = {backgroundcolor: "#fff", tit le:{Show:false,}, Legend: {data:options.legendData, left:20*iwidth/ 720, Icon: ' Circle ', bottom:0*iwidth/720, TextStyle: {fontsize:16*i width/720, Color: "#91989e", FontWeight: "Normal", fontFamily: "Microsoft Ya
            Hei "},}, grid: {top:20*iwidth/720, left:80*iwidth/720, right:40*iwidth/720, bottom:55*iwidth/720}, Xaxis: [{type: '
          Category ', Axistick: {show:false},      Axisline: {lineStyle: {color: ' #DFE0E1 '}
                        }, AxisLabel: {margin:12*iwidth/720, TextStyle: { Color: ' #6f7479 ', fontsize:16*iwidth/720, fontweight: "No Rmal ", fontFamily:" Microsoft Yahei "}, bound Arygap:false, data: ""}], YAxis: [{type: ' val
                    UE ', namelocation: "Start", Nametextstyle: {color: ' #ccc ', fontsize:16*iwidth/720, FontWeight: "Normal", fontFamily: "Microsoft Yahei "}, Axistick: {show:false}, Splitl
                 INE: {   Show:false}, Axisline: {lineStyle: {col
                        Or: "#DFE0E1"}, AxisLabel: {textStyle: { Color: ' #6f7479 ', fontsize:16*iwidth/720, FontWeight: " Normal ", fontFamily:" Microsoft Yahei "}, margin:16*iwidth/
                            720, Formatter:function (value, index) {if (options.axislabelformatter) {
                        return value + '% ';
                        } else {return value; }}}], series: []}//Recombinant data option.xaxis[0]
                . Data = (function () {return Options.xAxisData.map (function (item, index) {return { VAlue:item, TextStyle: {fontsize:17*iwidth/720}}
    })
    })(); Reorganization Data option.series (function () {Options.legendData.map (function (item, index) {OPTION.SERIES.P Ush ({name:item, type: ' line ', stack: ' Total ', data:options
                . Seriesdata[index], symbol: "Circle", Symbolsize: ' 10 ',//change the style of the discounted point
                        ItemStyle: {normal: {Color:colorgroup[index],
                    Bordertype: "Solid", BorderWidth: "2", BorderColor: "#fff"
                        }},//The color of the polyline LineStyle: {normal: {
                Color:colorgroup[index]}},//label: { //normal: {//Show:true,///Position: ' Top '//display on top with inner display outside
                        Top//}//}, Areastyle: {normal: {
                        Background color Color:colorgroup[index],//Set transparency
                        Opacity: "0.2", LineStyle: {Color:colorgroup[index]
})}) () return option; }

How to use

var bigcharts = function (options) {var maindom = document.getElementById (options.parentdom); var html = ' <ul class= ' header > ' + ' <li class= ' title ' > ' + ' <span class= ' title-title
            "> ' +options.title+ ' </span> ' + ' <sapn class=" title-time "> ' +options.time+ ' </sapn> ' + ' </li> ' + ' <li class= ' subtext ' > ' + ' <span class= ' subtext-num ' > ' +options.cl
            icknum+ ' </span> ' + ' <span class= "Subtext-text" > Times </span> ' + ' </li> '
        + ' </ul> ';
        maindom.innerhtml = html;
        Create a DOM node that holds the chart var echartdom = document.createelement ("div");
        Echartdom.id = options.parentdom + "_echart";
        Echartdom.classname = "Big-chart";
        Maindom.appendchild (Echartdom);
        Echartdom = null;
        var Echart = Echarts.init (document.getElementById (options.parentdom + "_echart")); EcharT.setoption (Morebrokenlineoption ({"Legenddata": Options.legenddata, "Xaxisdata": Options.xaxisdata
    , "Axislabelformatter": Options.axislabelformatter, "Seriesdata": Options.seriesdata}); }//The first large figure bigcharts ({"Parentdom": "Main0", "title": "User access ClickThrough rate", "Time": "2016-12-20 to 2017 -02-20 "," Clicknum ":" The number of "," Legenddata ": [' Activity hits ', ' number of participants ', ' number of people ', ' number of participants ', ' number of winners '], ' xaxisdata ': [ 
            "10.15", "10.16", "10.17", "10.18", "10.19", "10.20", "10.21", "Axislabelformatter": false, "seriesdata": [ [120, 132, 101, 134, 90, 230, 280], [220, 182, 191, 234, 290, 330, 310], [150, 232, 2 01, 154, 190, 330, 410], [320, 332, 301, 334, 390, 330, 320], [820, 932, 901, 934, 1290, 1330, 132 0]});