Vgbhfive's Blog

ECharts 快速入门

Posted on Edited on

获取ECharts

  1. 官网下载
    在这里我比较推荐去ECharts官网下载，在官网里可以根据你的项目需求而组合你想要的组件。
  2. 从Github 上下载最新的release 版本
    Github地址
  3. npm安装
    1
    npm install echarts --save
  4. cdn引入
    你可以在cdnjs、npmcdn、bootcdn 上找到ECharts 的最新版本。

引入ECharts

从ECharts 3开始，不再强制使用AMD 方式按需引入，现在可以像引入其他的JavaScript 文件一样引入。

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

开始使用

简单样例

Html代码：

1
2
3
4
5
6
7
8
9
10
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
 	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="charts" style="width: 600px;height:400px;"></div>
</body>

JavaScript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script type="text/javascript">
 	var chart = echarts.init(document.getElementById("charts"));
    var option = {
        title : {
            text: getCookie("userName") + " - 收入与支出饼状图",
            subtext: '详细信息见上方',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['日常饮食','交通出行','服饰美容','住房缴费','文教健康']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:3, name:'日常饮食'},
                    {value:12, name:'交通出行'},
                    {value:8, name:'服饰美容'},
                    {value:19, name:'住房缴费'},
                    {value:20, name:'文教健康'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }    
                }
            }
        ]
    }
    chart.setOption(option);
</script>

个性化图表样式

ECharts 提供了很丰富的自定义配置选项，并且能够从全局、系列、数据三个层次去设置数据图形的样式。

  1. 南丁格尔图
    下面的是一个简单的饼图，饼图主要通过扇形的弧度来表示不同科目在总和中的所占比。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <script type="text/javascript">
     	myChart.setOption({
    	    series : [
    	        {
    	            name: '访问来源',
    	            type: 'pie',
    	            radius: '55%',
    	            data:[
    	                {value:235, name:'视频广告'},
    	                {value:274, name:'联盟广告'},
    	                {value:310, name:'邮件营销'},
    	                {value:335, name:'直接访问'},
    	                {value:400, name:'搜索引擎'}
    	            ]
    	        }
    	    ]
    	});
    </script>

    通过设置roseType 支持将饼图显示为南丁格尔图。

    1
    roseType : 'angle'

    南丁格尔图会通过半径表示数据的大小。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    itemStyle: {
    	shadowBlur: 200,
    	shadowOffsetX: 0,
    	shadowOffsetY: 0,
    	shadowColor: 'rgba(0, 0, 0, 0.5)',
    	emphasis: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }

    itemStyle 的emphasis 是鼠标hover 时候的高亮样式。
    这里样例表示的就是鼠标hover 的时候通过阴影突出显示。

  3. 深色背景和浅色标签
    背景色是全局属性，所以直接在option 中设置backgroundColor 。

    1
    2
    3
    setOption({
        backgroundColor: '#2c343c'
    })

    设置textStyle 可以为全局，也可以是局部的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // 全局
    setOption({
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    })
    // 局部 
    label: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
    }
    labelLine: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }

  4. 设置扇形颜色
    扇形的颜色也是在itemStyle 中设置。

    1
    2
    3
    4
    5
    6
    itemStyle: {
        // 设置扇形的颜色
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }

    如果只是为了体现明暗度的变化，还有一种快捷的方式就是使用visualMap 组件将数值的大小映射到明暗度。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    visualMap: {
        // 不显示 visualMap 组件，只用于明暗度的映射
        show: false,
        // 映射的最小值为 80
        min: 80,
        // 映射的最大值为 600
        max: 600,
        inRange: {
            // 明暗度的范围是 0 到 1
            colorLightness: [0, 1]
        }
    }

webpack 中使用ECharts

webpack是目前比较流行的模块打包工具，你可以在使用webpack 的项目中很轻松的引入和使用ECharts 。

  1. npm安装ECharts
    使用以下命令来通过npm安装ECharts。

    1
    npm install echarts --save

  2. 引入ECharts
    通过npm 安装的ECharts 会放在node_modules 目录下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var echarts = require('echarts');

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('charts'));
    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
            data: ['日常饮食', '交通出行', '服饰美容', '住房缴费', '文教健康']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 20]
        }]
    });

  3. 按需引入ECharts 图表和组件
    在默认使用require(‘echarts’) 时，会引入ECharts 所有的图表和组件，因此体积会很大，所有建议按需引入。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // 引入 ECharts 主模块
    var echarts = require('echarts/lib/echarts');
    // 引入柱状图
    require('echarts/lib/chart/bar');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
            data: [日常饮食', '交通出行', '服饰美容', '住房缴费', '文教健康']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 20]
        }]
    });

  4. 按需引入:
    具体内容

