近来趁着空闲时间了解了一下 ECharts。也顺带记录一番。

首先要从下载ECharts库，这个从官网可以直接下载。

引入ECharts.JS

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <script src="~/lib/jquery/dist/jquery.js"></script>

    <!-- 引入 echarts.js -->

    <script src="~/dist/echarts.min.js"></script>

</head>

准备容器

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 1000px;height:600px;"></div>

绘制图表之前需要了解的一些概念(出自api)

1，系列(series)：在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

2，组件(component)：在系列之上，echarts 中各种内容，被抽象为“组件”。例如：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiuAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...

使用option 描述图表和ajax载入数据

option的话可以根据自己的需求进行设计(需要什么类型的图表，要什么数据)。

数据的话可以再series里直接填入，也可以用异步加载方式，下面就是通过ajax载入的。

最后只需要通过 setOption 填入就行。

 <script type="text/javascript">

          // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        var seriesData = [];

        var legendData = [];

            $.post("/Account/EchartsInfo", function (data) {

                var list = eval("(" + data + ")");

                for (var i = 0; i < list.length; i++) {

                    seriesData.push({

                        name: list[i]['name'],

                        value: list[i]['count']

                    })

                    legendData.push((list[i]['name']))

                }

           // 指定图表的配置项和数据

          var option = {

            title: {

                text: '博客分布',

                subtext: '本网站作者发布博客统计环形图',

            },

            tooltip: {

                trigger: 'item',

                formatter: "{a} <br/>{b} : {c} ({d}%)"

            },

              legend: {

                type: 'scroll',

                orient: 'vertical',

                bottom: '20px',

                left: 'right',

                data:legendData

              },

            series: [

                {

                    name: '博客量统计',

                    //hover状态下的扇区放大动画效果，默认为true

                    hoverAnimation: true,

                    type: 'pie',

                    radius: '70%',

                    center: ['50%', '60%'],

                    data: seriesData,

                     emphasis: {

                    itemStyle: {

                    shadowBlur: 100,

                    shadowOffsetX: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

                    },

                }

            ]

        };

                  myChart.setOption(option)

            });

    </script>

效果：

一般通过异步载入的时候可能会出现数据加载时间较长的情况，ECharts 提供了一个简单的加载动画。

显示动画：

    myChart.showLoading();

隐藏动画:

  myChart.hideLoading();

我们也可以再更改容器的颜色主题：

var chart = echarts.init(main, 'dark');

效果：

　

　

　　

初窥ECharts的更多相关文章

  1. Scrapy001-框架初窥

    Scrapy001-框架初窥 @(Spider)[POSTS] 1.Scrapy简介 Scrapy是一个应用于抓取.提取.处理.存储等网站数据的框架(类似Django). 应用: 数据挖掘 信息处理 ...

  2. 初窥Kaggle竞赛

    初窥Kaggle竞赛 原文地址: https://www.dataquest.io/mission/74/getting-started-with-kaggle 1: Kaggle竞赛 我们接下来将要 ...

  3. scrapy2_初窥Scrapy

    递归知识:oop,xpath,jsp,items,pipline等专业网络知识,初级水平并不是很scrapy,可以从简单模块自己写. 初窥Scrapy Scrapy是一个为了爬取网站数据,提取结构性数 ...

  4. WWDC15 Session笔记 - Xcode 7 UI 测试初窥

    https://onevcat.com/2015/09/ui-testing/ WWDC15 Session笔记 - Xcode 7 UI 测试初窥 Unit Test 在 iOS 开发中已经有足够多 ...

  5. Java发送邮件初窥

    一.背景 最近朋友的公司有用到这个功能,之前对这一块也不是很熟悉,就和他一起解决出现的异常的同时,也初窥一下使用Apache Common Email组件进行邮件发送. 二.Java发送邮件的注意事项 ...

  6. 【软件工程】week5-个人作业-敏捷开发方法初窥

    敏捷开发方法初窥 引言:本周的软件工程个人博客作业是阅读关于敏捷开发方法的文章(http://martinfowler.com/agile.html),并撰写自己的读后感.文章内容非常丰富,对敏捷开发 ...

  7. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  8. iOS视频直播初窥:高仿<喵播APP>

    视频直播初窥 视频直播,可以分为 采集,前处理,编码,传输, 服务器处理,解码,渲染 采集: iOS系统因为软硬件种类不多, 硬件适配性比较好, 所以比较简单. 而Android端市面上机型众多, 要 ...

  9. php面向对象(一) 初窥

    初窥php面向对象 1.类:类就是属性和方法的集合 是一个抽象的概念比如生活中的“人”,"汽车"2.对象:对象是具体的事物 比如一叫“小强”的人 一辆叫“奥迪a7”的汽车3.类和对 ...

随机推荐

  1. 十大排序算法（Java实现）

    一.冒泡排序(Bubble Sort) public class BubbleSort { public static void main(String[] args) { int[] arr = { ...

  2. [bzoj4942] [洛谷P3822] [NOI2017] 整数

    题目链接 https://www.luogu.org/problemnew/show/P3822 想法 这个啊,就是线段树哇 最初的想法是每位一个节点,然后进位.退位找这一位前面第一个0或第一个1,然 ...

  3. [ Python入门教程 ] Python中日期时间datetime模块使用实例

    Python中datetime模块提供强大易用的日期处理功能,用于记录程序操作或修改时间.时间计算.日志时间显示等功能.datatime模块重新封装了time模块,提供的类包括date.time.da ...

  4. volatile梳理

    volatile 可见性也就是说一旦某个线程修改了该被volatile修饰的变量,它会保证修改的值会立即被更新到主存,当有其他线程需要读取时,可以立即获取修改之后的值. 在Java中为了加快程序的运行 ...

  5. 容器技术与docker

    名词介绍 IaaS:基础设施即服务,要搭建上层数据应用,先得通过互联网获得基础性设施服务 PaaS:平台即服务,搭建平台,集成应用产品,整合起来提供服务 SaaS:软件即服务,通过网络提供程序应用类服 ...

  6. zabbix3.4搭建微信报警

    身为小白的我在历经被百度查到的资料坑了无数次之后,终于找到了一个正确的文档,下面是我自己的对于安装过程的理解与阐述. 一.申请微信企业号,获取以下数据. 企业ID:(在我们企业最下方可以看到) 应用的 ...

  7. C语言遇到的关于清除标准输入缓冲区的问题[编程入门]

    关于标准输入缓冲区的一个易犯的小错误 之前写了个简易的登录程序,但显然这不像写Java时那么容易(只要思路对,基本没问题).一不留神就出现了小BUG! 以下是错误的源代码: #include < ...

  8. Node——request使用代理

    本文知识点 Node环境搭建 使用代理 进阶学习 环境配置 Node 安装request 安装request npm install request 确认环境安装无误 node -v 代码样例 使用代 ...

  9. Codeforces_714_B

    http://codeforces.com/problemset/problem/714/B 当不同大小整数有1.2个时,肯定成立,3个时,需要判断,大于等于4个,则肯定不成立. #include & ...

  10. Codeforces 1062B Math(质因数分解)

    题意: 给一个数n,可以将它乘任意数,或者开方,问你能得到的最小数是多少,并给出最小操作次数 思路: 能将这个数变小的操作只能是开方,所以构成的最小数一定是 $n = p_1*p_2*p_3*\dot ...