echarts入门实践

于 2020-06-30 08:28:03 发布
阅读量331 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41375318/article/details/107032858
版权

echarts入门实践

视频教程：B站、网易云课堂、腾讯课堂
代码地址：Gitee、Github
存储地址：
百度云-提取码：
Google云

Echarts3.0入门课程介绍

在这里插入图片描述

在这里插入图片描述

Echarts3.0入门之浏览器画图原理

在这里插入图片描述

canvas.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>

<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px">
您的浏览器不支持canvas标签。
</canvas>

<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");  
//开始一个新的绘制路径
ctx.beginPath();
//设置弧线的颜色为蓝色
ctx.strokeStyle = "blue";
var circle = {
    x : 100,    //圆心的x轴坐标值
    y : 100,    //圆心的y轴坐标值
    r : 50      //圆的半径
};
//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);    
//按照指定的路径绘制弧线
ctx.stroke();

</script>
</body>
</html>

svg.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>svg</title>
</head>
<body>
  

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<!-- circle是圆形标签 -->
<circle cx="70" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
<!-- rect是长方形标签 -->
<rect x='120' width="100" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>


</body>
</html>

在这里插入图片描述

echarts官网展示

Echarts常用图之简单的直方图和折线图

在这里插入图片描述

直方图

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

// 指定图表的配置项和数据
var option = {
    // 标题
    title: {
        text: 'ECharts 入门示例'
    },
    // 工具箱
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    // 图例
    legend: {
        data: ['销量']
    },
    // x轴
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    // 数据
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

折线图

在这里插入图片描述

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{

        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    },{

        name: '产量',
        type: 'line',
        data: [7, 30, 50, 11, 40, 80]
    }]
};

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

Echarts常用图之标题组件

在这里插入图片描述
title.html

