ECharts 学习笔记02, 饼图与南丁格尔图

目标

使用 echarts 绘制饼状图, 并在此基础上绘制南丁格尔饼图, 示例如下

图片描述

搭建环境

新建文件夹 note02, 目录结构如下

./note02/
 |---index.html
 |---index.js
 |---index.css
 |---echarts.js

编写 `index.html`

我们在 <main> 中放入 <article> 和 <aside>, 分别用于显示饼状图和南丁格尔图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts note01</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <main>
        <article></article>
        <aside></aside>
    </main>
</body>
<script src="echarts.js"></script>
<script src="index.js"></script>
</html>

编写 `css` 文件

为了使 article 和 aside 并列, 我们需要加上 float 样式

main{
    width: 800px;
    height: 400px;
}

main > article{
    width: 50%;
    height: 100%;
    float: left;
}

main > aside{
    width: 50%;
    height: 100%;
    float: right;
}

编写 `js` 文件

饼状图, 需要设置 option.series[0].type = 'pie'。而南丁格尔图, 则需要在饼状图的基础上, 增加 roseType: 'angle' 属性

'use strict';
// 饼状图
var myPie = echarts.init(document.getElementsByTagName('article')[0]);
var option = {
    title:{
        text: '饼状图'
    },
    series:[{
        name: '访问来源',
        type: 'pie',
        // 半径radius 是 min(width, heigh) 的 60%
        radius: '60%',
        // 也可以直接输入像素绝对值
        data: [
            {value: 11, name: 'video'},
            {value: 12, name: 'audio'},
            {value: 13, name: 'mail'},
            {value: 14, name: 'website'},
            {value: 15, name: 'app'},
        ]
    }],
};
myPie.setOption(option);

// 南丁格尔图
var myRosePie = echarts.init(document.getElementsByTagName('aside')[0]);
option.title.text = '南丁格尔图';
option.series[0].roseType = 'angle';
option.series[0].radius = '75%';
myRosePie.setOption(option);

小结

以上就是使用 EChart 绘制饼图和南丁格尔图的例子。休息一下，马上开始下一次学习~

ECharts 学习笔记02, 饼图与南丁格尔图

目标

搭建环境

编写 `index.html`

编写 `css` 文件

编写 `js` 文件

小结

FrozenMap

引用和评论

在 minikube 中使用 nfs

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合

ECharts 学习笔记02, 饼图与南丁格尔图

目标

搭建环境

编写 index.html

编写 css 文件

编写 js 文件

小结

FrozenMap

引用和评论

在 minikube 中使用 nfs

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合

编写 `index.html`

编写 `css` 文件

编写 `js` 文件