一般来说，因有所需，方有所求。最近项目中有这方面的需求，用着感觉不错。特此记录！此处仅是一个简单的demo。官网地址：http://echarts.baidu.com/，相关文档、插件都有。
1.js部分。
<script src="/Contents/js/echarts.js"></script>
<script type="text/javascript">
//指定图标的配置和数据
$(document).ready(function () {
//var datas = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun1'];
var option = {
//color: ['#3398DB'],//当包含多条时，颜色注释，由系统自定义
title: {
text: 'ECharts 数据统计'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
toolbox: {
feature: {
saveAsImage: {} //下载
}
},
grid: {
left: '3%',
right: '4%',
bottom: '4%',
containLabel: true
},
legend://说明
{
data: ['销量', '测试']
},
xAxis: {
type: 'category',
//data: datas,
boundaryGap: false,//是否以原点为起点
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [{
name: '访问量',
type: 'line',//line 折线图 bar 柱状图
//smooth: false, //是否为曲线
//areaStyle: {},//是否包含面积
barwidth: '10%',
//data: [10, 52, 200, 334, 390, 330, 220]
}]
};
//初始化echarts实例
var testdata = [, , , , , , ]
var myChart = echarts.init(document.getElementById("EChart"));
myChart.setOption(option); $.post("/Category/Category/GetData").done(function (data) //使用制定的配置项和数据显示图表
{
console.dir(data);
myChart.setOption(option);
// 填入数据
myChart.setOption({
xAxis: {
data: data.category //X轴节点
},
series: [{
name: '销量',
type: 'line',
barwidth: '10%',
data: data.data
}, {
name: '测试',
type: 'line',
data: testdata
}]
}); });
})
</script>
2.html部分,用来放置图表。
<body>
<div id="EChart" style="width:600px; height: 400px;"></div>
</body>
3.方法
[HttpPost]
public JsonResult GetData()
{
List<string> category = new List<string>{
"Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"
};
List<int> data = new List<int>{
, , , , , ,
};
return Json(new { category=category,data=data});
}
4.最终效果图如下
