- 什么是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);
}
});