一般来说，因有所需，方有所求。最近项目中有这方面的需求，用着感觉不错。特此记录！此处仅是一个简单的demo。官网地址：http://echarts.baidu.com/，相关文档、插件都有。

1.js部分。

  1.     <script src="/Contents/js/echarts.js"></script>
  2.     <script type="text/javascript">
  3.         //指定图标的配置和数据
  4.         $(document).ready(function () {
  5.            //var datas = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun1'];
  6.             var option = {
  7.                 //color: ['#3398DB'],//当包含多条时，颜色注释，由系统自定义
  8.                 title: {
  9.                     text: 'ECharts 数据统计'
  10.                 },
  11.                 tooltip: {
  12.                     trigger: 'axis',
  13.                     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
  14.                         type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  15.                     }
  16.                 },
  17.                 toolbox: {
  18.                     feature: {
  19.                         saveAsImage: {} //下载
  20.                     }
  21.                 },
  22.                 grid: {
  23.                     left: '3%',
  24.                     right: '4%',
  25.                     bottom: '4%',
  26.                     containLabel: true
  27.                 },
  28.                 legend://说明
  29.                     {
  30.                         data: ['销量', '测试']
  31.                     },
  32.                 xAxis: {
  33.                     type: 'category',
  34.                     //data: datas,
  35.                     boundaryGap: false,//是否以原点为起点
  36.                     axisTick: {
  37.                         alignWithLabel: true
  38.                     }
  39.                 },
  40.                 yAxis: {
  41.                     type: 'value'
  42.                 },
  43.                 series: [{
  44.                     name: '访问量',
  45.                     type: 'line',//line 折线图 bar 柱状图
  46.                     //smooth: false, //是否为曲线
  47.                     //areaStyle: {},//是否包含面积
  48.                     barwidth: '10%',
  49.                     //data: [10, 52, 200, 334, 390, 330, 220]
  50.                 }]
  51.             };
  52.             //初始化echarts实例
  53.             var testdata = [, , , , , , ]
  54.             var myChart = echarts.init(document.getElementById("EChart"));
  55.             myChart.setOption(option);
  56.  
  57.             $.post("/Category/Category/GetData").done(function (data) //使用制定的配置项和数据显示图表
  58.             {
  59.                 console.dir(data);
  60.                 myChart.setOption(option);
  61.                 // 填入数据
  62.                 myChart.setOption({
  63.                     xAxis: {
  64.                         data: data.category //X轴节点
  65.                     },
  66.                     series: [{
  67.                         name: '销量',
  68.                         type: 'line',
  69.                         barwidth: '10%',
  70.                         data: data.data
  71.                     }, {
  72.                         name: '测试',
  73.                         type: 'line',
  74.                         data: testdata
  75.                     }]
  76.                 });
  77.  
  78.             });
  79.         })
  80.     </script>

2.html部分,用来放置图表。

  1. <body>
  2.     <div id="EChart" style="width:600px; height: 400px;"></div>
  3. </body>

3.方法

  1.  [HttpPost]
  2.         public JsonResult GetData()
  3.         {
  4.             List<string> category = new List<string>{
  5.                 "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"
  6.             };
  7.             List<int> data = new List<int>{
  8.               , , , , , ,
  9.             };
  10.             return Json(new { category=category,data=data});
  11.         }

4.最终效果图如下

