eCharts的入门和使用

学习echarts的总结
一、图表的实现

(1)首先将echarts.js引入
为echarts提供一个DOM容器（具有宽高）
为echarts配置参数:
第一步：
初始化DOM容器，用echarts.init()函数
第二步：
配置数据选项var option={  
title:{},//图表的标题
tooltip:{},//应用的组件
legend:{},//图例组件包括颜色、朝向、位置等
xAxis:[{}],//直角坐标系中x轴需要配置的
yAxis:[{}],//直角坐标系中y轴需要配置的
series:[{}],//系列列表，包括列表类型、颜色、数据等
}
第三步：myChart.setOption(option);将数据选项更新 以上步骤就可以基本完成一个简单的图表。

实例（柱状图表）（南丁格尔图）

(2)要完成更复杂一些的图表就需要用一些其他的交互组件功能来实现，echarts内置了 图例组件 legend、标题组件 title、视觉映射组件 visualMap、数据区域缩放组件 dataZoom、时间线组件 timeline 等
实例（在图表中加入交互组件）

二、异步数据的加载和更新

（1）一般正常情况图表的数据多数都是异步加载的，需要从后台获取数去并异步的加载到页面。Echarts中实现异步只需要jquery中的工具异步获取数据后通过setOption填入数据和配置即可。如下：

var mychart=echarts.init(document.getElementById(‘main’));
$.get(‘data.json’).done(function(data){
mychart.setOption({
title:{},
tooltip:{},
legend:{},
xAxis:{},
yAxis:{},
series:[{
data:data
}]
})
})
（2）还可以先设置一个空的坐标轴，然后再异步获取数据同样通过setOption载入，如果加载数据时间很长可以在获取数据的这段时间加上一个loading动画。只需调用showLoading ()方法就可以实现，数据加载完成后再用hideLoading()方法隐藏 。如下：


myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);});
（3）数据的动态更新
所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
一般地，是通过定时器定时获取数据并更新到页面
实例（数据的动态更新）

三、移动端的自适应

要实现的方法与CSS中的媒体查询方法类似，通过设置不同媒体下的的样式等实现功能。具体语法如下：


option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option。
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option。
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option。
                legend: {...},
                ...
            }
        }
    ]};
实例中需要再引入timelineGDP.js和draggable.js其中timelineGDP.js还不知道作用是什么，到现在一直也都没有实现，还有待研究。但是实例中移动端的自适应还是正确的
实例（移动端的自适应）


四、数据的视觉映射

（1）概念


数据的可视化就是把数据到视觉元素的映射过程，例如折线图把数据用线表示，柱状图把数据用柱的高度表示诸如此类。
Echarts中的 visualMap 组件就提供数据视觉映射的功能，包括视觉映射中的图形类别，图形大小，颜色，透明度，颜色透明度，颜色明暗度，颜色饱和度，色调等。


（2）visualMap组件


visualMap提供了两种类型的组件，结构如下：


option = {
    visualMap: [ // 可以同时定义多个 visualMap 组件。
        { // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 viusalMap
            ...
        },
        { // 第二个 visualMap 组件
            type: 'piecewise', // 定义为分段型 visualMap
            ...
        }
    ],
...};
实例（数据可视化）定义的是分段型visualMap


五、事件和行为


Echarts中所涉及的事件包含两种，一种是鼠标点击事件，或者hover时触发的事件；另一种是用户在使用可交互组件后触发的行为事件。如实例（在图表中加入交互组件）中的数据缩放时会触发datazoom事件。 事件的绑定用on


（1）鼠标事件


所有的鼠标事件都包含参数params，这是一个包含点击图形的数据信息的对象。可以在回调函数中获取这个对象中的函数名、系列名称等。 如下代码：


myChart.on('click', function (parmas) {
     $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通过饼图表现单个柱子中的数据分布
                data: [detail.data]
            }]
        });
    });});
（2）组件交互的行为事件


交互组件都会触发事件其中的事件种类都在events文档中有列出。用法一样用on.


六、API


Echarts中包含的4个类型的API分别为：  
echarts:{//一个全局对象，引入echarts.js后获得
init()//初始化实例，注意单个容器不能初始化多个实例
connect()//多个图表实例实现联动
disconnect()//解除图表之间的联动，如果只需要移除单个实例，可以 将通过将该图表实例 group 设为空
dispose()//销毁实例，销毁后无法再使用
getInstanceByDom()//获取DOM上的实例
registerMap()//注册可用的地图，必须在包括 geo 组件或者 map 图 表类型的时候才能使用。
getMap()//获取已注册的地图
registerTheme//注册主题，初始化时使用
},
echartsInstance:{},//通过echarts.init创建的实例可以获得实例的各种 属性
action:{},//echarts中支持的图表的行为包括legend:{},tooltip:{}等
events:{}//echarts中包含的事件


最后：给一些笔记：


Echarts.init()初始化Echarts实例


setOption用指定数据绘图


Option对象


标题：title


图例：legend


X轴：xAxis


Y轴：yAxis


数据：series：Name/type/data


option 项中的配置：


tooltip 提示框，鼠标悬浮交互时的信息提示。


trigger: 触发类型


formatter: 正则设置格式 提示框浮层内容格式器


legend: 图例组件


series：系列列表


Axis - 坐标轴


Grid - 网格


Title - 标题


Tooltip - 提示框


Legend - 图例组件


DataZoom - 数据区域缩放


DataRange - 值域漫游


Toolbox - 工具箱（内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。）


Timeline - 时间线


visualMap - 视觉映射组件


textStyle: {


fontSize: 18,


fontWeight: 'bolder',


color: '#333' // 主标题文字颜色


},


subtextStyle: {


color: '#aaa' // 副标题文字颜色


}


center:['30%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置 (Object width, Object height）


radius : ['50%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形


ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 itemStyle 里设置。


例如阴影的样式可以通过下面几个配置项设置：


itemStyle : //图形样式


itemStyle: {


normal: {


// 阴影的大小


shadowBlur: 200,


// 阴影水平方向上的偏移


shadowOffsetX: 0,


// 阴影垂直方向上的偏移


shadowOffsetY: 0,


// 阴影颜色


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


}


}


Node Package Manager 节点的软件包管理器（简称npm）


Option正式代码中使用，不需要任何依赖。


GsonOption正式代码中可以使用，需要引入Gson包，使用toString()方法可以转换为JSON结构的数据（支持function，详情看下面的function说明）。


EnhancedOption测试专用，主要方便在浏览器中直接查看效果。


使用GsonOption,FsonOption的toString()方法返回给前端时，前端需要使用eval('('+optionJsonStr+')')转换为JSON结构


定义了一个Option对象，里面的参数都可以在里面以方法或者属性的方式调用。最后封装好Option后，把他放入jsonObject对象传回前台一接收json值即可。


formatter: "{a}
{b}: {c} ({d}%)"


这里补充一下formatter格式化方法的参数说明：


{string}，模板（Template），其变量为：


{a} | {a0}


{b} | {b0}


{c} | {c0}s


{d} | {d0} （部分图表类型无此项）


多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...


其中变量a、b、c在不同图表类型下代表数据含义为：


折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）


散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）


饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）


弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)


力导向图 :


节点 : a（类目名称），b（节点名称），c（节点值）


边 : a（系列名称），b（源名称-目标名称），c（边权重）， d（如果为true的话则数据来源是边）


{Function}，传递参数列表如下：


params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...]


ticket : 异步回调标识


callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html


自己多琢磨，多练习很容易就上手的！


*重要*：Echart非静态数据，一般在cotroller中获取数据，设置option属性，返回option对象。