百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

Echarts基本的实用属性 echarts属性大全

bigegpt 2024-10-20 04:24 2 浏览

大家也可以去Echarts官网查看相关属性：echarts官网Documentation - Apache ECharts，下面都是我在官网中提炼和平时工作中所用到的基本常见属性以及一些特殊属性。
基本结构

<html>
	<div id="container" style="width:100px;height:100px"><div>
</html>
<script>
	var chartDom = document.getElementById('container');
	var myChart = echarts.init(chartDom);
	option = {
		legend: {},//小标签，图例
		grid: {},//图表的位置
		tooltip:{},//鼠标移入显示的文本
		toolbox: {},//拓展的基本功能，复位，下载，转换等等
		xAxis: {},//x轴
		yAxis: {},//y轴
		color:[],//颜色，柱形图，折线等等
		series: {},//存放的数据，值
	}
	 option && myChart.setOption(option);//绘制图表
</script>

详细属性
1，legend，小标签，图例

 legend: {
      top:32,//图例距离页面顶部的距离
      left:'center',//图例的位置，left，center，right
      data: ['降水量', '累计降水'],//图例的名称，有几个就写几个
    },

2，grid，图表的位置

 grid: {
      left: "2%",//图表距离页面左边的距离
      top: "16%",//上
      right: "0%",//右
      bottom: "0%",//下
      containLabel:true,//是否包含坐标轴的刻度标签。
    },

3，tooltip，鼠标移入显示文本

        tooltip: {
              trigger: "axis", //触发类型
              backgroundColor: "rgba(255,255,255,1)", //背景
              textStyle: {
                color: "black", //设置文字颜色
              },
              axisPointer: {//鼠标更随
                type: 'cross',
                label: {
                  backgroundColor: '#fff',
                  color:'#000',
                  borderColor:'#aaa',
                  borderWidth:'1'
                },
              }
            },

4，toolbox，附加功能

toolbox: {	
      show: true,//是否显示
      feature: {
        dataView: {//转换为表格
        	show: true
        },
        restore: {//还原，复位，恢复第一次的样子
        	show: true
        },
        saveAsImage: {//下载，保存为图片
        	show: true
        },
        dataZoom:{//局部数据缩放
        	show:true
        },
	    magicType: {//折线图柱状图等等切换
	        type: ['line', 'bar', 'stack']
	    }
      }
    },

5，color，图例，内容的颜色

color:'#1F1FF9',//只有一个图例
color:[],//多个就用数组装着，逗号隔开

6，X轴

 xAxis: {
      type: 'time',//轴线格式
      axisLabel: {
        show: true,//标签显示 
        interval:'0' //隔一个显示一个刻度标签
      }
    },

7，Y轴
如果想要双y轴复制一个就可以了

    yAxis: [{
      name:'降水',//名称
      type: 'value',
      position: 'left',//位置
      interval:50, //刻度值每次增加几个
      min:0,//最小值
      max:200,//最大值
      axisLine:{//轴线
        show:true,
        lineStyle:{color:'#35AA36'} //轴线颜色
      },
      axisLabel:{//刻度带单位
       formatter:'{value}mm',
      }
    }]

8，series，数据

series: [{
		stack:'名字',//柱子堆叠，一根柱子显示多种数据，只要名字一样就可以
		barWidth：‘10px’//柱子宽度
		barGap: 0.1,//间隙
		name:"降水量",
		data:[],//值
		type: 'bar',//类型
		 yAxisIndex: 0,  // 通过这个判断左右轴
}, {
        name:"累计降水",
        data: [],
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        symbolSize: 7,
        areaStyle: {            // 折现下是否填充阴影
			color: {//阴影样式
	          type: 'linear',//类型
	          x: 0,//位置
	          y: 0,
	          x2: 0,
	          y2: 1,
	          colorStops: [{//颜色
	            offset: 1, 
	            color: 'rgba(86,122,210,0.6)'
	          }],
          global: false
        }
	}
}]

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点点关注 点点赞 收藏 ?留言 呐~，谢谢 ~ ~

相关推荐

Java 泛型大揭秘:类型参数、通配符与最佳实践

引言在编程世界中，代码的可重用性和可维护性是至关重要的。为了实现这些目标，Java5引入了一种名为泛型（Generics）的强大功能。本文将详细介绍Java泛型的概念、优势和局限性，以及如何在...

