ECharts使用指南

痛定思痛。 2022-10-22 15:58 82阅读 0赞

##### 第一步，引入ECharts： #####

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

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

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

改为

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

##### 第二步，生成echarts对象： #####

要创建图表首先要给图表一个安置的空间，所以可以在body内嵌入一个空的

标签，赋值一个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对象来进行配置，详细配置项见官网[说明文档][Link 2]  
 以折线图为例，option的形式类似于这样：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x8yRbV3h-1615988148805)(//upload-images.jianshu.io/upload\_images/5346121-1aa8b05b4427f8f3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)\]

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中包含了大量已有图表类型的配置项，具体内容参考[配置项文档][Link 3]

##### 异步加载数据 #####

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

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

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

$.get('data.gexf',function(xml){
        var graph = echarts.dataTool.gexf.parse(xml);//通过dataTool解析gexf
    }),

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

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-maQGUzbc-1615988148808)(//upload-images.jianshu.io/upload\_images/5346121-16d97f65d78a3bbb.png?imageMogr2/auto-orient/strip|imageView2/2/w/721/format/webp)\]

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

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

加载json文件同理：

$.get('data.json',function(data){
        data.nodes;//节点
        data.links; //边
    })

[Link 1]: http://www.echartsjs.com/download.html
[cdn]: https://www.bootcdn.cn/echarts/
[Link 2]: http://www.echartsjs.com/option.html
[Link 3]: http://www.echartsjs.com/option.html#series
[Link 4]: https://gephi.org/gexf/format/index.html