echarts入门教程(含代码，效果图)

最新推荐文章于 2024-06-26 11:09:42 发布
最新推荐文章于 2024-06-26 11:09:42 发布
阅读量1.2k 收藏 6
点赞数 4
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bear_people_clan/article/details/110817266
版权

目录

1.基础案例

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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>

2.效果图

在这里插入图片描述

2.双柱状图

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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]
            },
		 {
               name: '销量',
               type: 'bar',
               data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

2.效果图

在这里插入图片描述

3.生成效果代码

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

3.在柱状图上显示数值

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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',
				label: {
				show: true,
				position: 'top'
				},
                data: [5, 20, 36, 10, 10, 20]
            }
			]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

2.效果图

在这里插入图片描述

3.效果生成代码

label: {
   show: true,
   position: 'top'
}

4.可拖动X轴

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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',
				label: {
				show: true,
				position: 'top'
				},
                data: [5, 20, 36, 10, 10, 20]
            }
			],
			dataZoom: [
			{   
				type: 'slider', 
				start: 10,      // 左边在 10% 的位置。
				end: 60         // 右边在 60% 的位置。
			},
   		{   // 这个dataZoom组件，也控制x轴。
   			type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
   			start: 10,      // 左边在 10% 的位置。
   			end: 60         // 右边在 60% 的位置。
    	}
		]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

2.效果图

在这里插入图片描述

3.效果生成代码

dataZoom: [
{   
		type: 'slider', 
		start: 10,      // 左边在 10% 的位置。
		end: 60         // 右边在 60% 的位置。
		},
  		{   // 这个dataZoom组件，也控制x轴。
   	type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
   	start: 10,      // 左边在 10% 的位置。
   	end: 60         // 右边在 60% 的位置。
    	}
	]

5.柱状图变折线图

1.代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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: 'line',
				label: {
				show: true,
				position: 'top'
				},
                data: [5, 20, 36, 10, 10, 20]
            }
			],
			dataZoom: [
			{   
				type: 'slider', 
				start: 10,      // 左边在 10% 的位置。
				end: 60         // 右边在 60% 的位置。
			}
		]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

2.效果图

在这里插入图片描述

3.效果生成代码

 type: 'line',
幽幽晚风卿且尝
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Echarts制作各种图表 自己的源代码
夏言辰的专栏
04-24 3523
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>       ">          My JSP 'EcharsOne.
echarts4离线使用文档_用好VBA官方文档，胜过任何教材
weixin_39995108的博客
11-27 524
市面上的VBA教程各式各样，藏在Excel中最原汁原味的官方文档，却没几个人知道或者不知道如何使用。可以说所有市面上的教材都源于对官方文档的扩充，拓展再造。不同版本对于官方文档的调用方式：•office2010以及以前版本在代码编辑界面VBE中，直接按F1即可调出VBA官方本地帮助文件。可以在搜素框内部直接输入需要查询的对象、属性、方法等关键词。•office2013以及目前最新的2019版本不再...
echarts开发实例Demo
11-04
echarts开发实例Demo
数据可视化工具 - ECharts折线图的编写
一个搬砖工人
05-10 1112
以下是后台送过来数据（ajax请求过来的）// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 2. 指定配置和数据。// 2. 指定配置和数据。// 1. 实例化对象。// 1. 实例化对象。
【Echarts】使用及应用案例
最新发布
每天進步一點點
06-26 877
第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩 ，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
echart的各种图代码
weixin_41463944的博客
05-28 476
1、饼状图 <div id="main" style="width: 600px;height:400px;"></div> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"> var myChart = echarts.init(document.getElementById('main')); option = { title :
echarts入门示例
11-12
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、饼状图等，适用于各种Web应用中的数据展示。ECharts 的优势在于其易于使用、灵活定制以及良好的性能，使得它在前端开发...
Echarts入门到精通
12-03
3. 初始化ECharts实例：通过JavaScript代码指定图表显示的DOM元素，并初始化ECharts实例。 4. 配置图表：设置详细的配置项，定义图表类型、数据、样式等，这一步骤决定了最终的图表效果。 ECharts的社区活跃，用户...
HETF-Echarts入门手册.doc
10-02
Echarts提供了丰富的图表类型，如折线图、柱状图、散点图、K线图、饼图、雷达图、和弦图、力导向布局图、地图、仪表盘、漏斗图以及事件河流图等。此外，它还包含了多个交互式组件，如标题、详情气泡、图例、值域、...
echarts入门视频、笔记和源码
11-04
本资源包包含“echarts入门视频”、“笔记”和“源码”，是学习和掌握ECharts的绝佳材料。 一、ECharts基本概念 ECharts的设计理念是易用性和强大的功能相结合，支持动态数据绑定，可以灵活地与JavaScript交互，...
Echarts + Web实现大屏展示效果
09-21
title: {text: 'ECharts 入门示例'}, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10,...
深圳市echatrts最全js及json文件
08-03
深圳市 超详细json和js数据，需要的可下载，其他地市区县也有，后续上传发布
echarts新手入门参考资料
12-18
资料是自己总结的，感觉比较适合之前没用过的或者新人看看，里面写有如何下载，如何引入js文件，如何下载官网案例源码，如何学习echarts之类等等，有需要的可以下载看看
echarts.js
02-13
echarts地图的js文件
echarts 实例
Irving_zhang的专栏
08-11 3340
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <!-- 该div就是地图的div，通过调整该div的style就可以调整地图大小和位置 -->
Echarts数据图表插件--开源、大气、强大
weixin_30566111的博客
01-19 54
个人觉得不错，分享给大家。 教程地址：http://echarts.baidu.com/， 开源项目：https://github.com/ecomfe/echarts 转载于:https://www.cnblogs.com/feaskye/p/echarts.html
vue-element-admin 综合开发五：引入 echarts，封装echarts 组件
冯安晨
08-25 2701
vue-element-admin 综合开发五：引入 echarts，封装echarts 组件
在Vue怎么使用Echarts创建图表
fujiaran的博客
09-16 397
在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用。 官网地址如下：Echarts图表官网 详细信息请阅览他们的官网文档和实例，各种图表都比较完善。 一.安装插件 方法一：npm安装Echarts npm install echarts -S 方法二：cnpm安装Echarts 1.首先我们需要安装cnpm npm install -g cnpm --registry=https://registry.n
ECHarts入门
asddasddeedd的博客
01-03 2724
一、ECHarts基本介绍 百度公司开源的一个可视化库，满足绝大部分可视化图表的实现，是实现数据可视化的最佳工具之一。 官方网址：Apache ECharts ECHarts特点： 1、多种数据格式支持 key—value数据格式 二维表 TypedArray格式 2、流数据的支持 流数据的动态渲染 增量渲染技术 3、移动端的优化 4、跨平台的使用 5、绚丽的特效 6、三维可视化 二、ECHarts入门 实现步骤 引入echarts.js文件 准备一个..
echarts视频教程从入门到实战
09-08
ECharts（百度开源的数据可视化库）视频教程从入门到实战会涵盖以下几个方面。 1. 入门介绍：教程开始会给出ECharts的基本介绍，包括其特点、适用场景和支持的图表类型等。也会讲解如何安装ECharts以及开发环境的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值