ECharts

最新推荐文章于 2024-09-17 07:23:55 发布
最新推荐文章于 2024-09-17 07:23:55 发布
阅读量2.7k 收藏 9
点赞数 3
分类专栏： 前端笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46025031/article/details/112985819
版权

目录

基本使用

  1. 引入echarts.js文件
  2. 准备一个呈现图表的盒子
  3. 初始化echarts实例对象
  4. 准备配置项（柱形图、饼图、折线图等）
  5. 将配置项设置给echaers实例对象
<!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. 引入文件 -->
    <script src="./echarts.min.js"></script>
</head>

<body>
    <!-- 2. 准备盒子 -->
    <div style="width: 600px; height: 400px;"></div>
    <script>
        // 3. 初始化echarts实例对象
        var myChart = echarts.init(document.querySelector('div'));
        // 4. 准备配置项（上官网复制代码）
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            // x轴
            xAxis: [{
            	// 类目轴           
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            // y轴
            yAxis: [{
            	// 数值轴            
                type: 'value'
            }],
            // 系列列表
            series: [{
                name: '直接访问',
                // 图表类型
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220]
            }]
        };
        // 将配置项给echarts实例对象
        myChart.setOption(option);
    </script>
</body>

</html>

结果：
在这里插入图片描述
官方文档：https://echarts.apache.org/zh/option.html#title

通用配置

  • 标题：title
    在这里插入图片描述
    在这里插入图片描述
  • 提示：tooltip
    提示框组件，用于配置鼠标滑过或点击图表时的显示框。
    在这里插入图片描述

在这里插入图片描述

  • 工具按钮：toolbox
    ECharts提供的工具栏
    在这里插入图片描述
    在这里插入图片描述
  • 图例：legend
    图例，用于筛选系列，需要和series配合使用。
    legend中的data值需要和series数组中某组数据的name值一致。
    在这里插入图片描述
    在这里插入图片描述

柱状图

描述分类数据，呈现每一个分类中有多少。

var option = {
            color: ['#3398DB'],
            xAxis: [{
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '直接访问',
                type: 'bar',
                data: [10, 52, 200, 334, 390, 330, 220]
            }]
        };

在这里插入图片描述

常见效果

  • 标记：
    • 最大值，最小值
    • 平均值
      在这里插入图片描述
      在这里插入图片描述
  • 显示

    • 数值设置：label
      在这里插入图片描述
      在这里插入图片描述

    • 柱宽度：barWidth
      在这里插入图片描述
      在这里插入图片描述

    • 横向柱状图：
      在这里插入图片描述
      在这里插入图片描述

折线图

常用来分析数据随时间的变化趋势。

<!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. 引入文件 -->
    <script src="./echarts.min.js"></script>
</head>