K8s 的标签与选择器:流畅运维的秘诀

在Kubernetes的世界里，**标签（Label）和选择器（Selector）**并不是最炫酷的技术，但却是贯穿整个集群管理与运维流程的核心机制。正是它们让复杂的资源调度、查询、自动化运维变得...

哈希Hash算法:原理、应用（哈希算法 知乎）

原作者：Linux教程，原文地址：「链接」什么是哈希算法？哈希算法（HashAlgorithm），又称为散列算法或杂凑算法，是一种将任意长度的数据输入转换为固定长度输出值的数学函数。其输出结果通常被...

C#学习:基于LLM的简历评估程序（c# 简历）

前言在pocketflow的例子中看到了一个基于LLM的简历评估程序的例子，感觉还挺好玩的，为了练习一下C#，我最近使用C#重写了一个。准备不同的简历：image-20250528183949844查...

55顺位，砍41+14+3!季后赛也成得分王，难道他也是一名球星?

雷霆队最不可思议的新星：一个55号秀的疯狂逆袭！你是不是也觉得NBA最底层的55号秀，就只能当饮水机管理员？今年的55号秀阿龙·威金斯恐怕要打破你的认知了！常规赛阶段，这位二轮秀就像开了窍的天才，直接...

5分钟读懂C#字典对象（c# 字典获取值）

什么是字典对象在C#中，使用Dictionary类来管理由键值对组成的集合，这类集合被称为字典。字典最大的特点就是能够根据键来快速查找集合中的值，其键的定义不能重复，具有唯一性，相当于数组索引值，字典...

c#窗体传值（c# 跨窗体传递数据）

在WinForm编程中我们经常需要进行俩个窗体间的传值。下面我给出了两种方法，来实现传值一、在输入数据的界面中定义一个属性，供接受数据的窗体使用1、子窗体usingSystem;usingSyst...

C#入门篇章—委托（c#委托的理解）

C#委托1.委托的定义和使用委托的作用：如果要把方法作为函数来进行传递的话，就要用到委托。委托是一个类型，这个类型可以赋值一个方法的引用。C#的委托通过delegate关键字来声明。声明委托的...

C#.NET in、out、ref详解（c#.net framework）

简介在C#中，in、ref和out是用于修改方法参数传递方式的关键字，它们决定了参数是按值传递还是按引用传递，以及参数是否必须在传递前初始化。基本语义对比修饰符传递方式可读写性必须初始化调用...

C#广义表（广义表headtail）

在C#中，广义表（GeneralizedList）是一种特殊的数据结构，它是线性表的推广。广义表可以包含单个元素（称为原子），也可以包含另一个广义表（称为子表）。以下是一个简单的C#广义表示例代...

「C#.NET 拾遗补漏」04:你必须知道的反射

阅读本文大概需要3分钟。通常，反射用于动态获取对象的类型、属性和方法等信息。今天带你玩转反射，来汇总一下反射的各种常见操作，捡漏看看有没有你不知道的。获取类型的成员Type类的GetMembe...

C#启动外部程序的问题（c#怎么启动）

IT&OT的深度融合是智能制造的基石。本公众号将聚焦于PLC编程与上位机开发。除理论知识外，也会结合我们团队在开发过程中遇到的具体问题介绍一些项目经验。在使用C#开发上位机时，有时会需要启动外部的一些...

全网最狠C#面试拷问:这20道题没答出来，别说你懂.NET!

在竞争激烈的C#开发岗位求职过程中，面试是必经的一道关卡。而一场高质量的面试，不仅能筛选出真正掌握C#和.NET技术精髓的人才，也能让求职者对自身技术水平有更清晰的认知。今天，就为大家精心准备了20道...

C#匿名方法（c#匿名方法与匿名类）

C#中的匿名方法是一种没有名称只有主体的方法，它提供了一种传递代码块作为委托参数的技术。以下是关于C#匿名方法的一些重要特点和用法：特点省略参数列表：使用匿名方法可省略参数列表，这意味着匿名方法...

C# Windows窗体(.Net Framework)知识总结

Windows窗体可大致分为Form窗体和MDI窗体，Form窗体没什么好细说的，知识点总结都在思维导图里面了，下文将围绕MDI窗体来讲述。MDI（MultipleDocumentInterfac...

一周热门
最近发表
标签列表