什么是Echart
导入Echart
Echart生成饼图实战
Echart生成柱状图实战

什么是Echart

Echarts–商业级数据图表

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

Echarts支持的图表？

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

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

echarts和chart对比

echarts的优点：

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

echarts的缺点：

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

导入Echart

以下两种方式皆可


  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script type="text/javascript" src="js/echarts.js"></script>

Echart生成饼图实战

后台

      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
        }
    }
}

前台

 <div id="main" style="width: 600px;height:400px;"></div><!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

@section Scripts{

    <script>
       
        $.ajax({
            url: "/books/Echart",
            type: "get",
            data: {},
            success: function (res) {
                 var arr = [];
                $.each(res, function (i, v) {
                //因为饼图data需要的是数组对象所有我们这里把数据封装成数组对象
                    var obj = {}
                    obj.name = v.Name;
                    obj.value = v.Price;
                    arr.push(obj)
                    
                })

                console.log("对象数组:" +arr)

                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption({
                  
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            data:  arr, 
                            //data 数据类型
                            //[{name:'数据源'}，value:{'数据源'}]
                      
                    }
                ]
                })
            }       
                    });

    </script>
}

实现效果

在这里插入图片描述

Echart生成柱状图实战

后台

与饼图一样这里不再赘述

前台

 $.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);
                
            }       
                    });