Build a back-end management system for ASP. Mvc5+ef6+easyui 1.4.3+unity4.x injection-MVC and Echarts

Echarts Feature Introduction

Echarts, a pure Javascript chart library that runs smoothly on PCs and mobile devices, is compatible with most current browsers (Ie8/9/10/11,chrome,firefox,safari, etc.) and relies on lightweight Canvas class libraries Zrender provides intuitive, vivid, interactive and highly customizable data visualization charts.

In Echarts 3, more rich interactivity and more visualizations are added, and the mobile side is optimized in depth.

Wide range of chart types

Echarts provides regular line charts, histogram, scatter charts, pie charts, candlestick graphs, box charts for statistics, maps for geographic data visualization, thermal maps, line graphs, graphs for relational data visualization, TreeMap, parallel coordinates for multidimensional data visualization, and funnel charts for BI, dashboards , and supports a mix-and-match between diagrams and diagrams.

You can download the build file containing all the charts in the download screen, if you just need one or two of them, and the build file containing all the charts is too large, you can also choose the type of chart you want in the online build and customize the build.

Objective:

Incredibly in the big Baidu search not the combination of ASP. NET MVC and Echarts use! All right....

Echarts provides a robust help document that shows only its JSON format, and MVC returns a format that fits Echart to dynamically display the presentation of the report.

The JSON format of Echarts is more complex for beginners. This includes many forms, as we can see from the JSON format below, which is just a simple bar chart

But complex graphics, where several changes are inseparable from this format

varoption ={title: {text:'Echarts Getting Started example'}, tooltip: {}, Legend: {data:['Sales']}, Xaxis: {data: ["Shirts","Sweater","Chiffon Sweater","Trousers","High Heels","Socks"]}, YAxis: {}, Series: [{name:'Sales', type:'Bar', data: [5, -, $,Ten,Ten, -]            }]        };

Start 1. Download plugins

I am here to download the complete component JS, downloaded successfully and copied to the project

Or if you need more themes, then you need to download the CSS

2. Getting Started

Use the JS and theme styles that must be introduced to the download (unless you don't want the theme)

<script src="@Url. Content ("~/scripts/echarts.min.js")" ></script>

  <!---<id= "main"></  div>

The report will be displayed in the div with the ID main

The object that prioritizes the report, written in $ (function () {});

var mychart = echarts.init (document.getElementById (' main '));

3. Bar Chart

I am here to demonstrate the price of the product and the cost price comparison! The code can download 58 sections of code to make 58 knots (including a list of commodity prices), or download this section of code directly at the end of the article!

Dynamic display with Easyui paging. Refresh echarts Data when user clicks next page

So we have to refresh when the DataGrid loads successfully

Adding a method for Easyui loading success

Onloadsuccess:function (data) {                var Grid = $ (' #List ');                var options = Grid.datagrid (' options ');                var m_page = Options.pagenumber;                var m_rows = options.pagesize;                var m_sort = options.sortname;                var m_order = Options.sortorder                $.post ("@Url. Action (" Getoptionbybarchart ")", {page:m_page, rows:m_rows, order:m_ Order, Sort:m_sort}, function (option) {                    //Use the configuration item and data you just specified to display the chart.                    mychart.setoption (option);}                )            ,

Get the current page number, page count, sort etc properties to the background database query data

hmychart.setoption (option); Load JSON data obtained from the background of a report

Get the JSON data based on the JSON format of Ecahrts

The data contained is actually a list, so you must serialize it in the returned data, and of course the data you return must contain the above attributes

Background method:

Public Jsonresult Getoptionbybarchart (Gridpager Pager, string querystr) {list<spl_productmodel>List = M_bll.            GetList (ref pager, QUERYSTR); list<decimal?> Costprice = new list<decimal?>(); List.            ForEach (A = Costprice.add (A.costprice));            List<decimal?> Price = new list<decimal?>(); List. ForEach (A = Price.            ADD (A.price));            list<string> names= New list<string>(); List. ForEach (a=> names. Add (A. Name)); list<chartseriesmodel> serieslist = new list<chartseriesmodel>(); Chartseriesmodel series1 = new Chartseriesmodel () {name = "cost price", type = "Bar", data = Costprice}; Chartseriesmodel Series2 = new Chartseriesmodel () {name = "retails", type = "Bar", data = Price}; Serieslist.add (SERIES1); Serieslist.add (Series2); var option= new {title= new{text= "cost Price Table"}, tooltip= new{}, Legend = new {data = "cost price table price comparison"}, xaxis= new{data= N Ames}, Yaxis= new{}, Series = Serieslist}; return Json (option); }

4. Running

The data is right, we get it straight.

5. Summary

This section does not have too much analysis, we download the source code to see the know

In fact, other reports are very similar (for example: hightcharts), we can display the report as long as we return the correct JSON format

In the same vein, we can see the pie chart data

Reference: http://echarts.baidu.com/demo.html

Official website: http://echarts.baidu.com/index.html

API Document: Http://echarts.baidu.com/api.html#echarts

This section sample code download access password 69FD

Build a back-end management system for ASP. Mvc5+ef6+easyui 1.4.3+unity4.x injection-MVC and Echarts