ECharts中的样式简介

  1. 主题(Theme)
    最简单的更改全局样式就是直接采用颜色主题。
    在ECharts4 之后，新内置了两套主题，分别是light、dark 。

    1
    2
    var chart = echarts.init(dom, 'light');
    var chart = echarts.init(dom, 'dark');

  2. 调色盘
    调色盘可以直接在option 中设置，它给定了一组颜色、图形、系列会自动从其中选择颜色。
    可以设置全局的调色盘，也可以设置局部的调色盘。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    option = {
        // 全局调色盘。
        color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

        series: [{
            type: 'bar',
            // 此系列自己的调色盘。
            color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
            ...
        }, {
            type: 'pie',
            // 此系列自己的调色盘。
            color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
            ...
        }]
    }

  3. 直接样式设置
    直接的样式设置在ECharts 中是最常用的。但是在option 中，在很多地方可以设置itemStyle、lineStyle 等，这些地方可以设置图形元素的颜色、线宽、点的大小、标签文字、标签的样式等。

  4. 视觉映射
    visualMap 组件可以指定数据到颜色、图形尺寸的映射规则。

ECharts 数据管理

  1. 异步数据加载和更新
    入门级的数据加载是在初始化后通过setOption() 函数直接填入的，但是很多时候需要异步加载数据。
    ECharts 中实现数据的异步加载更新非常简单，在图标初始化后并且获取数据后通过setOption() 函数填入数据和配置项即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var myChart = echarts.init(document.getElementById('main'));

    $.get('data.json').done(function (data) {
        myChart.setOption({
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    });

    或者可以先设置图标的样式，显示一个空的图标，再获取数据后填入数据。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    });

    // 异步加载数据
    $.get('data.json').done(function (data) {
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: data.categories
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '销量',
                data: data.data
            }]
        });
    });

  2. 使用dataset 管理数据
    ECharts 由数据驱动，数据的改变驱动图层展现的改变，因此动态数据的实现也变得异常简单。
    所有的数据都是通过setOption() 实现，你只需要定时获取数据，setOption() 函数只需要填入数据，而不是考虑数据到底哪里发生了变化，ECharts 会比对两组数据之间的变化然后通过合适的动画去表现数据的变化。

  3. loading 动画
    在数据加载的时候，一个空的坐标轴放在画布上是不是让用户觉得出现了bug 。
    ECharts 默认提供一个简单的数据加载动画。只需要调用showLoading() 函数显示，数据加载完之后再调用hideLoading() 函数隐藏动画。

    1
    2
    3
    4
    5
    myChart.showLoading();
       $.get('data.json').done(function (data) {
    	myChart.hideLoading();
    	myChart.setOption(...);
    });

图表中加入交互组件

除了图表外，ECharts 还提供了许多的交互组件。
比如legend (图例组件)、title(标题组件)、visualMap (视觉映射组件)、dataZoom (数据区域缩放组件)、timeline (时间线组件)。

