极客神殿

ASP.NET Core SignalR 是一种开放源代码库，可简化将实时 web 功能添加到应用程序的功能。 实时 web 功能使服务器端代码可以立即将内容推送到客户端。可以根据当前浏览器所支持的协议来选择最优的连接方式，从而可以让我们把更多的精力放在业务上而不是底层传输技术上。Apple Safari（包含IOS端）、Google Chrome（包括 Android端）、Microsoft Edge、Mozilla Firefox等主流浏览器都支持 ASP.NET Core。本次我们将实现一个通过来简

常用的 图表组件 Chart.js与ECharts.js的简要介绍与使用。Chart.js官方网址。里面包括文档、例子和GitHub代码。界面小清新很漂亮。例子很全。各种图表都有。点进去还可以修改数据条数、数据长度等等。ECharts.js官方网址。EChart.js是Apache出的图标组件库。与Chart.js相比，Echarts.js动态效果更优秀一些。界面看起来就更“上档次”。支持中英文切换，亲民。例子界面，更全面更直观。每个例子点进去代码直接展示在左侧，图表结果展示在右侧，非常直观。Ch

1.highcharts是外国的公司的专业团队当做公司的重要产品去开发迭代的开源项目， echarts是国内百度公司的一个技术团队维护开的开源工具项目。2.从收费角度看：highcharts商用需要收费，echarts商用也免费。3.从学习成本上看：前者有完整的实例演示（html，js），功能介绍和详细的api文档。echarts有实例演示和API文档但是还是偏少。4.从技术实现看：high...

百度echarts

小例子：自己实现拖拽介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富有交互的功能。这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。e

ECharts 中的事件和行为在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。在 ECharts 3 中绑定事件跟 2 一样都是通过 on 方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。

数据的视觉映射数据可视化是 数据 到 视觉元素 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 graph、事件河流图、treemap 也都会做出他们内置的映射。此外，ECharts 还提供了 visualMap 组件 来提供通用的视觉映射。visua

移动端自适应ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。另外，有时会出现一个图表需要同时在PC、移动端上展...

在图表中加入交互组件除了图表外 ECharts 中，提供了很多交互组件。例如：图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline下面以 数据区域缩放组件 dataZoom 为例，介绍如何加入这种组件。数据区域缩放组件（dataZoom）介绍『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。dat

异步加载入门示例中的数据是在初始化后setOption中直接填入的，但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。var myChart = echarts.init(document.getElementById('main'));$.ge

在 webpack 中使用 EChartsWebpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。npm 安装 ECharts在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 3.1.1 开始由官方 EFE 维护 npm

ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：绘制南丁格尔图上一篇中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxi

一般来说，可以直接从 echarts 下载页 中获取构建好的 echarts，也可以从 GitHub 中的 echarts/dist 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all

获取 ECharts你可以通过以下几种方式获取 ECharts。从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echart

使用 Canvas 或者 SVG 渲染浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 ECharts v3.8 发布了 S

富文本标签在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：其他一些例子： Map Labels, Pie Labels, Gauge.原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。echarts v3.7 以后，支持了富文本标签，能够：能够定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等

自定义系列自定义系列（custom series），是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。echarts 为什么会要支持 自定义系列 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方

小例子：实现日历图在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？通过以下三个步骤即可实现上述效果：第一步：引入js文件下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦<script src="echarts.min.js"></script><script> // ...</script>第二步：指定DOM元素作为图表容器和ECharts