Echarts数据可视化入门

最新推荐文章于 2024-08-16 16:30:48 发布

阿航的笔记

最新推荐文章于 2024-08-16 16:30:48 发布

阅读量265

点赞数 5

文章标签： echarts 信息可视化

本文链接：https://blog.csdn.net/zyh0815/article/details/137194539

版权

本文介绍了Echarts，一个基于JavaScript的开源可视化图表库，详细讲解了如何使用它创建柱状图和饼状图，包括初始化图表实例、设置配置项和数据的步骤。

摘要由CSDN通过智能技术生成

文章目录

前言
一、Echarts是什么？
二、使用步骤
- 1.柱状图
- 2.饼状图

前言

Echarts官网：echarts.apache.org

提示：以下是本篇文章正文内容，下面案例可供参考

一、Echarts是什么？

一个基于 JavaScript 的开源可视化图表库

二、使用步骤

1.柱状图

首先写一个div盒子（为 ECharts 准备的一个定义了高宽的 DOM 容器）
然后通过 echarts.init 方法初始化一个 echarts 实例

 var myChart = echarts.init(document.querySelector('.box'));

查询配置项手册，指定图表的配置项和数据
在这里插入图片描述

通过 setOption 方法生成一个简单的柱状图

myChart.setOption(option);

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: white;
        }
    </style>
    <script src="./echarts.min.js"></script>
</head>

<body>
    <div class="box"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('.box'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

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

</html>

在这里插入图片描述

2.饼状图

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <style>
        .box {
            width: 800px;
            height: 800px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var myChart = echarts.init(document.querySelector('.box'));
        var option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>

</body>

</html>