echarts的基本使用

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

一、基本使用
1.导入echarts.js

  • 下载并导入
    地址：https://echarts.apache.org/zh/download.html
  • 使用 CDN 方法
    https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

2.开始绘制
（1）准备一个dom容器存放echarts
在这里插入图片描述
（2）初始化echarts实例并添加到刚刚所准备的容器中
在这里插入图片描述
（3）配置图表数据
在这里插入图片描述
（4）将配置好的图表添加到实例中
在这里插入图片描述

3.效果图
在这里插入图片描述
4.完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		  <div id="main" style="width: 600px;height:400px;"></div>
	</body>
	
	    <!-- 引入 echarts.js -->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<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>
</html>

二、使用图表样式并进行修改
可以在Gallery网站中选择适合的图表样式进行快速应用
在这里插入图片描述1.选择所需的样式，复制左侧的代码替换到我们的option中并适当的调整容器的大小即可
在这里插入图片描述2.替换数据
（1）将准备好的横坐标和数据替换到option中
在这里插入图片描述
（2）替换横坐标
在这里插入图片描述
（3）替换数据
在这里插入图片描述

3.效果图
在这里插入图片描述

4.完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		  <div id="main" style="width: 850px;height:400px;"></div>
	</body>
	
	    <!-- 引入 echarts.js -->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<script type="text/javascript">
		var xArr = ['横坐标1','横坐标2','横坐标3','横坐标4','横坐标5','横坐标6','横坐标7','横坐标8',]
		var dataArr = [100, 600, 300, 100, 250, 500,400,749];
		
		
		
		
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		
		// 指定图表的配置项和数据
		var option = {
		//背景色
    backgroundColor: '#00265f',
		//标题
    "title": {
        "text": "测试图表",
        x: "center",
        y:"4%",
        textStyle: {
            color: '#fff',
            fontSize: '22'
        },
        subtextStyle: {
            color: '#90979c',
            fontSize: '16',

        },
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        top: '15%',
        right: '3%',
        left: '5%',
        bottom: '12%'
    },
		//x轴配置
    xAxis: [{
        type: 'category',
        data: xArr, //替换横坐标
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.12)'
            }
        },
        axisLabel: {
            margin: 10,
            color: '#e2e9ff',
            textStyle: {
                fontSize: 14
            },
        },
    }],
		//y轴配置
    yAxis: [{
        name: '单位：元',
        axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,1)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.12)'
            }
        }
    }],
    series: [{
        type: 'bar',
        data: dataArr, //替换数据
        barWidth: '20px',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
            }
        },
        label: {
            normal: {
                show: true,
                lineHeight: 30,
                width: 80,
                height: 30,
                backgroundColor: 'rgba(0,160,221,0.1)',
                borderRadius: 200,
                position: ['-8', '-60'],
                distance: 1,
                formatter: [
                    '    {d|●}',
                    ' {a|{c}}     \n',
                    '    {b|}'
                ].join(','),
                rich: {
                    d: {
                        color: '#3CDDCF',
                    },
                    a: {
                        color: '#fff',
                        align: 'center',
                    },
                    b: {
                        width: 1,
                        height: 30,
                        borderWidth: 1,
                        borderColor: '#234e6c',
                        align: 'left'
                    },
                }
            }
        }
    }]
};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	 </script>
</html>
茶梨吐司
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如何找到echarts.min.js，并使用echarts
qq_43453731的博客
07-10 1万+
现在登录Echarts官网，找到下载界面，你会发现下载界面变成在这个界面你已经找不到完整版、精简版之类的，可以下载的全是代码，这对于小白来说，是不是一头雾水啊！没关系，接着往下看！！！ 1.下载Echarts 网址：https://www.7down.com/soft/214165.html 点击下载。下载完后，解压如图所示 一定要有echart.min.js文件。 2.创建一个HTML文件，写下...
Echarts的引用
路~可以走过
03-16 432
1.主要内容，参考文档：https://www.echartsjs.com/zh/index.html 1.引入echarts的js文件 2.HTML设置一个具有宽高的容器 3.将容器初始化echarts实例 echarts.init 4.设置图表的样式 5.将图表放入容器中 2.代码示例 <!doctype html> <html> <head&gt...
【Echarts】使用及应用案例
最新发布
每天進步一點點
06-26 837
第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩 ，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
pyecharts 生成网页资源加载缓慢，更换默认echarts.min.js加载地址。
ZZULI_星.夜
08-08 3398
致读者： 博主是一名数据科学与大数据专业大二的学生，真正的一个互联网萌新，写博客一方面是为了记录自己的学习过程中遇到的问题和思考，一方面是希望能够帮助到很多和自己一样处于困惑的读者。 > 由于水平有限，博客中难免会有一些错误，有纰漏之处恳请各位大佬不吝赐教！之后会写大数据专业的文章哦。 GitHub链接https://github.com/wfy-belief 尽管现在我的水平可能还不太及格，但我会尽我自己所能，做到最好☺。——天地有正气，杂然赋流形。下则为河岳，上则为日星。 码文不易，可以给我.
Echarts在js中引用是无需下载文件，直接网络引用。src地址记录
Harry博客
05-26 6171
在一个帖子里找到了一个链接，帖子的网址是：点击打开链接； 这个链接是 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> 引入这个连接就可以使用echarts了。 页面给一个div的位置 <div id="main" style="width: 600px;height:400px;"&...
Echarts的基本使用
08-21
快速的了解Echars图表的常用API，急速上手构建可视化工具，有例子有md笔记，量少成本低
echarts的基本使用以及代码演示
05-06
**ECharts 基本使用及与 Vue.js 集成指南** ECharts 是一个由百度开发的开源数据可视化库，支持丰富的图表类型，如折线图、柱状图、饼图、散点图等。它具有良好的交互性和灵活性，可以方便地在 Web 页面上展示复杂...
详解ECharts使用心得总结
09-01
ECharts通常会依赖于ZRender，这是一个独立的图形渲染引擎，用于处理基本的矢量图形绘制。下载ECharts时，最好同时下载ZRender以确保所有必要的组件都已包含。ECharts的下载链接可以在其官网找到，而ZRender的下载...
ECharts 使用demo
05-24
2. **ECharts基本使用步骤**： - 引入ECharts库：在HTML文件中通过`<script>`标签引入ECharts的JavaScript文件。 - 准备容器：创建一个用于展示图表的DOM元素，例如`<div id="main"></div>`。 - 初始化ECharts...
vue使用 echarts
06-09
在本文中，我们将深入探讨如何在Vue.js框架中有效地使用ECharts数据可视化库。Vue.js是一个流行的前端JavaScript框架，以其轻量级、易用性和组件化特性受到开发者的喜爱。而ECharts则是一款由百度开源的数据可视化库...
echarts-4.3.zip完整版
10-12
echarts-4.3.zip完整版,有需要的就下载吧,echarts开发还是很不错的!
echarts最新版js文件
11-22
echarts是一个专注于图表绘制的一个插件，可以实现高度可定制，此js为2018年11月22日前最新版，大家放心下载
小程序引用echart.js
weixin_41760500的博客
09-04 2165
在小程序中引用echart, 首先我们得下载echart(小程序版本)，连接地址https://github.com/ecomfe/echarts-for-weixin 下载好后打开，如图： 将下载好的ec-canvas文件放在和pages同级目录下，如： 1、当我们引入文件后，接下来将是重点，我们在pages下创建一个我们需要用到统计的页面如：statistics. 然后我们在stati...
echarts官方js引入地址
cui_hope的博客
10-25 987
echarts官方js引入地址
echarts引入的几种方式
weixin_50606255的博客
05-10 2万+
1. npm或者cnpm 安装 npm install echarts --save cnpm install echarts --save 引入echarts，就可以使用了 import echarts from 'echarts'; 2.cdn引入
html制作个人简历网页
qq_44892582的博客
06-17 2万+
以下是我用html的相关知识制作的个人简历网页，话不多说先看看最终效果： 如上所示项目一共分为5个部分，分别对应导航栏的5个内容。其中项目技能用的是echarts里的柱状图，作品展示用的是bootstrap里的轮播图，除此之外就是html的基础内容。下面我们展示一下项目的代码部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>
基于js+echarts实现数据可视化
奶茶控
10-22 1万+
本项目中使用的是echarts图表库，Echarts提供了常规的折线图、柱状图、散点图、饼图、k线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 一、效果展示图 二、目录结构 ...
Jquery,Echarts在js中引用是无需下载文件，直接网络引用。src地址记录，长期更新
自在如风
02-08 1万+
Jquery.js引用地址 Echarts.js引用地址
Echarts.js下载及简易Demo
热门推荐
qq_44373419的博客
06-25 3万+
本人小白：在做项目时，老师要求使用echart统计。之后google了一下才知道echart是一个插件。 Echarts是“开源”的，提供了创建多种多样的图表。包括折线图、坐标系、散点图等等之类的这里就不一一列举了。大家可以Echart官网去查看 随便点开一个，里面是部分源码 左边是主要源码，右边是效果图 注意：只在script中写左边代码是不能显示的，只需要加两行代码就行了，后面会讲。 那么...
echarts基本使用
05-31
好的，以下是 echarts 的基本使用方法： 1. 下载并引入 echarts 库文件 在网站中引入 echarts 库文件，可以通过官网下载或者使用 CDN 引用。 2. 初始化 echarts 实例 使用以下代码初始化一个 echarts 实例： ``...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值