Echarts数据可视化第3章 Echarts组件详解 3.9 数据系列

悠悠 2024-03-26 16:53 79阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第3章 Echarts组件详解
         *   *  3.9 数据系列

> Echarts数据可视化：入门、实战与进阶

#### 第3章 Echarts组件详解 ####

##### 3.9 数据系列 #####

一个图表可能包含多个系列，一个系列可能包含多个数据。

数据系列series 主要作为数据的容器。

对于每一种可视化图表，series 的形式并不完全相同。

以饼图 pie 为例

series是一个数组结构，使用中括号，中括号内是每部分用大括号包含，每个\{\} 类似字典结构，包含key 键和 value 值。

举个栗子

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Series</title>
        
        <script src="../js/echarts.js"></script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
        // 指定图表的配置项和数据
        var option = {
          
            title: {
          
                text: '这是主标题',
                subtext: '这是副标题',
                left: 'center'//居中显示
            },
            tooltip: {
          },
            legend: {
          
                data: ['访问情况']
            },
            xAxis: {
          },
            yAxis: {
          },
            series: [{
          
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                    {
          value: 335, name: '直接访问'},
                    {
          value: 310, name: '邮件营销'},
                    {
          value: 274, name: '联盟广告'},
                    {
          value: 235, name: '视频广告'},
                    {
          value: 400, name: '搜索引擎'},
                ].sort(function (a, b) {
          
                    return a.value - b.value
                }),
                roseType: 'radius',
                label: {
          
                    color: 'rgba(255,255,255,0.3)'
                },
                labelLine: {
          
                    lineStyle: {
          
                        color: 'rgba(255,255,255,0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
          
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0,0,0,0,5)'
                },
                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
          
                    return Math.random() * 200;
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    </body>
    </html>

浏览器渲染效果

![在这里插入图片描述][f9f98555af5644cfaec35f3b2b05fabe.png_pic_center]

[f9f98555af5644cfaec35f3b2b05fabe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2169b380051a4699abc6c9babfdecda7.png