使用ECharts可视化星座关系(1)


#Web 前端开发#


2014-01-02

大数据时代,重新定义数据图表的时候到了

以上是 ECharts官网中的口号。

最近的echarts版本是1.3.5,在github下载、解压之后,结构如下:

├─build
│  └─wrap
├─doc
│  ├─asset
│  │  ├─css
│  │  ├─ico
│  │  ├─img
│  │  │  ├─doc
│  │  │  └─example
│  │  └─js
│  │      └─esl
│  ├─example
│  │  ├─geoJson
│  │  ├─topic
│  │  │  ├─10-me-china
│  │  │  │  └─js
│  │  │  └─24-population-china
│  │  │      └─js
│  │  ├─www
│  │  │  └─js
│  │  └─www2
│  │      └─js
│  └─slide
│      ├─css
│      │  ├─print
│      │  └─theme
│      │      ├─source
│      │      └─template
│      ├─img
│      ├─js
│      ├─lib
│      │  ├─css
│      │  ├─font
│      │  └─js
│      └─plugin
│          ├─highlight
│          ├─markdown
│          ├─multiplex
│          ├─notes
│          ├─notes-server
│          ├─postmessage
│          ├─print-pdf
│          ├─remotes
│          ├─search
│          └─zoom-js
├─src
│  ├─chart
│  ├─component
│  └─util
│      ├─mapData
│      │  ├─geoJson
│      │  └─rawData
│      │      └─geoJson
│      ├─projection
│      └─shape
└─test
    └─allchart

这些文件其实也就是 http://echarts.baidu.com/ 的本地化版本。

官网的大部分示例并不完整(或者说是,示例并非简单而清晰),这里力求简单清晰。我们以力导向布局图为例。

首先将/doc/asset/js/esl/esl.js复制到/build目录下,建立目录/me。

http://echarts.baidu.com/doc/example/force1.html 是一个以Steve Jobs为中心的人物关系图。我们在/me目录下建立文件force1.html,其内容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>乔布斯</title>
    <script src="../build/esl.js"></script>
    <script>
        require.config({
            paths:{
                echarts:'../build/echarts',
                'echarts/chart/force': '../build/echarts'
            }
        });
        require(
                [
                    'echarts',
                    'echarts/chart/force'
                ],
                function(ec) {
                    var myChart = ec.init(document.getElementById('main'));
                    var option = {
                        title : {
                            text: '人物关系:乔布斯',
                            subtext: '数据来自人立方',
                            x:'right',
                            y:'bottom'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: '{a} : {b}'
                        },
                        legend: {
                            x: 'left',
                            data:['家人','朋友']
                        },
                        series : [
                            {
                                type:'force',
                                name : "人物关系",
                                categories : [
                                    {
                                        name: '人物',
                                        itemStyle: {
                                            normal: {
                                                color : '#ff7f50'
                                            }
                                        }
                                    },
                                    {
                                        name: '家人',
                                        itemStyle: {
                                            normal: {
                                                color : '#87cdfa'
                                            }
                                        }
                                    },
                                    {
                                        name:'朋友',
                                        itemStyle: {
                                            normal: {
                                                color : '#9acd32'
                                            }
                                        }
                                    }
                                ],
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            textStyle: {
                                                color: '#800080'
                                            }
                                        },
                                        nodeStyle : {
                                            brushType : 'both',
                                            strokeColor : 'rgba(255,215,0,0.4)',
                                            lineWidth : 8
                                        }
                                    },
                                    emphasis: {
                                        label: {
                                            show: false
                                            // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
                                        },
                                        nodeStyle : {
                                            r: 30
                                        },
                                        linkStyle : {}
                                    }
                                },
                                minRadius : 15,
                                maxRadius : 25,
                                density : 0.05,
                                attractiveness: 1.2,
                                nodes:[
                                    {category:0, name: '乔布斯', value : 10},  //0
                                    {category:1, name: '丽萨-乔布斯',value : 2},  //1
                                    {category:1, name: '保罗-乔布斯',value : 3},  //2
                                    {category:1, name: '克拉拉-乔布斯',value : 3},  //3
                                    {category:1, name: '劳伦-鲍威尔',value : 7},  //4
                                    {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},  //5
                                    {category:2, name: '奥巴马',value : 8},  //6
                                    {category:2, name: '比尔-盖茨',value : 9},  //7
                                    {category:2, name: '乔纳森-艾夫',value : 4},  //8
                                    {category:2, name: '蒂姆-库克',value : 4},  //9
                                    {category:2, name: '龙-韦恩',value : 1}  //10
                                ],
                                links : [
                                    {source : 1, target : 0, weight : 1},
                                    {source : 2, target : 0, weight : 2},
                                    {source : 3, target : 0, weight : 1},
                                    {source : 4, target : 0, weight : 2},
                                    {source : 5, target : 0, weight : 3},
                                    {source : 6, target : 0, weight : 6},
                                    {source : 7, target : 0, weight : 6},
                                    {source : 8, target : 0, weight : 1},
                                    {source : 9, target : 0, weight : 1},
                                    {source : 10, target : 0, weight : 1},
                                    {source : 3, target : 2, weight : 1},
                                    {source : 6, target : 2, weight : 1},
                                    {source : 6, target : 3, weight : 1},
                                    {source : 6, target : 4, weight : 1},
                                    {source : 6, target : 5, weight : 1},
                                    {source : 7, target : 6, weight : 6},
                                    {source : 7, target : 3, weight : 1},
                                    {source : 9, target : 6, weight : 1}
                                ]
                            }
                        ]
                    };

                    myChart.setOption(option);
                }
        );

    </script>
