使用echarts制作steemit热门标签的南丁格尔图

lixing (60)in #utopian-io • 7 years ago (edited)

Summary/简介：

ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

您将从本教程学到什么?

如何将饼状图转变为南丁格尔图；
如何设置背景颜色；
如何添加图表标题和小标题并设置标题样式；
如何设置划过扇面显示数据信息；

要求条件

一个代码编辑器，在上一个echarts教程中我使用了DreamWeaver，这次换用用Atom制作，其实用什么编辑器都没有关系，只要可以编辑代码.以下教程都是我在本地创建了一个html文件并在Atom中编写代码实现的。
下载echarts.js

难度

简单

教程内容

准备材料

0.1：在任意位置新建文件夹
0.2：在文件夹中放入echarts.js文件
0.3：在文件夹中新建文本文档并将.txt格式改为.html格式。
0.4：用Atom打开文件并编写基础代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>steemit热门tags的南丁格尔图</title>
    (html comment removed:  引入 echarts.js )

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

<body>


    (html comment removed:  为ECharts准备一个具备大小（宽高）的Dom )
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

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

关键结果1：将饼状图转变为南丁格尔图

基本饼状图的代码如下：

option = {
    series : [
        {
            name: '标签被使用次数',
            type: 'pie',
            radius: '55%',
            data:[
                {value:115835, name:'life'},
                {value:78562, name:'photography'},
                {value:62453, name:'steemit'},
                {value:45831, name:'blog'},
                {value:38690, name:'art'}
            ]
        }
    ]
};

把上面代码复制到html文件中文本“// 指定图表的配置项和数据”的下一行。
保存后，用浏览器打开html文件效果如下图：

现在我们需要把这个饼状图，转变为南丁格尔图。只需在series参数内加入代码roseType: 'angle',

注意，如果roseType: 'angle',不是最后一个参数则必须在此代码后面添加英文逗号，否则会有代码错误。
保存并预览，效果如下图，即完成从饼状图到南丁格尔图的转变。

关键结果2：设置背景颜色

由于人们普遍使用电脑很长时间，所以长期看白底的背景眼睛会很累，所以我们来把图表背景色改为深色调#2c343c，只需在option参数中加入backgroundColor: '#2c343c',效果如下图：

关键结果3：添加图表标题和小标题并设置标题样式

只有光秃秃的图表没有标题，让人难以明白图表想说明什么，所以我们需要加个标题。在option参数内加入代码

            title: {
  text: 'steemit热门标签的南丁格尔图',
  subtext: 'By @lixing',
  right: 'center',
  top: 30,
  textStyle: {
            color: '#ccc'
        },
                   },

效果如下图：

text为主标题文本；
subtext为小标题文本；
right（可用left代替）为对齐方式，可用数字表示（不加单引号）也可用left、right、center（加单引号）表示；
top表示文字距图表顶端留白宽度；
textStyle为文本样式，我们现在只用到了文本颜色设置。

关键结果4：置划过扇面显示数据信息

在到这里，图表并不能显示每个标签分类的使用次数，现在我们来设置一下。在option参数中加入

            tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
},

其中{a} {b} {c} ({d}分别表示：数据名称、标签名称、标签使用次数、标签占比。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>steemit热门标签的南丁格尔图</title>
    (html comment removed:  引入 echarts.js )

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

<body>


    (html comment removed:  为ECharts准备一个具备大小（宽高）的Dom )
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        option = {
            backgroundColor: '#2c343c',
            tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
},
            title: {
  text: 'steemit热门标签的南丁格尔图',
  subtext: 'By @lixing',
  right: 'center',
  top: 30,
  textStyle: {
            color: '#ccc'
        },
                   },
            series : [
                {
                    name: '标签被使用次数',
                    type: 'pie',
                    roseType: 'angle',
                    radius: '55%',
                    data:[
                        {value:115835, name:'life'},
                        {value:78562, name:'photography'},
                        {value:62453, name:'steemit'},
                        {value:45831, name:'blog'},
                        {value:38690, name:'art'}
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>