echarts的使用

最新推荐文章于 2023-03-27 09:30:00 发布
最新推荐文章于 2023-03-27 09:30:00 发布
阅读量512 收藏
点赞数 1
分类专栏： 笔记 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/An_Cool_bree/article/details/122067519
版权

目录

1、基本使用

2、常用配置项说明

2.1、决定图表的类型和数据（series）

2.2、标题（title）

2.3、提示框（tooltip）

1、基本使用

  1. 先引入echarts
  2. 然后创建一个元素用来装载echarts图表
  3. echarts.init() 方法初始化 echarts 实例
  4. 最后设置配置项和数据 option，使用 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 入门示例'
   

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  An丶清风
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
echarts使用指南

				
			

			

				

					TeAmo__的博客
				

				

					03-28
					
					6328
					
				

			

		

		

			
				
一、echarts是什么？

二、基础使用步骤

下载

使用步骤

三、属性详解

option 选项

type 类型

四、特别设置

颜色样式控制

线

柱状图

渐变颜色

堆叠图

富文本

五、地图


前言

在前端工作中，加图表是一个非常常见的任务，今天分享的就是echarts的学习笔记。

一、echarts是什么？

一个基于 JavaScript 的开源可视化图表库

百度开发团队制作，开源交给apache基金管理

同类型产品：Highcharts、HighchartsD3...

			
		

	



                

              
                



	

		

			

				
					
echarts使用

				
			

			

				

					weixin_44213835的博客
				

				

					06-18
					
					1671
					
				

			

		

		

			
				
1. 绘制简单图表
（1）在绘图前需要为Echarts准备一个有宽高的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>

（2）通过echarts.init方法初始化一个echart实例
// 基于准备好的dom，初始化echarts实例，使用这种方法需保证容器已经有宽度和高度了
var myChart = echarts.init(document.getElementById('main'));

// 

			
		

	



                


  
              

                


	

		

			

				
					
ECharts使用步骤

				
			

			

				

					m0_59839948的博客
				

				

					05-10
					
					2892
					
				

			

		

		

			
				
使用ECharts制作图表的步骤如下：

（1）新建HTML页面，一般为HTML5页面。

（2）在HTML页面头部中导入JS文件。（注：JS文件由于发布出来，需要自己进行查找或者私聊我）

（3）在HTML页面正文中使用JavaScript代码实现图表的显示。



使用ECharts制作图表的具体实现如下：

（1）引入ECharts：（HTML代码块）


<head>
		<meta charset="utf-8">
		<title>ECcharts</t

			
		

	





	

		

			

				
					
ECharts 使用 showLoading

				
			

			

				

					yijiupingfan0914的博客
				

				

					11-26
					
					1万+
					
				

			

		

		

			
				
使用ECharts自带的showLoading方法进行提示：


var dom = document.getElementById('container');
var myChart = echarts.init(dom);
function chart() {
option = {
 /****/
}
}
myChart.showLoading({ text: '正在加载数据' });  //...

			
		

	



		

			
		



	

		

			

				
					
echarts 使用 time  时间轴

				
			

			

				

					马的博客
				

				

					11-19
					
					1万+
					
				

			

		

		

			
				
