ECharts旭日图旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。ECharts创建旭日图很简单，只需要在series配置项中声明类型为sunburst即可，data数据结构以树形结构声明，看下一个简单的实例：实例varoption={ series:{ type:'sunburst', data:[{ name:'A', value:10, children:[{ value:3, name:'Aa'
ECharts事件处理ECharts中我们可以通过监听用户的操作行为来回调对应的函数。ECharts通过on方法来监听用户的行为，例如监控用户的点击行为。ECharts中事件分为两种类型:用户鼠标操作点击，如'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'事件。还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的'legendselectchanged'事件），数据区域缩放时触发的'datazoom'事件等等。myC
ECharts事件处理ECharts中我们可以通过监听用户的操作行为来回调对应的函数。ECharts通过on方法来监听用户的行为，例如监控用户的点击行为。ECharts中事件分为两种类型:用户鼠标操作点击，如'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'事件。还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的'legendselectchanged'事件），数据区域缩放时触发的'datazoom'事件等等。myC
ECharts数据的视觉映射数据可视化简单来讲就是将数据用图表的形式来展示，专业的表达方式就是数据到视觉元素的映射过程。ECharts的每种图表本身就内置了这种映射过程，我们之前学习到的柱形图就是将数据映射到长度。此外，ECharts还提供了visualMap组件来提供通用的视觉映射。visualMap组件中可以使用的视觉元素有：图形类别（symbol）图形大小（symbolSize）颜色（color）透明度（opacity）颜色透明度（colorAlpha）颜色明暗度（colorLightness）颜色饱和度（colorSaturation）色调（colorHue）数据和维度ECharts中
ECharts数据的视觉映射数据可视化简单来讲就是将数据用图表的形式来展示，专业的表达方式就是数据到视觉元素的映射过程。ECharts的每种图表本身就内置了这种映射过程，我们之前学习到的柱形图就是将数据映射到长度。此外，ECharts还提供了visualMap组件来提供通用的视觉映射。visualMap组件中可以使用的视觉元素有：图形类别（symbol）图形大小（symbolSize）颜色（color）透明度（opacity）颜色透明度（colorAlpha）颜色明暗度（colorLightness）颜色饱和度（colorSaturation）色调（colorHue）数据和维度ECharts中
ECharts响应式ECharts图表显示在用户指定高宽的DOM节点（容器）中。有时候我们希望在PC和移动设备上都能够很好的展示图表的内容，实现响应式的设计，为了解决这个问题，ECharts完善了组件的定位设置，并且实现了类似CSSMediaQuery的自适应能力。ECharts组件的定位和布局大部分『组件』和『系列』会遵循两种定位方式。left/right/top/bottom/width/height定位方式这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。绝对值单位是浏览器像素（px），用number形式书写（不写单位）。例如{left:23,height:400}。百
ECharts响应式ECharts图表显示在用户指定高宽的DOM节点（容器）中。有时候我们希望在PC和移动设备上都能够很好的展示图表的内容，实现响应式的设计，为了解决这个问题，ECharts完善了组件的定位设置，并且实现了类似CSSMediaQuery的自适应能力。ECharts组件的定位和布局大部分『组件』和『系列』会遵循两种定位方式。left/right/top/bottom/width/height定位方式这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。绝对值单位是浏览器像素（px），用number形式书写（不写单位）。例如{left:23,height:400}。百
ECharts交互组件ECharts提供了很多交互组件：例组件legend、标题组件title、视觉映射组件visualMap、数据区域缩放组件dataZoom、时间线组件timeline。接下来的内容我们将介绍如何使用数据区域缩放组件dataZoom。dataZoomdataZoom组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。默认情况下dataZoom控制x轴，即对x轴进行数据窗口缩放和数据窗口平移操作。实例option={ xAxis:{ type:'value' }, yAxis:{ type:'value' }, dataZoom:[ { //这个da
ECharts交互组件ECharts提供了很多交互组件：例组件legend、标题组件title、视觉映射组件visualMap、数据区域缩放组件dataZoom、时间线组件timeline。接下来的内容我们将介绍如何使用数据区域缩放组件dataZoom。dataZoomdataZoom组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。默认情况下dataZoom控制x轴，即对x轴进行数据窗口缩放和数据窗口平移操作。实例option={ xAxis:{ type:'value' }, yAxis:{ type:'value' }, dataZoom:[ { //这个da
ECharts数据集（dataset）ECharts使用dataset管理数据。dataset组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。下面是一个最简单的dataset的例子：实例option={ legend:{}, tooltip:{}, dataset:{ //提供一份数据。 source:[ ['product','2015','2016','2017'], ['MatchaLatte',43.3,85.8,93.7], ['MilkTea',83.1,73.4,55.1],
