Echarts 一个开源图表设计工具
一般来说，因有所需，方有所求。最近项目中有这方面的需求，用着感觉不错。特此记录！此处仅是一个简单的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.最终效果图如下
Echarts 一个开源图表设计工具的更多相关文章
- .Net开源数据库设计工具Mr.E For Linq (EF 6.1) 教程（三）更新已发布的数据库
项目发布到服务器后,如果在后期,数据库的结构发生变更,如何更新到服务器呢? 首先,右键点击数据库,导出结构脚本文件 把脚本文件和 Mr.E.rar拷贝到服务器,在服务器解压Mr.E,运行其中的“更新数 ...
- .Net开源数据库设计工具Mr.E For Linq (EF 6.1) 教程（二）级联删除和触发器
1.建立级联删除 Mr.E的级联删除并非数据库自带那个级联删除,而是Mr.E自带的,所以它能触发你C#里面编写的触发器. 首先,建立级联删除关系,如下图有两个表,UserInfo和UserDocume ...
- 十个 Web 开发者熟悉的经典开源项目和工具
摘要: 一个都不知道的算我输! 这篇文章主要列出了曾经乃至现在都十分受 Web 开发者欢迎的开源工具,相信使用开源工具的 Web 开发者会对它们感兴趣的,它们中有的甚至诞生十多年了,但仍然在发光发热. ...
- 开源图像标注工具labelme的安装使用及汉化
一 LabelMe简介 labelme是麻省理工(MIT)的计算机科学和人工智能实验室(CSAIL)研发的图像标注工具,人们可以使用该工具创建定制化标注任务或执行图像标注,项目源代码已经开源. 项目开 ...
- 开源负载测试工具k6比JMeter更容易的5件事
k6是GitHub上提供的开源负载测试工具.它是用Go编写的,并运行用JavaScript编写的测试脚本.它受到了开发人员,测试人员和DevOps团队的强烈兴趣,并拥有超过4400名GitHub明星. ...
- 【测试设计】基于正交法的测试用例设计工具--PICT
前言 我们都知道成对组合覆盖是一种非常有效的测试用例设计方法,但是实际工作过程中当成对组合量太大,我们往往很难做到有效的用例覆盖. PICT是微软公司出品的一款成对组合命令行生成工具,它很好的解决了上 ...
- ECharts一个强大的商业产品图表库
Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构 ...
- 图表制作工具之ECharts
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
- MindMup 是一个开源的、在线的、简单的思维导图工具
MindMup是一个开源.在线的思维导图工具:它有以下特点: 开源 在线 导图可存放在网站(公有,要是在不同的终端浏览的话需要记住导图的网址)或google driver(私有),无用户名密码 很方便 ...
随机推荐
- c# 参数名ascii码从小到大排序(字典序)拼接
代码如下: /// <summary> /// c# 参数名ascii码从小到大排序(字典序)拼接 /// </summary> /// <param name=&quo ...
- C# 今天时间 今天结束时间
var startTime = DateTime.UtcNow.ToString(timeFormat); ).AddSeconds(-).ToUniversalTime().ToString(tim ...
- 使用 dva 如何配置异步加载路由组件
来源:https://www.jianshu.com/p/69694013e36b----------------------------------------------------- 普通方式 ...
- QVector常见使用方法
仅在此简单介绍QVector的一些常见函数,有兴趣的可以查下QT,在QT中介绍的很详细 构造函数,QVector的构造函数很多样化,常见的有 QVector() 无参的构造函数 QVector(int ...
- Django 之 cookie和session
一. Cookie 1.Cookie的由来 因为HTTP协议是无状态的,无状态的意思就是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,也不会受前后请求响应情况直接影响.简 ...
- js for in循环遍历对象，获取key:value值
var testObj = { 'a':'111', 'b':'222', 'c':'333', 'd':'444'}for(var i in testObj){ console.log(i); // ...
- Python爬虫入门之正则表达式
在前面我们已经搞定了怎样获取页面的内容,不过还差一步,这么多杂乱的代码夹杂文字我们怎样把它提取出来整理呢?下面就开始介绍一个十分强大的工具,正则表达式! 1.了解正则表达式 正则表达式是对字符串操作的 ...
- 【基于微信小程序的社区电商平台】需求分析心得——小豆芽
一.项目内容 基于微信小程序,做一个社区电商平台,抓住社区电商的特点,做出特色,与微信集成,实现商品的个性化发布,以及个性化营销. 个性化发布:用户可以在应用上直接发布自己的商品,通过搜索心愿单可以查 ...
- JS案例六_2：省市级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 转：LRU算法
LRU是Least Recently Used的缩写,即最近最少使用页面置换算法,是为虚拟页式存储管理服务的,是根据页面调入内存后的使用情况进行决策了.由于无法预测各页面将来的使用情况,只能利用“最近 ...