最少代码量表达：
let myChart = this.$echarts.init(document.getElementById('myEcharts'));
 // 绘制图表
 let option;
 option = {
   xAxis: {
     type: 'time',
   },
   yAxis: {
     type: 'value',
   },
   series: [
     {
       type: 'line',
       data: [
         [

			
		

	





	

		

			

				
					
echarts 使用报错汇总

				
			

			

				

					EsquireY的博客
				

				

					04-13
					
					2762
					
				

			

		

		

			
				
项目报错示意

解决办法

根据提示 添加一个.d.ts 文件

项目根目录新建 echarts.d.ts 文件

添加声明
declare module 'echarts' {
    const echarts: any
    export default echarts
  }
  

注意

不同版本的 Echarts 引入方式不同，根据提示修改即可。


...

			
		

	





	

		

			

				
					
echarts使用ajax接收数据并展示

				
			

			

				

					欧阳小白闯天涯
				

				

					07-27
					
					1万+
					
				

			

		

		

			
				
首先找一个echarts实例



然后自己搭建环境运行


var lineChart = echarts.init(document.getElementById('event_pandect'),'macarons');（添加）

option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
    ...

			
		

	





	

		

			

				
					
在vue项目中使用echarts（echarts不显示，echarts使用详细）

				
			

			

				

					weixin_65793170的博客
				

				

					03-27
					
					2960
					
				

			

		

		

			
				
我们在写大屏项目和vue项目时经常会用到echarts，用于数据统计和可视化，它是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表，下面分享下它在项目中的使用方式。

			
		

	





	

		

			

				
					
vue-echarts基本使用

					
热门推荐

				
			

			

				

					
				

				

					03-18
					
					6万+
					
				

			

		

		

			
				
1，安装vue-echarts


cnpm i -S vue-echarts

2,main.js中全局注册组件


import ECharts from 'vue-echarts/components/ECharts'
Vue.component('v-chart', ECharts)

3，修改echarts

在项目的node-modules文件夹中根据路径：vue-echarts/co...

			
		

	





	

		

			

				
					
Vue 使用Echarts

				
			

			

				

					chenfairy的博客
				

				

					02-08
					
					8743
					
				

			

		

		

			
				
在vue中使用echarts有两种方法
一、安装并全局引入
1、通过npm获取echarts


npm install echarts --save

2、在 main.js 中添加下面两行代码




import echarts from 'echarts'

Vue.prototype.$echarts = echarts //挂载到Vue实例上面

二、使用https://echa...

			
		

	





	

		

			

				
					
详解ECharts使用心得总结

				
			

			

				

					09-01
				

			

		

		

			
				
**ECharts 使用心得总结**  ECharts 是一个基于 JavaScript 的开源可视化库，由百度开发并维护。它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等，同时也支持地图的绘制。在本文中，我们将探讨ECharts...

			
		

	





	

		

			

				
					
echarts使用小结

				
			

			

				

					10-26
				

			

		

		

			
				
下面我们将深入探讨ECharts的基本使用方法。  **一、安装与引入**  在开始使用ECharts前，首先需要下载或通过npm安装ECharts库。如果选择下载，可以从ECharts官网获取最新版本的压缩包，解压后在HTML文件中引入`...

			
		

	





	

		

			

				
					
echarts使用方法

				
			

			

				

					02-11
				

			

		

		

			
				
**ECharts 使用方法详解**  ECharts 是一个由百度开发的，基于 JavaScript 的开源可视化图表库。它支持多种图表类型，如折线图、柱状图、饼图、散点图等，广泛应用于数据可视化的场景。ECharts 提供了丰富的交互功能...

			
		

	





	

		

			

				
					
echarts使用timeline

				
			

			

				

					03-08
				

			

		

		

			
				
echarts3中如何使用timeline，官方的事例代码不是很容易看懂，所以写示例希望也能帮助你搞定timeline，原文地址 http://blog.csdn.net/kebi007/article/details/60882367

			
		

	





	

		

			

				
					
ECharts 使用demo

				
			

			

				

					05-24
				

			

		

		

			
				
"ECharts 使用demo"这个主题显然关注的是如何有效地利用ECharts进行数据可视化。下面我们将深入探讨ECharts的核心特性、基本使用方法以及一些常见图表类型的示例。  1. **ECharts核心特性**：  - **跨浏览器支持**：...

			
		

	





	

		

			

				
					
async和await的用法

				
			

			

				

					An_Cool_bree的博客
				

				

					05-21
					
					5万+
					
				

			

		

		

			
				
一、async&await用法

async 表示函数里有异步操作，

await 表示紧跟在后面的表达式需要等待结果。

同 Generator 函数一样，async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。



二、async/await的优点

1）方便级联调用：即调用依次发生的场景；

2）同步代码编写方式： Promise使用then函数进行链式调...

			
		

	





	

		

			

				
					
vue接收图片数据流，显示在页面

				
			

			

				

					An_Cool_bree的博客
				

				

					10-20
					
					4123
					
				

			

		

		

			
				
1、先通过ref获取到img元素。


<img v-if="ls" ref="test" src="" alt="" />

2、请求接口，获取到数据图片流，赋值到img的src中，注意，需要拼接“data:image/png;base64,”，逗号必须加


axios.post(this.$api+"地址", JSON.stringify(data), {
      }).then(res => {
        console.log(res, 11111)
        t

			
		

	





	

		

			

				
					
v-model实现父子组件通信

				
			

			

				

					An_Cool_bree的博客
				

				

					05-27
					
					2253
					
				

			

		

		

			
				
如何实现两个组件之间的双向传递呢？

即，在父组件中修改了值，子组件会立即更新。在子组件中修改了值，父组件中立即更新。

vue中有一个很神奇的东西叫v-model，它可以完成我们的需求。

使用v-model过程中，父组件我们还是需要将子组件正常引入，只是传值方式改成了v-model



1、v-model一般用于表单的双向数据绑定


<template>
  <div>
    <input type="text"
           v-model="msg"...

			
		

	





	

		

			

				
					
vuex的五个核心属性

				
			

			

				

					An_Cool_bree的博客
				

				

					06-02
					
					1493
					
				

			

		

		

			
				
VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念：

　　state,getters,mutations,actions,modules。

　　1. state：vuex的基本数据，用来存储变量

　　 2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

　　 3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用...

			
		

	





	

		

			

				
					
echarts 使用

					
最新发布

				
			

			

				

					10-11
				

			

		

		

			
				
使用 ECharts 可以方便地将数据可视化，使得数据更加直观、易于理解。  ECharts 的使用步骤如下： 1. 引入 ECharts 库文件 2. 创建一个 div 容器 . 初始化 ECharts 实例 4. 配置图表选项 5. 将图表渲染到 div 容器中...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值