asp .net MVC Echart 实现图表实战

1. 什么是Echart
2. 导入Echart
3. Echart生成饼图实战
4. Echart生成柱状图实战

商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）

雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表

1.国人开发，文档全，便于开发和阅读文档。
2.图表丰富，可以适用各种各样的功能。

移动端使用略卡，毕竟是PC端的东西，移植到移动端肯定多多少少有些问题吧，或许跟自己水平也有一定的关系，哎怎么说呢。
echarts不失为一款比较适合我们这种码农使用的框架。
echarts就不贴代码了。毕竟文档很全。
chart.js优点：
1.轻量级，min版总大小50多k。
2.移动端使用比较流畅，毕竟小。
chart.js缺点：
1.功能欠缺比较多。
2.中文文档奇缺。

以下两种方式皆可

      EnRoleEntities db = new EnRoleEntities();
      //index方法是必须的 用来呈现页面 在index方法的页面中通过Ajax请求Echart方法
      //如果没有index是没有页面的而是会直接返回JSon数据 因为Echart方法返回类型是json
      //不会返回视图，只返回json数据
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Echart()
        {
            var book = db.Books.Select(p => new { p.ID, p.Name, p.Price }).ToList();
            //注意这里要返回JSON数据而不是view视图 
            return Json(book, JsonRequestBehavior.AllowGet);V
        }
    }
}

@section Scripts{

    
}

与饼图一样这里不再赘述

 $.ajax({
            url: "/books/Echart",
            type: "get",
            data: {},
            success: function (res) {
                var objs = []//用于存放名称
                var obj1 = []//用于存放价格
                 //var arr = [];
                $.each(res, function (i, v) {
                    objs[i] = v.Name;
                    obj1[i] = v.Price;
                    
                })
                console.log("名称:"+objs)
                    console.log("价格:"+obj1)
                 // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: objs
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: obj1
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
                
            }       
                    });