下面以dataZoom 数据区域缩放组件为例，介绍如何使用这个组件。

  1. dataZoom 组件就是对数轴(axis) 进行数据窗口缩放、数据窗口平移操作。
  2. dataZoom 组件可同时存在多个，祈祷共同控制的作用，当控制同一个数轴的组件时，会自动联动。
  3. dataZoom 组件的运行原理是通过数据过滤来达到数据窗口缩放的效果。(数据过滤模式的设置不同，效果也不同。)
  4. dataZoom 组件的数据窗口范围的设置，目前只支持两种方式:百分比形式和绝对数值形式。
  5. dataZoom 组件现在支持的子组件有:
    1. 内置型数据区域缩放组件(dataZoomInside ):
      内置于坐标系中。
    2. 滑动型数据区域缩放组件(dataZoomSlider ):
      有单独的滑动条操作。
    3. 框选型数据区域缩放组件(dataZoomSelect ):
      全屏的选框进行数据区域缩放。
  6. dataZoom 可以在直角坐标系(gird)、极坐标系(polar) 中实现这一功能。
    示例代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <script type="text/javascript">
      	option = {
    	    xAxis: {
    	        type: 'value'
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    dataZoom: [
    	        {
    	            type: 'slider',
    	            xAxisIndex: 0,
    	            start: 10,
    	            end: 60
    	        },
    	        {
    	            type: 'inside',
    	            xAxisIndex: 0,
    	            start: 10,
    	            end: 60
    	        },
    	        {
    	            type: 'slider',
    	            yAxisIndex: 0,
    	            start: 30,
    	            end: 80
    	        },
    	        {
    	            type: 'inside',
    	            yAxisIndex: 0,
    	            start: 30,
    	            end: 80
    	        }
    	    ],
    	    series: [
    	        {
    	            type: 'scatter', // 这是个『散点图』
    	            itemStyle: {
    	                opacity: 0.8
    	            },
    	            symbolSize: function (val) {
    	                return val[2] * 40;
    	            },
    	            data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
    	        }
    	    ]
    	}
    </script>

ECharts 中的事件和行为

在ECharts 的进行相关的操作会触发不同的效果。

ECharts 3 中，事件名称对应DOM 事件名称，均为小写的字符串，样例如下:

1
2
3
4
myChart.on('click', function (params) {
    // 控制台打印数据的名称
    console.log(params.name);
});

在ECharts 中事件主要分为两种类型:用户鼠标点击事件、交互组件的行为事件。

  1. 鼠标点击事件
    ECharts 支持的鼠标时间类型有: click、 dbclick、 mousedown、 mousemove、 mouseup、 mouseover、 mouseout、 globalout、 contextmenu 事件。
    所有的鼠标事件都包含参数params ，这是一个包含点击图形的数据信息的对象。
    根据传参来判断鼠标点击的具体位置。
    样例代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    // 基于准备好的dom，初始化ECharts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            data: ['日常饮食','交通出行','服饰美容','住房缴费','文教健康']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 20]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 处理点击事件并且判断鼠标点击位置。
    myChart.on('click', function (params) {
        if (params.componentType === 'markPoint') {
            // 点击到了 markPoint 上
            if (params.seriesIndex === 5) {
                // 点击到了 index 为 5 的 series 的 markPoint 上。
            }
        }
        else if (params.componentType === 'series') {
            if (params.seriesType === 'graph') {
                if (params.dataType === 'edge') {
                    // 点击到了 graph 的 edge（边）上。
                }
                else {
                    // 点击到了 graph 的 node（节点）上。
                }
            }
        }
    });

    说一下参数params 的具体信息:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    {
        // 当前点击的图形元素所属的组件名称，
        // 其值如 '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
    }

    使用query 可以对指定的图形元素进行出发回调。
    样例代码1:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    chart.setOption({
        // ...
        series: [{
            // ...
        }, {
            // ...
            data: [
                {name: 'xx', value: 121},
                {name: 'yy', value: 33}
            ]
        }]
    });
    chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
        // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。
    });

    样例代码2:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    chart.setOption({
        // ...
        series: {
            // ...
            type: 'custom',
            renderItem: function (params, api) {
                return {
                    type: 'group',
                    children: [{
                        type: 'circle',
                        name: 'my_el',
                        // ...
                    }, {
                        // ...
                    }]
                }
            },
            data: [[12, 33]]
        }
    })
    chart.on('mouseup', {element: 'my_el'}, function () {
        // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。
    });

  2. 交互组件的事件行为
    在ECharts 中基本上所有的组件交互行为都会被触发相应的事件，常用的事件和事件对应参数可以查看官网。
    样例代码:

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

    注：另外代码也可以触发组件行为

总结样例