<body>
    <!-- 2. 准备盒子 -->
    <div style="width: 600px; height: 400px;"></div>
    <script>
        // 3. 初始化echarts实例对象
        var myChart = echarts.init(document.querySelector('div'));
        // 4. 准备配置项
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [300, 632, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        // 将配置项给echarts实例对象
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

  • 标记：
    • 最大值、最小值、平均值（同柱状图）
    • 标注区间：markArea
      在这里插入图片描述
      在这里插入图片描述
  • 线条控制
    • 线条平滑：smooth
      在这里插入图片描述
      在这里插入图片描述
    • 线条样式：lineStyle
      在这里插入图片描述
      在这里插入图片描述
  • 填充风格：areaStyle
    在这里插入图片描述
    在这里插入图片描述
  • 紧挨边缘 boundaryGap
    在这里插入图片描述
    在这里插入图片描述
  • 缩放：脱离0值比例 scale
    在这里插入图片描述
    在这里插入图片描述
  • 堆叠图 stack
    交叉重叠情况：
    在这里插入图片描述
    第二个图形堆叠到第一个图形上：
    在这里插入图片描述
    在这里插入图片描述

散点图

可以帮助推断变量之间的相关性。

<!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. 引入文件 -->
    <script src="./echarts.min.js"></script>
</head>

<body>
    <!-- 2. 准备盒子 -->
    <div style="width: 600px; height: 400px;"></div>
    <script>
        // 3. 初始化echarts实例对象
        var myChart = echarts.init(document.querySelector('div'));
        // 4. 准备配置项
        var option = {
            xAxis: {},
            yAxis: {},
            series: [{
                symbolSize: 20,
                // 二维数组
                // 实际开发中可能需要对原始数据操作，可以通过循环获取想要数据，并生成一个新的二维数组
                data: [
                    [10.0, 8.04],
                    [8.0, 6.95],
                    [13.0, 7.58],
                    [9.0, 8.81],
                    [11.0, 8.33],
                    [14.0, 9.96],
                    [6.0, 7.24],
                    [4.0, 4.26],
                    [12.0, 10.84],
                    [7.0, 4.82],
                    [5.0, 5.68]
                ],
                type: 'scatter'
            }]
        };
        // 将配置项给echarts实例对象
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

  • 气泡图效果

    • 散点的大小不同 : symbolSize在这里插入图片描述在这里插入图片描述

    • 散点的颜色不同: itemStyle.color
      在这里插入图片描述
      在这里插入图片描述

  • 涟漪动画效果: type:effectScatter
    在这里插入图片描述
    在这里插入图片描述

直角坐标系中的常用配置

直角坐标系图表：柱状图、折线图、散点图

  • 网格：grid
    用来控制直角坐标系的布局和大小。
    在这里插入图片描述
    在这里插入图片描述
  • 坐标轴：axis
    • 坐标轴类型 type：
      value：数值轴，自动从目标数据中读取数据。
      category：类目轴，该类型必须通过data设置类目数据。
    • 显示位置：position
      xAxis：可取值为 top 或 bottom。
      yAxis：可取值为 left 或 right。
      在这里插入图片描述
      在这里插入图片描述
  • 区域缩放：dataZoom
    dataZoom：用于区域缩放，对数据范围过滤；是一个数组，意味着可以配置多个区域缩放器。
    • 类型：type
      在这里插入图片描述
      slide：滑块
      在这里插入图片描述
      inside：内置，依靠鼠标滚轮或者双指缩放
      在这里插入图片描述
    • 指明产生作用的轴
      xAxisIndex：设置缩放组件控制的是哪个x轴，一般写0即可。
      yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可。
      在这里插入图片描述
      在这里插入图片描述
    • 指明初始状态的缩放情况
      start：数据窗口范围的起始百分比。
      end：数据窗口范围的结束百分比。
      在这里插入图片描述在这里插入图片描述

饼图

可快速了解不同分类数据的占比情况。

<!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. 引入文件 -->
    <script src="./echarts.min.js"></script>
</head>

<body>
    <!-- 2. 准备盒子 -->
    <div style="width: 600px; height: 400px;"></div>
    <script>
        // 3. 初始化echarts实例对象
        var myChart = echarts.init(document.querySelector('div'));
        // 4. 准备配置项
        var option = {
            series: [{
                name: '访问来源',
                type: 'pie',
                data: [{
                    value: 335,
                    name: '直接访问'
                }, {
                    value: 310,
                    name: '邮件营销'
                }, {
                    value: 234,
                    name: '联盟广告'
                }, {
                    value: 1548,
                    name: '搜索引擎'
                }]
            }]
        };
        // 将配置项给echarts实例对象
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

  • 显示数值 label.formatter
    在这里插入图片描述
    在这里插入图片描述
  • 圆环 radius
    在这里插入图片描述
    在这里插入图片描述
  • 南丁格尔图 roseType
    饼图的每一个区域半径是不同的。
    radius：扇区圆心角展现数据的百分比，半径展现数据的大小。
    area：所有扇区圆心角相同，仅通过半径展现数据大小。
    在这里插入图片描述
    在这里插入图片描述
  • 选中效果 selectedMode
    在这里插入图片描述

地图

可从宏观的角度快速看出不同地理位置上数据的差异。

  • 百度地图API
    需要申请百度地图a
  • 矢量地图
  1. 需要准备矢量地图数据
    在这里插入图片描述
  2. ，将文件引入到项目中
  3. 使用Ajax获取json文件中的数据
    $.get('china.json', function(chinaJson)())
  4. 在回调函数中往echarts全局对象注册地图json数据
    echarts.registerMap('chinaMap', chinaJson);
  5. 在geo下设置
    type: 'map'
    map: 'chinaMap'
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div style="width: 600px; height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.querySelector('div'));
        // 获取地图矢量数据
        $.get('./map/china.json', function(ret) {
            // console.log(ret);
            echarts.registerMap('chinaMap', ret)
            var option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap'
                }
            };
            myChart.setOption(option);
        })
    </script>
