利用ECharts进行数据可视化的步骤

最新推荐文章于 2024-04-28 12:06:25 发布

@阿证1024

最新推荐文章于 2024-04-28 12:06:25 发布

阅读量1.8k

点赞数

分类专栏： # 大数据可视化文章标签：可视化 js 数据可视化

本文链接：https://blog.csdn.net/qq_43437122/article/details/116377645

版权

大数据可视化专栏收录该内容

19 篇文章 34 订阅

订阅专栏

1. 下载ECharts

下载地址：https://www.echartsjs.com/download.html

OR？

网盘下载：https://blog.csdn.net/qq_43437122/article/details/116377719

2. 新建一个HTML页面，一般为HTML5页面

我们可以将下载的echarts文件和我们的html5页面放在一个文件夹下，如下图：
在这里插入图片描述

3. 在HEML页面头部中导入js文件

在这里插入图片描述

4. 在HTML页面正文中用JavaScript代码实现图表显示

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>ECharts Test 1</title>
    <script src='echarts.common.min.js'></script>
</head>

<body>

    <!-- 这里我们演示如何创建一个直方图 -->
    <!-- 1.准备容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 2.初始化实例
        var myChart = echarts.init(document.getElementById('main'));
        // 3.指定图表配置项和数据
        option = {
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月', '六月']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [800, 600, 901, 1234, 1290, 1330, 1620],
                type: 'bar'
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

结果如下图：
在这里插入图片描述

赶快行动吧，用图形代替语言。

@阿证1024

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
利用ECharts进行数据可视化的步骤

1. 下载ECharts下载地址：https://www.echartsjs.com/download.htmlOR？网盘下载：https://blog.csdn.net/qq_43437122/article/details/1163777192. 新建一个HTML页面，一般为HTML5页面我们可以将下载的echarts文件和我们的html5页面放在一个文件夹下，如下图：3. 在HEML页面头部中导入js文件4. 在HTML页面正文中用JavaScript代码实现图表显示<!DO
复制链接

扫一扫