ECharts使用

1.文档和教程

ECharts：
- ECharts 特性
- 官方教程
- 视频教程：Echarts3.0入门基础与实战（慕课网）
- API
- 配置项
优点：
- 免费，原生全中文
- 开源，文档比较详细
- 效果酷炫：
  - echarts实现3D图形：Earth with sun light and universe

2.绘制一个简单的图表：

引入ECharts：像普通的 JavaScript 库一样用 script 标签引入。
为ECharts准备一个具备高宽的 DOM 容器。
通过 echarts.init 方法初始化一个 echarts 实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

3.异步数据加载和更新

ECharts中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过setOption填入数据和配置项就行。
loading 动画
- 如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。
- ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
function fetchData(cb) {
    // 通过 setTimeout 模拟异步加载
    setTimeout(function () {
        cb({
            categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            data: [5, 20, 36, 10, 10, 20]
        });
    }, 3000);
}

// 初始 option
option = {
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
};

myChart.showLoading();

fetchData(function (data) {
    myChart.hideLoading();
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

4.鼠标事件的处理

在 ECharts 中事件分为两种类型，
- 一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，
- 还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 'legendselectchanged' 事件，数据区域缩放时触发的 'datazoom' 事件等等。
ECharts 支持常规的鼠标事件类型，包括：
- 'click'、'dblclick'、
- 'mousedown'、'mousemove'、'mouseup'、
- 'mouseover'、'mouseout'
下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。

// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
    window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，如下格式：

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

5.组件交互的行为事件

在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出。下面是监听一个图例开关的示例：

// 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged', function (params) {
    // 获取点击图例的选中状态
    var isSelected = params.selected[params.name];
    // 在控制台中打印
    console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
    // 打印所有图例的状态
    console.log(params.selected);
});

在 ECharts 3 里改为通过调用 myChart.dispatchAction({ type: '' }) 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。
常用的动作和动作对应参数在 action 文档中有列出。

6.系列列表

每个系列通过 type 决定自己的图表类型series[i]-map
地图。
- 地图主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的人口分布密度等数据。
- 多个地图类型相同的系列会在同一地图上显示，这时候使用第一个系列的配置项作为地图绘制的配置。
- Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint。如果要实现点数据或者线数据的可视化，可以使用在地理坐标系组件上的散点图和线图。
http://echarts.baidu.com/option.html#series-map

7.鼠标悬停提示

提示框组件的通用介绍：提示框组件可以设置在多种地方：
- 可以设置在全局，即 tooltip
- 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
- 可以设置在系列中，即 series.tooltip
- 可以设置在系列的每个数据项中，即 series.data.tooltip
使用：http://echarts.baidu.com/option.html#series-map.tooltip
- 即：series-->map-->tooltip
position：
- 注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
- 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
formatter：
- 注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
- 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
- 1, 字符串模板
- 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
backgroundColor：
- [ default: 'rgba(50,50,50,0.7)' ]
- 注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
- 提示框浮层的背景颜色。
borderColor
- [ default: '#333' ]
- 注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
- 提示框浮层的边框颜色。
borderWidth
- [ default: 0 ]
- 注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
- 提示框浮层的边框宽。
padding
- [ default: 5 ]
- 注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
- 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
textStyle
- 注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
- 提示框浮层的文本样式。
- color Color
  - [ default: '#fff' ]
  - 文字的颜色。
- fontSize number
  - [ default: 14 ]
  - 文字的字体大小

8.鼠标单机弹窗

决定用：layer.js
API文档：http://www.layui.com/doc/modules/layer.html
引用：
- https://cdn.bootcss.com/layer/3.1.0/layer.js
- http://apps.bdimg.com/libs/layer/2.1/layer.js

1.文档和教程

2.绘制一个简单的图表：

3.异步数据加载和更新

4.鼠标事件的处理

5.组件交互的行为事件

6.系列列表

7.鼠标悬停提示

8.鼠标单机弹窗

猜你喜欢