一般来说，因有所需，方有所求。最近项目中有这方面的需求，用着感觉不错。特此记录！此处仅是一个简单的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 一个开源图表设计工具的更多相关文章

  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. java中JScrollPane不显示水平滚动条的解决办法

    在JPanel中添加了表格,表格中对东西太多,需要水平滚动条滑动才能够完全找到所有数据,如果没有水平滚动条的话,数据堆积在一起,无法分开 做法是: 第一步:先将表格自动调整的状态给关闭掉:table. ...

  2. maven将依赖的jar包复制到指定位置

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  3. Qt UI tips

    窗口居中:  adjustSize(); move((availableGeometry.width() - width()) / 2, (availableGeometry.height() - h ...

  4. ORM概念

    ORM概念: 指对象结构和数据库架构间的映射,对象和数据库架构有一定的映射关系,让程序员可以不必编写sql

  5. Delphi下的WinSock编程

    一.定址        要通过Winsock建立通信,必须了解如何利用指定的协议为工作站定址.Winsock 2引入了几个新的.与协议无关的函数,它们可和任何一个地址家族一起使用:但是大多数情况下,各 ...

  6. 关于WinSock编程的多线程控制

    1引言Windows Sockets规范以U.C. Berkeley大学BSD UNIX中流行的Socket接口为范例定义了一套Microsoft Windows下网络编程接口.它不仅包含了人们所熟悉 ...

  7. IDEA解决SVN更新冲突

    在有冲突的文件上右键-> subversion ->resolve Text Confict->merge 将代码合并.

  8. 201671010142 2017-2 《java第十章学习感悟》

    组件:Java把由Component类的子类或间接子类创建的对象称为一个组件. 容器:是Java中能容纳和排列组件的组件. Container类提供了一个方法add(),用来在容器类组件对象中添加其他 ...

  9. leetcode python 033 旋转数组查找

    ## 假设升序,import random def find(y):    l,m=len(y),0    while l>1:        n=int(l/2)        if y[0] ...

  10. Git实操

    使用git首先要理解工作区(working).暂存区(stage或者index).和版本库(repo区),很多命令都是和这三个概念相关的. git init 初始化git仓库,会生成默认的.git文件 ...