Echarts generate pie, bar, and line graphs JS Package

1, in our development program, often used to generate some reports, such as pie chart, bar chart, line chart and so on. Not much to say, directly on the encapsulated code, as shown in the following echarts.js

The following code is encapsulated in the Echarts.js file

/** * Created by Administrator on 2015/8/7.*/varCharec;//Path Configurationrequire.config ({paths: {echarts:' Http://echarts.baidu.com/build/dist '    }});//load the desired chart on Demandrequire ([' Echarts ',        ' Echarts/chart/bar ',//Load Bar chart on Demand' Echarts/chart/line ',//Load Line chart on Demand' Echarts/chart/funnel ',        ' Echarts/chart/pie ',//Load pie chart as needed' Echarts/chart/gauge ',        ' Echarts/chart/map ',    ], function(EC) {Charec=EC; });/** * Create pie chart JS This can also be extracted to encapsulate * data[0] render a pie chart DOM element ID * data[1] chart main Title * Data[2] Legend * DATA[3] Custom name * Data[4] rendered chart Data * @param*/functionCreatechart (data) {varMyChart = Charec.init (document.getElementById (data[0])); varoption ={title: {text:data[1], Subtext:‘‘, x:' Center ',}, tooltip: {trigger:' Item ', Formatter:"{A} <br/>{b}:{c} ({d}%)"}, Legend: {Orient:' Vertical ', x:' 150 ', data:data[2]}, Toolbox: {show:false, Feature: {mark:false, DataView: {show:true, ReadOnly:false}, Magictype: [' Line ', ' bar ', ' pie ', ' gauge '], restore:true}}, calculable:true, Series: [{name:data[3], type:' Pie ', Radius:' 50% ', center: [' 50% ', ' 50% '], data:data[4], ItemStyle: {normal: {label: {show:true, formatter: ' {b}:{c} people ({d}%) '}}, Labelline: {label: {show:true}}            }        }]    }; mychart.setoption (option);}

2. How to use

Refer to the following JS file in the foreground page

<script src= "Http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" ></script><script src= " Http://echarts.baidu.com/build/dist/echarts.js "></script><script type=" Text/javascript "src="/static /js/echarts.js "></script>       -----This file is the Js code in the package above

3. Transmitting data

In the foreground JS code, the Createchart (data) method is called, and the data is passed in the past.

Where data's JSON data format is shown below, can be converted to an array to transfer the past

[  "Piearea",  "xx guangzhou Shanghai Activity Statistics Chart",  [    "not participating in the event",    "participate in activities not answered questionnaire" ,    " Participate in the event and answer the questionnaire "  ],  " member activity details ",  [      {" value ":" 3 ",      " name " : "Not participating in the activity"    },

  {      "value": "5",      "name": "Participant not responding to questionnaire"    }, 

  {      "value": "Ten",      "name": "Participate in the activity and answer the questionnaire"    } 

  
]

--------The following is the array format
$data =array (
    0=>array ("name" = "Not participating in activity", "value" = "3"),
    1=>array ("Name" = "Participate in the event not filled in the questionnaire", "Value" = "5")

)

$pieData = Array (
    "Piearea",                                  //render DOM element ID of pie chart
    "XX Activity Statistics Chart",                     //title
    Array ("Inactive", "participate in the activity not answered questionnaire", "participate in the activity and answer the questionnaire"),            //lend legend
    "Member activity Details",                                                       //Custom name
    $data                                   //Statistical data
);

Pass the $piedata data in the past.

Createchart (data);

4, hahaha, so, on completion, very simple.

Echarts generate pie, bar, and line graphs JS Package