头图

ECharts使用指南

李不要熬夜
第一步,引入ECharts:

 echars的引入十分简单,只需要在html中嵌入即可:

<!DOCTYPE html>
<html>
<head>
    <script src="echarts.min.js"></script>
</head>
</html>

echarts.min.js从官网下载
此时echarts.min.js保存在html文件同目录下
如果不想在本地保存echart.js文件,可以采用cdn引入:

<script src="echarts.min.js"></script>

改为

<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>

之后就可以开始进入echarts的世界了

第二步,生成echarts对象:

 要创建图表首先要给图表一个安置的空间,所以可以在body内嵌入一个空的<div>标签,赋值一个id,以用来存放图表对象,当然如果有多个图表那可以创建多个标签。参考官方的初始化方法,使用echarts.init(node)创建echarts对象,完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="container" style="height: 100%"></div>
<script>
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
</script>
</body>
</html>

这个myChart就是重点关注对象,之后的几乎所有图表方法都跟这玩意有关。

第三步,设置配置项

 echarts的需要通过一个option对象来进行配置,详细配置项见官网说明文档
 以折线图为例,option的形式类似于这样:

image

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

其中series是数据系列,可以有多个,在这个折线图中只设置了一个
至于xAxis和yAxis是echarts提供的折线图配置项,要知道所有的可设置项可查看官方文档

第四步,载入option:

 如果要载入option,只需要调用setOption()就好了

myChart.setOption(option, true);

其中第二个参数为[notMerge],当设置为false时,如果更新数据将会合并新旧数据

最后上一个完整版:
<!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="echarts.min.js"></script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
myChart.setOption(option, true);

       </script>
   </body>
</html>
常用的option配置项和对象方法
常用的mychart对象方法
myChart.showLoading(LoadingOption);
myChart.hideLoading();

添加showLoading()到加载数据之前可以显示一个Loading的界面,防止加载时间过长,hideLoading()清除加载页面

mychart.getOption();

获取option对象的克隆版本

mychart.dispose()
mychart.clear();

前者为释放图表,释放后不可在使用
后者为清空图表内容,清空后可再添加内容

常用的配置项
图例
legend: [{
            data: categories.map(function (a) {
                return a.name;
            }),
            selected: {
                '系列1': true,
                // 不选中'系列2'
                '系列2': false
            }
        }],

因为原始数据不一定符合要求,所以data数据常常使用map和回调函数返回一个字符串数组

缩放
    dataZoom: [
        { // 第一个 dataZoom 组件
            radiusAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 radiusAxis
        }]

dataZoom控制数据的缩放

以及最重要的
    series:[{...},{...}]

series中包含了大量已有图表类型的配置项,具体内容参考配置项文档

异步加载数据

模板中常用的异步加载数据类型有json和图表类型用的gexf,有关gexf格式的详情可以看这里

为了方便起见,异步加载数据首先导入Jquery

<script type="text/javascript" src="jquery.js"></script>

加载gexf文件要先加载echarts的dataTool库

<script type="text/javascript" src="dataTool.min.js"></script>
$.get('data.gexf',function(xml){
    var graph = echarts.dataTool.gexf.parse(xml);//通过dataTool解析gexf
}),

其中graph对象带有gexf中的节点信息

image

于是调用起来就非常方便了:
对于关系图,我们可以这样

series : [
            {
                name: 'graph',
                type: 'graph',
                layout: 'none',
                data: graph.nodes,
                links: graph.links
            }

加载json文件同理:

$.get('data.json',function(data){
    data.nodes;//节点
    data.links; //边
})
阅读 1.3k
78 声望
4 粉丝
0 条评论
78 声望
4 粉丝
文章目录
宣传栏