<!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: 900px;height:600px;"></div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        show:true,
        text: 'ECharts 入门示例',
        subtext:'学习ECharts就来慕课网',
        left:'right', // 数字就是像素值 ，也可以是 center left right这种值
        borderColor:'red',
        borderWidth:5,
        textStyle:{
            fontSize:40
        }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show: true
            }
        }
    },
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{

        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

Echarts常用图之工具箱组件

Echarts常用图之弹窗组件

Echarts常用图之标记线和标记点

Echarts常用图之饼图

Echarts常用图之仪表盘

Echarts常用图之地图

Echarts常用图之K线图雷达图散点图

Echarts高级之多个坐标轴

Echarts高级之区域缩放

Echarts高级之值域选择

Echarts项目之定制主题

Echarts项目之练习第一步准备文件

Echarts项目之获取百度接口经纬度数据

Echarts项目之根据经纬度绘图

Echarts项目之完善功能

*Major*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts从入门到上手实战视频教程 70课(完整)
11-03
ECharts，一个使用 JavaScript 实现的开源可视化库。上手简单、实用，是你在工作可视化的利器，值得学习
JS小白5分钟上手echarts的实践与示例器上直接运行
jknpocca的博客
03-13 921
(一)5分钟上手echarts的实践 **前言：**不了解echarts，看到每篇推文都说要先下载echarts，可我不明白echarts难道是一个exe吗？为啥要先下载，官网上不是有很多示例吗？总之在看了一个5min的演示后，决定先看5min的快速上手是否快速。 看到fig1，我以为官方源码和GitHub是并列的关系，所以我点击了fig2中的从镜像网站下载源码，得到一个fig3中名为Apache-echarts-5.0.2-src.zip的压缩包，但是完全找不到教程中出现的 echart.min.js.
bootstrap+echarts两大前端利器视频教程（良心推荐）
04-02
bootstrap和echarts无论是在个人项目还是企业项目中他们的地位可想而知，懂的自懂，虽然两种技术有中文文档，但是文档内容却是很多，自己也不会去归纳总结技巧，虽然能达到自己的要求，但是不能确定是否规范，并且要花很多精力去自己挖掘，因此贡献两套资源，看看人家是怎么玩转两门技术，帮你总结经验，事半功倍
ECharts 浙江地图实践
月迷津渡丶的专栏
01-27 4521
效果: // 路径配置 require.config({ paths : { echarts : '${resources }/echarts/dist' //${resources } 看下面的 } }); require([ 'echarts','echarts/chart/map' ], function(ec) { // 基于
ECharts下载最简单方法——小白必看
热门推荐
qwe122343的博客
02-08 6万+
讲道理在网上找了半天也没教会我怎么在EChart官网下载EChart， 个人认为小白应该移步它的GitHub下载 这里讲2种方法 1、最简单粗暴的方法，直接点红圈，下载15M左右的Zip即可 解压Zip即可找到echarts.all.js等 2、嫌压缩包下载麻烦可以直接下载单个文件 点击Github页面的 echarts.all.js 右键单击Raw，选择链接另存为，也可直接得到js文件 ...
Echarts入门到精通
12-03
ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts入门示例
11-12
echarts插件常用的柱状图，饼状图，ajax数据类型的柱状图，饼状图，多属性柱状图
Echarts入门教程
11-01
改资源主要是介绍了如何使用Echarts，来源于Echarts的核心开发者林峰。
HETF-Echarts入门手册.doc
10-02
HETF-Echarts入门手册.doc
Echarts基础加实践
10-29
echarts基础到实践 echarts实践视频 统计图 饼图表示数据分布 echarts连接数据库
【Python可视化系列】关于 pyecharts的使用实践
梦想专栏
08-23 6248
一、环境搭建 http://echarts.baidu.com/index.html   echarts主页   二、入门demo展示 1、入门demo1 #!/usr/bin/python # -*- coding:utf-8 -*- from pyecharts import Bar attr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun.
Echarts入门----Echarts初学保姆版（老泪纵横）下载使用教程附画图实例
weixin_43831576的博客
11-28 2万+
Echarts入门----Echarts初学保姆版（老泪纵横）下载使用教程附画图实例 一、echarts介绍 ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。可以直接使用E...
eCharts项目完整实践（一）
weixin_33969116的博客
12-08 401
第一次接触eCharts，学习中。实现功能：1、进入展示折线图（line）,可转换为柱状和存图； 2、折线图上提示上加超链接功能； 3、整个图像可以随窗口大小改变而改变； 4、兼容到至少IE7；<scripttype="text/javascript"> varss=null; ...
echarts实践用法
dayinyang2005的博客
05-10 89
在折线图中，当点击某个节点，出现提示浮框，并且可以进行点击操作 echarts 配置 tooltip: { show: true, formatter: function(e) { return 'any msg' }, triggerOn: 'click' ...
echarts基础教程
Major_S的博客
06-30 333
echarts基础教程
echarts3的简单实践（饼图、柱形图、折线图、地图+散点图）
瓶子里的小地盘
06-26 4110
echarts3是向下兼容echarts2的，所以echarts2切换到echarts3基本无需改代码。 饼图、柱形图、折线图：用的echarts2的配置项，但是能正常显示 代码片段： function loadCharts(orgCode){ /** 构建故障原因饼图 */ myChart1.showLoading();
echarts4下载安装图文详解
咕噜君的博客
05-25 8330
echarts下载有很多方法，但是对于可视化工具，我们是为了使用而不是学习它有多少下载的方法，所以这里介绍我认为最简单的一种，节省时间，一步成功，避免走一些不必要的弯路。 第一步： 直接进入官网的下载页面：https://echarts.apache.org/zh/download.html 第二步： 选择需要下载的版本 以4.8.0版本为例，我们直接从 GitHub 下载，选择Dist进入 第三步： 下载 我们直接退到上一级目录，全部打包下载 点击cloneordown...
spring java图片上传源码.rar
最新发布
04-26
源码实现了图片上传功能，可供相关功能开发的小伙伴参考学习使用。
新入职员工工作总结范文大全(篇).docx
04-26
工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。
vue与echarts整合实践 如何实现动态排序柱状
06-02
要实现动态排序柱状图，需要使用 Echarts 的数据操作和动画效果。 首先，需要获取数据，并将数据按照排序规则进行排序。可以使用 Vue 的计算属性来实现动态排序。 其次，需要在 Echarts 中使用数据，并将数据绑定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值