ECharts实现数据可视化入门教程

ECharts介绍

Apache ECharts

ECharts是一个使用 JavaScript 实现的开源可视化库

入门教程

第一步:下载echarts.js文件

下载地址:下载 - Apache ECharts

点击Dist

点击echarts.min.js并保存

将下载好的.js文件引入到项目的js文件中

第二步:准备容器

第三步:初始化实例对象

第四步:准备配置项和数据

第五步:将配置项设置给实例对象

编写代码

cdn.staticfile.org/echarts/4.7.0/echarts.js

这样就完成了一个新的页面

这是代码部分

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo01</title>
    <!-- 引入echarts.min.js -->
    <script src="js/echarts.min.js"></script>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: rgb(228, 229, 236);
        }
    </style>
</head>
<body>
	<!-- 第二步:准备一个dom容器 -->
    <div id="box"></div>

    
    <script>
        //第三步:初始化实例对象(dom容器)
        var myChart = echarts.init(document.getElementById("box"));
        //第四步:准备配置项和数据
        var option = {
            title: {
                text: '入门小案例'
            },
            tooltip: {},
            legend: {
                data:[{
                        name:'账单',
                        textStyle:{
                            color:'white',
                        }
                    }]
            },
            xAxis: {
                data: ["粉饼","粉扑","粉底","粉刷","大白"]
            },
            yAxis: {
                // data:[6,12,18,24,30,36,42]
            },
            series: [{
                name: '销量',
                type: 'bar',
                data: [31, 9, 40, 11, 24]
            }]
        };
        //第五步:将配置项设置给实例对象,将准备好的配置项和数据用于显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
相关推荐
志存高远6612 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_24 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
穆易青1 小时前
2025.04.23【Treemap】树状图数据可视化指南
信息可视化
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
泰迪智能科技011 小时前
数据可视化平台产品介绍及功能特色
信息可视化
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app