</body>

</html>

在这里插入图片描述

  • 拖动缩放 ream
    在这里插入图片描述
    在这里插入图片描述
  • 名称显示 label
    在这里插入图片描述
    在这里插入图片描述
  • 初始缩放比例 zoom
    在这里插入图片描述
  • 地图中心点 center
    在这里插入图片描述
    在这里插入图片描述

雷达图

可用来分析多个维度的数据与标准数据的对比情况。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div style="width: 600px; height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.querySelector('div'));
        var option = {
            // 雷达
            radar: {
                // 定义各个维度的最大值
                indicator: [{
                    name: '销售（sales）',
                    max: 6500
                }, {
                    name: '管理（Administration）',
                    max: 16000
                }, {
                    name: '信息技术（Information Techology）',
                    max: 30000
                }, {
                    name: '客服（Customer Support）',
                    max: 38000
                }, {
                    name: '研发（Development）',
                    max: 52000
                }, {
                    name: '市场（Marketing）',
                    max: 25000
                }]
            },
            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                // 设置；类型为雷达
                type: 'radar',
                // areaStyle: {normal: {}},
                data: [{
                    value: [4300, 10000, 28000, 35000, 50000, 19000],
                    name: '预算分配（Allocated Budget）'
                }, {
                    value: [5000, 14000, 28000, 31000, 42000, 21000],
                    name: '实际开销（Actual Spending）'
                }]
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述
常用配置：
在这里插入图片描述
在这里插入图片描述

仪表盘

主要用在进度把控数据范围的监测。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.min.js"></script>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div style="width: 600px; height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.querySelector('div'));
        var option = {
            series: [{
                // 仪表盘
                type: 'gauge',
                data: [{
                    value: 50,
                }]
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述

  • 数值范围: max, min
    在这里插入图片描述
    在这里插入图片描述
  • 多个指针
    在这里插入图片描述
    在这里插入图片描述
  • 多个指针颜色差异
    在这里插入图片描述
    在这里插入图片描述

显示相关

主题

  • 内置主题
    • ECharts中默认设置了两套主题：light和dark
    • 在初始化对象方法中可以指明：
      var myChart = echarts.init(dom, 'light')
      在这里插入图片描述
      在这里插入图片描述
  • 自定义主题
  1. 在主题编辑器中编辑主题
  2. 下载主题（js文件）
  3. 引入主题js文件
  4. 在init中使用主题

网址：https://echarts.apache.org/zh/theme-builder.html

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

调色盘

调色盘

它是一组颜色，图形、系列会自动从中选择颜色。

  • 主题调色盘
    如：在引入的itcast中就设置好了主题颜色。
    在这里插入图片描述

  • 全局调色盘
    在这里插入图片描述
    在这里插入图片描述

  • 局部调色盘
    会覆盖全局调色盘。
    在这里插入图片描述
    在这里插入图片描述

调色盘遵循就近原则。

颜色渐变

  • 线性渐变
    在这里插入图片描述
    在这里插入图片描述
  • 径向渐变
    在这里插入图片描述
    在这里插入图片描述

样式

  • 直接样式
    itemStyle、textStyle、lineStyle、areaStyle、label
    在这里插入图片描述
  • 高亮样式
    在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label。
    在这里插入图片描述
    在这里插入图片描述

自适应

浏览器大小发生变化时，图表也能随之匹配变化。
可以配合响应式布使用：

window.addEventListener('resize', function() {
            myChart.resize();
        })

动画的使用

加载动画：

ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或隐藏即可。

  • 显示加载动画(获取数据成功之前)：myChart.showLoading()
  • 隐藏加载动画(获取数据成功之后)：myChart.hideLoading()

增量动画 myChart.setOption：

  • 可以实现在同一个图表中点击按钮进行数据修改、新增等操作。

  • setOption可以设置多次，新旧option是相互整合的关系。

  • 设置新option的时候只需要考虑变化的部分。

动画项配置

  • 开启动画：animation: true（默认)
  • 动画时长：animationDuration: 5000 (以毫秒为单位; 支持回调函数)
  • 缓动动画：animationEasing: ‘bounceOut’ (如：linear动画均匀；bounceOut带回弹效果)
  • 动画阈值：animationThreshold: 8 (单种形式的元素大于这个阈值时会关闭动画)

交互API

  • 全局echarts对象
    全局echarts对象是引入echarts.js文件之后就可以直接使用的。

  • echartsInstance对象
    echartsInstance对象是通过echarts.init方法调用之后得到的。
    在这里插入图片描述

全局echarts对象常用方法

  • init方法
    • 初始化echarts实例对象
    • 使用主题
  • registerTheme方法
    • 注册主题时使用
      在这里插入图片描述
  • registerMap方法
    • 实现地图图表时使用，注册地图数据
  • connect方法
    • 将多个图表进行关联，传入联动目标为echarts实例对象，支持数组
echarts.connect([myChart1, myChart2])

产生联动效果的情况：

  • 保存图片的自动拼接
  • 刷新按钮
  • 重置按钮
  • 提示框联动、图例选择、数据范围修改等。。

echartsInstance对象常用方法

  • setOption方法
    • 设置或修改图表实例的配置项以及数据
    • 可以多次调用setOption方法
  • resize方法
    • 重新计算和绘制图表
    • 一般和window对象的resize事件结合使用
  • on / off方法
    • 绑定或解绑事件处理函数
    • 鼠标事件：click、dblclick、mousedown、mousemove、mouseup等
      在这里插入图片描述
    • ECharts事件：legendselectchanged、datazoom、pieselectchanged…
  • dispatchAction方法
    • 触发某些行为
    • 使用代码模拟用户的行为
      在这里插入图片描述
      在这里插入图片描述
  • clear方法
    • 清空当前实例，会移除实例中所有的组件和图表（如清除图表）
    • 清空之后可以再次setOption（重新显示图表）
  • dispose方法
    • 销毁实例，销毁后无法通过setOption再次显示
友人A ㅤ
关注
专栏目录
Echarts之柱状图
日常笔记/总结/系列知识梳理
11-14 422
本文总结ECharts柱状图，可视化展示数据时，常遇到的一些问题。在此梳理记录下，希望对你有所帮助。如若还有其他问题留言一起讨论。【梳理不易，你的鼓励，是我创作最大的动力】ECharts是一个纯JavaScript的图表库，用于数据可视化。它提供了丰富的图表类型，如折线图、柱状图、散点图、饼图、盒形图，以及用于地理数据可视化的地图、热力图等。ECharts支持多个坐标系，包括直角坐标系、极坐标系和地理坐标系。使用ECharts可以方便地进行数据过滤、聚类、回归等操作，实现同一份数据的多维度分析。
echarts2.2.7
06-28
ECharts 2.2.7 是一个开源的、基于 JavaScript 的数据可视化库，它由百度公司开发并维护。这个版本的 ECharts 提供了丰富的图表类型，包括柱状图、折线图、饼图、散点图等，适用于各种数据分析和展示需求。"有静态...
echaers map整理
qq_33882446的博客
03-14 669
最近在学习echarts，感觉官网好多属性不好理解，根据官网的例子，写了一下注释，以备用。 Map2.html var myChart = echarts.init(document.getElementById("main")); /* myChart.showLoading({ text: '正在努力的读取数据中...',
ECharts 配置项详细解释
最新发布
疯狂假前端的博客
09-17 1435
*
echaerts在HTML中的位置,Doc api
weixin_36433781的博客
06-04 236
本文档描述了 pyecharts 库一些公开的 API，以供开发者之使用。总体流程一个通用的 pyecharts 使用流程可描述如下：步骤简略代码备注1 创建图表实例bar = Bar()2 添加数据bar.add(**kwargs)3 创建配置实例config = PyEchartsConfig(**kwargs)4 构建模板引擎engine = EchartsEnvironment(pyech...
echarts 速通
weixin_64684095的博客
04-24 1241
ECharts 支持常规的鼠标事件类型，包括 'click'、 'dblclick'、 'mousedown'、 'mousemove'、 'mouseup'、 'mouseover'、 'mouseout'、 'globalout'、 'contextmenu' 事件。在二维数据中，轴可以有多个。字符串模板变量有 {a}，{b}，{c}，{d}，{e} 分别表示系列名、数据名、数据值等。折线（区域）图、柱状（条形）图、K 线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
echarts学习：使用dataset管理数据
m0_52912501的博客
06-14 508
在我们公司的组件库中有许多echarts图表相关的组件，这些组件在使用时，只需将图表数据以特定的格式传入组件中，十分方便。因此当我得知echarts 可以使用dataset集中管理数据时，我就决定自己一定要搞懂它，于是在最近的开发工作中我便使用dataset来绘制图表。本文就将介绍我在使用后对dataset的理解。
echarts-5.4.3
03-02
ECharts 是一个由百度开发的开源 JavaScript 数据可视化库，它基于 SVG+Canvas 技术，提供了丰富的图表类型、灵活的交互功能以及高度自定义的可能性。ECharts 5.4.3 版本是该库的一个稳定版本，包含了之前版本的所有...
echarts-doc
01-26
"echarts-doc" 是ECharts的官方文档，包含详细的API、教程、示例和指南，是学习和使用ECharts不可或缺的资源。 在"echarts-doc-master"这个压缩包中，我们可以预期找到以下关键知识点： 1. **ECharts基本概念**：...
echarts世界geojson数据
04-02
ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，适用于各种Web数据可视化场景。在“echarts世界geojson数据”这个主题中，主要涉及到的是ECharts如何利用GeoJSON数据来展示全球...
echarts文档离线
10-10
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，以及强大的交互功能和自定义选项，广泛应用于Web应用的数据展示。"echarts文档离线"指的是将...
echarts地图闪烁
11-30
带地图的echarts版本，里面有省份json数据、 想要别的省份数据可以去http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 自行获取，demo里面获取...
echarts-5.4.3.zip
01-03
ECharts 5.4.3 版本是其众多版本中的一个，通常每个新版本都会带来性能优化、新功能添加以及已知问题的修复。 在 ECharts 5.4.3 版本中，你可以期待以下关键知识点： 1. **数据可视化**：ECharts 的核心功能就是将...
获取echarts地图所有JSON文件
05-27
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，适用于各种Web数据可视化场景。在ECharts中，地图图表是其特色功能之一，能够展示地理信息数据，如省份、城市等的分布情况。...
echarts 全国地图json数据
08-25
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的图表效果，便捷的配置项和API，能够满足各种数据可视化需求。在这个“echarts全国地图json数据”中，我们主要讨论的是...
echarts.js文件
07-20
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它以直观、生动的方式展示数据，广泛应用于网页数据图表的绘制。ECharts.js是ECharts的主要实现文件，包含了完整的功能和API，供开发者在Web项目中集成和...
ECharts实现数据可视化 “ 10分钟入门 “ 教程（超详细）
m0_64875238的博客
10-27 7705
ECharts实现数据可视化 " 10分钟入门 “ 教程（超详细）
Echarts
小白小白从不日别的博客
11-28 4万+
目录 1.1 什么是ECharts? 1.2 ECharts基本使用 1.3 ECharts标题组件 1.4 ECharts工具箱组件 1.5 ECharts弹窗组件 1.6 ECharts饼状图 1.7 ECharts航线图 更详细的教程请参考官方教程：Handbook - Apache ECharts 这里知识最简单的演示一下 1.1 什么是ECharts? ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设..
echarts入门教程（超级详细带案例）
热门推荐
m0_55734030的博客
10-27 11万+
1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设
数据可视化大屏模板及echarts图表案例集锦
资源摘要信息:"ECharts是一种使用JavaScript编写的开源可视化库，它能够帮助开发者制作各种图表和数据可视化大屏。本资源包含了15套精美的数据可视化大屏模板和18个ECharts图表案例，涵盖了数据监测、数据统计、数据...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值