实现拖拽

  1. 样例代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">

        var symbolSize = 20;
        var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];

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

        myChart.setOption({
            tooltip: {
                triggerOn: 'none',
                formatter: function (params) {
                    return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
                }
            },
            xAxis: {
                min: -100,
                max: 80,
                type: 'value',
                axisLine: {onZero: false}
            },
            yAxis: {
                min: -30,
                max: 60,
                type: 'value',
                axisLine: {onZero: false}
            },
            series: [
                {
                    id: 'a',
                    type: 'line',
                    smooth: true,
                    symbolSize: symbolSize,
                    data: data
                }
            ],
        });
        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) {
                return {
                    type: 'circle',
                    position: myChart.convertToPixel('grid', item),
                    shape: {
                        r: symbolSize / 2
                    },
                    invisible: true,
                    draggable: true,
                    ondrag: echarts.util.curry(onPointDragging, dataIndex),
                    onmousemove: echarts.util.curry(showTooltip, dataIndex),
                    onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                    z: 100
                };
            })
        });

        window.addEventListener('resize', function () {
            myChart.setOption({
                graphic: echarts.util.map(data, function (item, dataIndex) {
                    return {
                        position: myChart.convertToPixel('grid', item)
                    };
                })
            });
        });

        function showTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: dataIndex
            });
        }

        function hideTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'hideTip'
            });
        }

        function onPointDragging(dataIndex, dx, dy) {
            data[dataIndex] = myChart.convertFromPixel('grid', this.position);
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    </script>
    </body>
    </html>

  2. 解析

  3. 首先实现一个折线图

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    var symbolSize = 20;

    // 这个 data 变量在这里单独声明，在后面也会用到。
    var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];

    myChart.setOption({
        xAxis: {
            min: -100,
            max: 80,
            type: 'value',
            axisLine: {onZero: false}
        },
        yAxis: {
            min: -30,
            max: 60,
            type: 'value',
            axisLine: {onZero: false}
        },
        series: [
            {
                id: 'a',
                type: 'line',
                smooth: true,
                symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。
                data: data
            }
        ]
    });

  4. 增加拖拽功能
    使用graphic 组件，在每个点上面，覆盖一个隐藏的可拖拽的点。
    下面的代码中使用了convertToPixel() 这个API ，进行了data 到像素坐标的转换，从而得到每个点的位置，从而绘制出这些点。
    myChart.convertToPixel(‘grid’, dataItem) 这行代码中，第一个参数’grid’ ，表示dataItem 在grid 这个组件中（即直角坐标系）中进行转换。
    所谓像素坐标，就是以echarts 容器dom element 的左上角为零点的以像素为单位的坐标系中的坐标。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    myChart.setOption({
        // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。
        // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。
        // 用 map 方法遍历 data 的每项，为每项生成一个圆点。
        graphic: echarts.util.map(data, function (dataItem, dataIndex) {
            return {
                // 'circle' 表示这个 graphic element 的类型是圆点。
                type: 'circle',

                shape: {
                    // 圆点的半径。
                    r: symbolSize / 2
                },
                // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。
                // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。
                position: myChart.convertToPixel('grid', dataItem),

                // 这个属性让圆点不可见（但是不影响他响应鼠标事件）。
                invisible: true,
                // 这个属性让圆点可以被拖拽。
                draggable: true,
                // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。
                z: 100,
                // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。
                // 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging
                // 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。
                ondrag: echarts.util.curry(onPointDragging, dataIndex)
            };
        })
    });

  5. 拖拽响应事件
    下面的代码中，使用了convertFromPixel() 这个API ，他是convertToPixel()的逆向过程。
    myChart.convertFromPixel(‘grid’, this.position) 表示将当前像素坐标转化为grid 组件中的直角坐标的dataItem 值。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 拖拽某个圆点的过程中会不断调用此函数。
    // 此函数中会根据拖拽后的新位置，改变data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。
    function onPointDragging(dataIndex) {
        // 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。
        // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。
        data[dataIndex] = myChart.convertFromPixel('grid', this.position);
        // 用更新后的 data，重绘折线图。
        myChart.setOption({
            series: [{
                id: 'a',
                data: data
            }]
        });
    }

  6. 拖拽后自适应变化
    在最后，为了拖拽后DOM 的自适应变化，还需要实现以下函数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    window.addEventListener('resize', function () {
        // 对每个拖拽圆点重新计算位置，并用 setOption 更新。
        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) {
                return {
                    position: myChart.convertToPixel('grid', item)
                };
            })
        });
    });

日历图

  1. 样例代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <script src="echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width:100%;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));

            // 模拟数据
            function getVirtulData(year) {
                year = year || '2017';
                var date = +echarts.number.parseDate(year + '-01-01');
                var end = +echarts.number.parseDate(year + '-12-31');
                var dayTime = 3600 * 24 * 1000;
                var data = [];
                for (var time = date; time <= end; time += dayTime) {
                    data.push([
                        echarts.format.formatTime('yyyy-MM-dd', time),
                        Math.floor(Math.random() * 10000)
                    ]);
                }
                return data;
            }
            var option = {
                visualMap: {
                    show: false,
                    min: 0,
                    max: 10000
                },
                calendar: {
                    range: '2017'
                },
                series: {
                    type: 'heatmap',
                    coordinateSystem: 'calendar',
                    data: getVirtulData(2017)
                }
            };
            myChart.setOption(option);
        </script>
    </body>
    </html>

  2. 解析

  3. 引入js 文件

    1
    2
    3
    4
    <script src="echarts.min.js"></script>
    <script>
        // ...
    </script>

  4. 指定DOM 作为容器

    1
    <div id="main" style="width=100%; height = 400px"></div>

  5. 配置参数
    在heatmap 图的基础上，加上coordinateSystem: ‘calendar’”和”calendar: {range: ‘2017’} ，此时heatmap 图就变为了日历图。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        visualMap: {
            show: false
            min: 0,
            max: 1000
        },
        calendar: {
            range: '2017'
        },
        series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]
        }
    }
    myChart.setOption(option);

  6. 自定义参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    range: 设置时间的范围，可支持某年、某月、某天，还可支持跨年

    cellSize: 设置日历格的大小，可支持设置不同高宽，还可支持自适应auto

    width、height: 也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应

    orient: 设置坐标的方向，既可以横着也可以竖着

    splitLine: 设置分隔线样式，也可以直接不显示

    itemStyle: 设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影

    dayLabel: 设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;

    monthLabel: 设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭

    yearLabel: 设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;