</head>
<body>

<div id="main" style="height:500px;width:600px;"></div>

</body>
</html>

效果图如下:

也可以到 http://echarts.baidu.com/doc/example/force1.html 体验一下。

esl.js是一个Browser端标准加载器,require.config用来设置加载内容,重点在require()的第二个参数。该参数是一个回调函数,var myChart = ec.init(document.getElementById('main'));是选中

<div id="main" style="height:500px;width:600px"></div>

并初始化echarts。option变量用来设置图表的参数(例如标题、数据等), 并作为myChart.setOption()函数的参数。option的形式和json一致,如此也就很容易实现刷新图表了。

如果不习惯使用esl.js,那么可以使用标签式引入这一方式(/me/force2.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>乔布斯</title>
    <script src="../build/echarts-plain-map.js"></script>

</head>
<body>

<div id="main" style="height:500px;width:600px;"></div>

<script>


    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        title : {
            text: '人物关系:乔布斯',
            subtext: '数据来自人立方',
            x:'right',
            y:'bottom'
        },
        tooltip : {
            trigger: 'item',
            formatter: '{a} : {b}'
        },
        legend: {
            x: 'left',
            data:['家人','朋友']
        },
        series : [
            {
                type:'force',
                name : "人物关系",
                categories : [
                    {
                        name: '人物',
                        itemStyle: {
                            normal: {
                                color : '#ff7f50'
                            }
                        }
                    },
                    {
                        name: '家人',
                        itemStyle: {
                            normal: {
                                color : '#87cdfa'
                            }
                        }
                    },
                    {
                        name:'朋友',
                        itemStyle: {
                            normal: {
                                color : '#9acd32'
                            }
                        }
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#800080'
                            }
                        },
                        nodeStyle : {
                            brushType : 'both',
                            strokeColor : 'rgba(255,215,0,0.4)',
                            lineWidth : 8
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                            // textStyle: null      // 默认使用全局文本样式,详见TEXTSTYLE
                        },
                        nodeStyle : {
                            r: 30
                        },
                        linkStyle : {}
                    }
                },
                minRadius : 15,
                maxRadius : 25,
                density : 0.05,
                attractiveness: 1.2,
                nodes:[
                    {category:0, name: '乔布斯', value : 10},  //0
                    {category:1, name: '丽萨-乔布斯',value : 2},  //1
                    {category:1, name: '保罗-乔布斯',value : 3},  //2
                    {category:1, name: '克拉拉-乔布斯',value : 3},  //3
                    {category:1, name: '劳伦-鲍威尔',value : 7},  //4
                    {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},  //5
                    {category:2, name: '奥巴马',value : 8},  //6
                    {category:2, name: '比尔-盖茨',value : 9},  //7
                    {category:2, name: '乔纳森-艾夫',value : 4},  //8
                    {category:2, name: '蒂姆-库克',value : 4},  //9
                    {category:2, name: '龙-韦恩',value : 1}  //10
                ],
                links : [
                    {source : 1, target : 0, weight : 1},
                    {source : 2, target : 0, weight : 2},
                    {source : 3, target : 0, weight : 1},
                    {source : 4, target : 0, weight : 2},
                    {source : 5, target : 0, weight : 3},
                    {source : 6, target : 0, weight : 6},
                    {source : 7, target : 0, weight : 6},
                    {source : 8, target : 0, weight : 1},
                    {source : 9, target : 0, weight : 1},
                    {source : 10, target : 0, weight : 1},
                    {source : 3, target : 2, weight : 1},
                    {source : 6, target : 2, weight : 1},
                    {source : 6, target : 3, weight : 1},
                    {source : 6, target : 4, weight : 1},
                    {source : 6, target : 5, weight : 1},
                    {source : 7, target : 6, weight : 6},
                    {source : 7, target : 3, weight : 1},
                    {source : 9, target : 6, weight : 1}
                ]
            }
        ]
    };

    myChart.setOption(option);

</script>

</body>
</html>

有两点要注意:

1、设置的js代码必须在dom加载完成后执行,否则会有错误:Uncaught TypeError: Cannot set property 'innerHTML' of null 。将这段js代码放在

<div id="main" style="height:500px;width:600px"></div>

之后是一个解决方法。

2、示例 http://echarts.baidu.com/doc/example/www2/index.html 导入相关js代码如下:

<!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
<script src="js/echarts-plain-map.js"></script>

http://echarts.baidu.com/doc/doc.html 也有代码如下:

< script src="example/www2/js/echarts-plain.js" > < /script>
< script >
    var myChart = echarts.init(domMain);
    var option = {
        ...
    }
    myChart.setOption(option);
< /script>

但在我的使用中,如引入echarts-plain.js,即:

<script src="../build/echarts-plain.js"></script>

会有以下错误:

Uncaught Error: No echarts/util/mapData/params echarts-plain.js:84
Uncaught ReferenceError: echarts is not defined 

该问题已经提交到:https://github.com/ecomfe/echarts/issues/174


( 本文完 )