正文

echarts学习笔记(代码片段)

山水花草  山水花草  2022-10-28  462

关键词：

前段时间客户要求将数据以图形报表的形式展示，特意提到要求用echarts，由于之前没有接触过，临时边学便用。

开始学习echarts首先想到的就是去官网找相应的资料了： echarts官网，里面有教程有API。

先拷贝一下官方的教程：5 分钟上手 ECharts

获取 ECharts

你可以通过以下几种方式获取 ECharts。

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(\'main\'));

        // 指定图表的配置项和数据
        var option = 
            title: 
                text: \'ECharts 入门示例\'
            ,
            tooltip: ,
            legend: 
                data:[\'销量\']
            ,
            xAxis: 
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            ,
            yAxis: ,
            series: [
                name: \'销量\',
                type: \'bar\',
                data: [5, 20, 36, 10, 10, 20]
            ]
        ;

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这样你的第一个图表就诞生了！

echarts3 中，图表随着窗口的变动而变动（让图表resize有效）

https://blog.csdn.net/TionSu/article/details/78039045###;

小5聊echarts图标之基础学习笔记(代码片段)

虽然官方有很多例子可以查看，但是有时候太多看起来有点懵，这个时候自己总结一遍或者更加明了1、x轴刻度在柱状图中间显示<divid="container"style="height:100%"></div><scripttype="text/javascript&... 查看详情

echarts学习笔记1——echarts柱状图分析(代码片段)

做数据可视化时，Echarts是很好用的。这里来一个学习笔记系列。官网：http://echarts.baidu.com/一、引用echartsEcharts可以用npm进行安装，也可以直接导入到web项目进行引用，博主采用了引用方式直接分析它的使用。下载... 查看详情

echarts学习笔记(vue项目中使用)(代码片段)

1、vue整合echartsnpminstallecharts--save创建components<template><divid="main":style="width:'1400px',height:'400px'"></div></template><<script>import*asechartsfrom'echarts';exportdefaultname:'BarDemo',watch:... 查看详情

学习笔记python-pyecharts(代码片段)

pyechartspyecharts是一款将python与echarts结合的强大的数据可视化工具。echarts是百度开源的一个数据可视化JS库，主要用于数据可视化，而pyecharts则是一个用于生成echarts图表的类库。pyecharts包含以下图表：Bar（柱状图/... 查看详情

echart学习笔记

eChart的html代码很简单，给个容器，定好宽高就可以了1<divclass="container-fluid">2<divclass="row">3<divclass="col-xs-8">4<divid="main"style="width:100%;height:500px;"></div>5</div>6<d 查看详情

echarts基本图表的学习笔记

Echarts图表现在广泛的运用到网站中，移动端等，便于数据的展示。简单的记一下各种图表的基本用法。下边为饼图的基本用法：html代码：（需要一个容器来放图表，固定宽度和高度，不然图表无法显示）<divid="main"style="width:10... 查看详情

echarts学习(代码片段)

Echarts学习简介：ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰... 查看详情

echarts初步学习(代码片段)

官方教程学习：转自官网http://echarts.baidu.com/ ECharts3开始不再强制使用AMD的方式按需引入，代码里也不再内置AMD加载器。因此引入方式简单了很多，只需要像普通的JavaScript库一样用script标签引入。<!DOCTYPEhtml><html>... 查看详情

echarts入门学习(代码片段)

一.小点整理简单使用1、echarts柱状图x轴数据隔一个显示xAxis: axisLabel: interval:0 ,2、显示数值柱状图上方显示数值series:[ type:'bar', itemStyle: normal: label: show:true,//开启显示 position:'top',//在查看详情

echarts入门学习(代码片段)

一.小点整理简单使用1、echarts柱状图x轴数据隔一个显示xAxis: axisLabel: interval:0 ,2、显示数值柱状图上方显示数值series:[ type:'bar', itemStyle: normal: label: show:true,//开启显示 position:'top',//在上方显示查看详情

echarts图表学习(代码片段)

...一个玩玩，以备后面做数据分析使用。官网地址：http://echarts.baidu.com/index.html大致了解了下Echarts的各个实例，发现使用起来还是简单易上手的。利用数据库里面的出入库数据做一个年度的出入库折线图。（这里的Echarts-darkTheme.js... 查看详情

echarts饼图学习(代码片段)

效果图实现代码可直接复制运行：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>饼图</title> <scriptsrc="https://cdn.staticfile.org/echarts/4 查看详情

echarts饼图学习(代码片段)

效果图实现代码可直接复制运行：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>饼图</title> <scriptsrc="https://cdn.staticfile.org/echarts/4 查看详情

qt+echarts开发笔记：echarts介绍下载和qt调用echarts基础柱状图demo(代码片段)

...发大数据可视化看板，基于Qt使用QWidget或者QML是很难达到ECharts大数据看板的效果，所以使用Qt来制作。核心思想每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型EChar... 查看详情

echarts学习笔记

1.Ecahrts使用首先需要引用js文件Echarts.js 然后定义一个带id的容器（div就可以）然后就可以初始化echarts了↓这是柱形图<h2class="content-tit">本校各年级教材费用</h2><divclass="chart-boxclearfix"><divclass="zhu-img-1"id="Ba 查看详情

qt+echarts开发笔记：echarts的柱状图介绍基础使用和qt封装demo(代码片段)

前言上一篇成功是EChart随着Qt窗口变化而变化，本篇将开始正式介绍柱状图介绍、基础使用，并将其封装一层Qt。本篇的demo实现了隐藏js代码的方式，实现了一个条形图的基本交互方式，即Qt调用js脚本操作html。... 查看详情

qt+echarts开发笔记：echarts的饼图介绍基础使用和qt封装百分比图demo(代码片段)

...并预留了Qt模块对外的基础接口。<br>Demo演示<br>ECharts代码效果调试使用ECharts的在线调试器，先调试出大致预期的效果。option=lege 查看详情

qt+echarts开发笔记：qt窗口动态调整大小，使echarts跟随qt窗口大小变换而变换大小(代码片段)

前言上一篇将ECharts嵌入Qt中，在开始ECharts使用之前，还有一个很重要的功能，就是在窗口变换大小的时候，ECharts的图表尺寸也要跟随Qt窗口变换大小而变换大小。Demo演示原理 QWebEnginePage的大小会动态... 查看详情