Echarts 一个开源图表设计工具的更多相关文章

  1. .Net开源数据库设计工具Mr.E For Linq (EF 6.1) 教程（三）更新已发布的数据库

    项目发布到服务器后,如果在后期,数据库的结构发生变更,如何更新到服务器呢? 首先,右键点击数据库,导出结构脚本文件 把脚本文件和 Mr.E.rar拷贝到服务器,在服务器解压Mr.E,运行其中的“更新数 ...

  2. .Net开源数据库设计工具Mr.E For Linq (EF 6.1) 教程（二）级联删除和触发器

    1.建立级联删除 Mr.E的级联删除并非数据库自带那个级联删除,而是Mr.E自带的,所以它能触发你C#里面编写的触发器. 首先,建立级联删除关系,如下图有两个表,UserInfo和UserDocume ...

  3. 十个 Web 开发者熟悉的经典开源项目和工具

    摘要: 一个都不知道的算我输! 这篇文章主要列出了曾经乃至现在都十分受 Web 开发者欢迎的开源工具,相信使用开源工具的 Web 开发者会对它们感兴趣的,它们中有的甚至诞生十多年了,但仍然在发光发热. ...

  4. 开源图像标注工具labelme的安装使用及汉化

    一 LabelMe简介 labelme是麻省理工(MIT)的计算机科学和人工智能实验室(CSAIL)研发的图像标注工具,人们可以使用该工具创建定制化标注任务或执行图像标注,项目源代码已经开源. 项目开 ...

  5. 开源负载测试工具k6比JMeter更容易的5件事

    k6是GitHub上提供的开源负载测试工具.它是用Go编写的,并运行用JavaScript编写的测试脚本.它受到了开发人员,测试人员和DevOps团队的强烈兴趣,并拥有超过4400名GitHub明星. ...

  6. 【测试设计】基于正交法的测试用例设计工具--PICT

    前言 我们都知道成对组合覆盖是一种非常有效的测试用例设计方法,但是实际工作过程中当成对组合量太大,我们往往很难做到有效的用例覆盖. PICT是微软公司出品的一款成对组合命令行生成工具,它很好的解决了上 ...

  7. ECharts一个强大的商业产品图表库

    Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构 ...

  8. 图表制作工具之ECharts

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  9. MindMup 是一个开源的、在线的、简单的思维导图工具

    MindMup是一个开源.在线的思维导图工具:它有以下特点: 开源 在线 导图可存放在网站(公有,要是在不同的终端浏览的话需要记住导图的网址)或google driver(私有),无用户名密码 很方便 ...

随机推荐

  1. c# 参数名ascii码从小到大排序(字典序)拼接

    代码如下: /// <summary> /// c# 参数名ascii码从小到大排序(字典序)拼接 /// </summary> /// <param name=&quo ...

  2. WEB UI基础八:链接跳转到标准的工单界面

    接以前做的例子,用组件做了个搜索界面,明细里添加了object_id的链接: method GET_P_OBJECT_ID. "#EC NEEDED ** generated by sear ...

  3. MySQL数据库再回首

    前言: 数据库是程序员的数据源泉,加上近期 要开发DB可视化.性能分析的功能 重新回顾一下MySQL知识,以下是笔记: MySQL架构 MySQL基础理论 1.什么是关系型数据库? 关系型数据库,这个 ...

  4. [LeetCode] 80. Remove Duplicates from Sorted Array II ☆☆☆(从有序数组中删除重复项之二)

    https://leetcode.com/problems/remove-duplicates-from-sorted-array-ii/discuss/27976/3-6-easy-lines-C% ...

  5. There are multiple modules with names that only differ in casing. 黄色warning

    There are multiple modules with names that only differ in casing.有多个模块同名仅大小写不同This can lead to unexp ...

  6. vim 插件 -- taglist

    taglist 插件是基于ctags生成的tags文件一个工具.主要是用来生成当前文件的结构.如:函数名.变量名结构.具体如下图: 下载 https://www.vim.org/scripts/scr ...

  7. dataset数据来源方式两种，页面展示

    这两种方式都能获取到报表类别数据. <%--ds 数据源来自JavaBean--%><model:dataset id="ds"> <model:re ...

  8. Java中的静态和枚举

    一.静态成员 对静态成员最简单的解释,静态成员属于整个类而不属于某个对象,所以又叫做类变量.一个类不管创建多少个实例对象,静态变量在内存中有且只有一个(调用方法用类名调用). 通常的非静态变量称为实例 ...

  9. gitignore不起作用

    .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,原因是因为在git忽略目录中,新建的文件在git中会有缓存,如果某些文件已经被纳入了版本管理中, ...

  10. Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()判断数组的方法的优缺点

    1. Object.prototype.toString.call() 每一个继承 Object 的对象都有 toString 方法,如果 toString 方法没有重写的话,会返回 [Object ...