Echarts图标数据可视化（快速上手篇）

最新推荐文章于 2024-07-25 20:36:06 发布

纯24k

最新推荐文章于 2024-07-25 20:36:06 发布

阅读量224

点赞数 1

分类专栏： Echart 文章标签： echarts 信息可视化前端

本文链接：https://blog.csdn.net/weixin_53669566/article/details/131043262

版权

Echart 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

想进阶的可看进阶篇

一、Echarts的介绍

Examples - Apache ECharts

二、Echarts的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 步骤1：引入echarts.js文件步骤1：引入echarts.js文件 -->
    <script src="lib/echarts.min.js"></script>
   
</head>
<body>
    <!--
        步骤1：引入echarts.js文件
        步骤2：准备一个呈现图表的盒子
        步骤3：初始化echarts实例对象
        步骤4：准备配置项
        步骤5：将配置项设置给echarts实例对象
    -->
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px;height: 400px;">

    </div>
    <script>
        // 步骤3：初始化echarts实例对象
        //参数，dom，决定图表最终呈现的位置
        var mCharts = echarts.init(document.querySelector('div'))
  // ECharts中默认内置了两套主题：light dark或者下载主题
              var mCharts = echarts.init(document.getElementById('ea4'),'dark')
        // 步骤4：准备配置项
        var option = {
            xAxis:{
                type:'category',
                data:['小明','小红','小王']
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:[70,92,87]
                }
            ]
        }
        // 步骤5：将配置项设置给echarts实例对象
        mCharts.setOption(option)
    </script>
</body>
</html>