ECharts study note 02, pie and Nightingale

target

Use echarts to draw pie chart, and draw Nightingale pie chart on this basis. The example is as follows

Building environment

Create a new folder note02. The directory structure is as follows

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

Write index.html

We put < article > and < aside > in < main > to display pie chart and Nightingale chart respectively

<!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>

Write css file

In order to make article and aside side by side, we need to add float style

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

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

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

Write js file

Pie chart, you need to set option.series[0].type = 'pie'. For the South Dingle diagram, we need to add roseType: 'angle' attribute on the basis of pie diagram

'use strict';
// Pie chart
var myPie = echarts.init(document.getElementsByTagName('article')[0]);
var option = {
    title:{
        text: 'Pie chart'
    },
    series:[{
        name: 'Access source',
        type: 'pie',
        // radius is 60% of min (width, height)
        radius: '60%',
        // You can also directly input the absolute value of pixels
        data: [
            {value: 11, name: 'video'},
            {value: 12, name: 'audio'},
            {value: 13, name: 'mail'},
            {value: 14, name: 'website'},
            {value: 15, name: 'app'},
        ]
    }],
};
myPie.setOption(option);

// Nightingale diagram
var myRosePie = echarts.init(document.getElementsByTagName('aside')[0]);
option.title.text = 'Nightingale diagram';
option.series[0].roseType = 'angle';
option.series[0].radius = '75%';
myRosePie.setOption(option);

Summary

The above is an example of using EChart to draw pie charts and South Dingle charts. Take a break and start your next study~

Keywords: Javascript Attribute

Added by mmilano on Wed, 04 Dec 2019 10:18:22 +0200

Programming VIP