Echarts柱状图简单应用

在对比了HighCharts之后，因为版权问题，还是决定在项目中采用Echarts来做图表展示。

Echarts更新速度很快，已经更新到Echarts3了，感觉3的表现更炫、更酷，据说性能更好，但考虑到项目的整体风格，还是采用Echarts2的版本。

　 在项目正式开始之前，做一个简单的Demo，结合EasyUI的Grid呈现一个柱状图，后期再考虑对Echarts的js进行二次封装。

Echarts的使用跟HighCharts很类似，之前基于HighCharts做了一个Demo之后，熟悉了这类框架的基本用法。

官方提供的Demo和说明文档非常详细，照着文档和demo可以很轻松的做出想要的各种图形。

园子里也有热心的朋友用.net做了封装，方便.net用户更好的使用Echarts。博客地址：echarts .NET类库开源

　 简单三步：

　　第一步，添加Echarts引用

<script type="text/javascript" src="../echart/echarts.js"></script>

第二步，添加一个容器

<div id="mainMap" style="height: 400px; width: 55%; float: right;"></div>

第三步，js实现，后端用.net的handler做json数据输出

<script type="text/javascript">
function getData(keyWord) {//Ajax方式动态获取json格式数据
$.ajax({
type: "get",
dataType: "json",
url: "xxxxx.ashx",
data: { t: 'm', keyWord: keyWord },
success: function (data) {
if (data.length == 0) {
alert("无数据！");
} else {
DrawBar(data, "mainMap")
}
},
error: function () {
alert("加载数据失败,请重试！");
}
});
}
function DrawBar(data, id) {
var xData = [];
var datas = [];
var WEIGHT = [];
var GROSSWEIGHT = []
for (var i = 0; i < data.length; i++) {//将json格式转换为Echarts的数组格式
xData.push(data[i].MODIFYON || ",");
datas.push({ name: data[i].MODIFYON, value: data[i].SUM || 0 });
WEIGHT.push({ name: data[i].WEIGHT, value: data[i].WEIGHT || 0 });
GROSSWEIGHT.push({ name: data[i].GROSSWEIGHT, value: data[i].GROSSWEIGHT || 0 });
}
// 路径配置
require.config({
packages: [{
name: 'echarts',
location: '/echart/echarts/src',
main: 'echarts'
}]
});
// 按需加载图形
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/gauge',
'echarts/chart/bar'
],
function (ec) {
// 找到div容器，初始化echarts图表
var myChart = ec.init(document.getElementById(id));
var option = {
tooltip: {
show: true
},
title: {
text: '每日过磅数据',
subtext: '我是副标题'
},
legend: {
data: ['总件数', '总净重', '总毛重']
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
data: xData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "总件数",
"type": "bar",
"data": datas
}, {
"name": "总净重",
"type": "bar",
"data": WEIGHT
}, {
"name": "总毛重",
"type": "bar",
"data": GROSSWEIGHT
}
]
};
myChart.setOption(option);
}
);
}
</script>

　　实现的效果图：