数据可视化 - EChart初识（1）

最新推荐文章于 2024-10-14 09:08:48 发布

Melancholie、

最新推荐文章于 2024-10-14 09:08:48 发布

阅读量695

点赞数

文章标签：数据可视化 python

本文链接：https://blog.csdn.net/qq_45958577/article/details/115840433

版权

数据可视化 - EChart初识（1）

1. EChart介绍

简要来讲，EChart就是更美观和方便的图标制作，通过代码实现图形的构建，操作在官方文档中有详细介绍，这里主要是介绍如何将代码放到自己的编译器、网页上。
在这里插入图片描述

2. 下载官方文件

建议从GitHub上下载相关文件，点击Dist。
在这里插入图片描述

下载 echarts.min.js 精简版，对于本次实例足够，根据自己需求下载。
【注意：下载不是直接点击，而是通过点击右键 - 链接另存为来下载，直接点击是查看代码内容】
在这里插入图片描述

3. 代码实现

1. 图标及代码的选择

首先点击你想构造的图形，例如如下柱状图，左侧为代码，右侧为显示效果。
在这里插入图片描述

2. 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js，注意文件放的位置 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据，这里的option就是示例左侧的代码
        var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 400, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }]
    };

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