ECharts的基本使用

最新推荐文章于 2024-03-25 10:15:00 发布

生活热爱就好

最新推荐文章于 2024-03-25 10:15:00 发布

阅读量479

点赞数 1

分类专栏：数据可视化文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41891425/article/details/121178261

版权

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

13 篇文章 1 订阅

订阅专栏

ECharts的介绍

ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

特点

开源免费
功能丰富
（1）丰富的可视化类型
（2）多种数据格式支持（ key-value数据格式二维表 TypedArray）
（3）流数据的支持（流数据的动态渲染、增量渲染技术）
社区活跃
移动端的优化
跨平台的使用
绚丽的特效
三维可视化
官网：http://echarts.apache.org/zh/index.html

ECharts的基本使用

引入echart.js文件
准备一个呈现图表的盒子
初始化echarts实例对象
准备配置项
将配置项设置给echarts实例对象

使用vscode编写代码

下载live server
live server的作用：
1.模拟服务器的方式打开页面
2.代码改动后，会自动刷新页面
在这里插入图片描述
在CODE文件里面新建一个文件夹lib

将echarts.min.js复制到lib文件夹中

在CODE 文件中新建一个文件 ECharts的快速上手.html

源码

 <!-- 
     步骤1：引入echarts.js文件
     步骤2：准备一个呈现图表的盒子
     步骤3：初始化echarts实例对象
     步骤4：准备配置项
     步骤5：将配置项设置给echarts实例对象   
     -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 步骤1：引入echarts.js文件 -->
     <script src="lib/echarts.min.js"></script>
     
   
</head>
<body>
    <!-- 步骤2：准备一个呈现图表的盒子 -->
    <div style="width: 600px;height: 400px;"></div>
    <script>
         //  步骤3：初始化echarts实例对象
         //参数，dom，决定图标最终呈现的位置
        var mCharts= echarts.init(document.querySelector('div'))
        //步骤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>

在这里插入图片描述

生活热爱就好

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
ECharts的基本使用

ECharts的介绍ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。特点开源免费功能丰富（1）丰富的可视化类型（2）多种数据格式支持（ key-value数据格式二维表 TypedArray）（3）流数据的支持（流数据的动态渲染、增量渲染技术）社区活跃移动端的优化跨平台的使用绚丽的特效三维可视化官网：http://echarts.apache.org/zh/
复制链接

扫一扫