echarts图表的使用(常用属性)

devtools/2024/11/8 1:50:40/

通用属性

title

图表的标题,可设置标题文本、位置、样式等。例如:

{"title": {"text": "示例图表","left": "center","textStyle": {"fontSize": 18,"fontWeight": "bold"}}
}

tooltip

鼠标悬停在图表元素上时显示的提示框内容及样式设置。可以配置提示框显示的格式、触发方式等,比如:

{"tooltip": {"trigger": "item","formatter": "{a} <br/>{b}: {c}"}
}

legend

图例,用于标识不同系列的数据。可设置图例的位置、排列方式、样式等,如下:

{"legend": {"orient": "vertical","left": "left","data": ["系列1", "系列2"]}
}

坐标轴相关属性

xAxis 和 yAxis

分别用于设置 x 轴和 y 轴的属性。常见的设置包括坐标轴类型(如数值轴、类目轴等)、坐标轴名称、刻度设置等。
例如,对于 x 轴设置为类目轴:

{"xAxis": {"type": "category","data": ["苹果", "香蕉", "橙子"],"name": "水果种类","axisTick": {"show": false}}"yAxis": {"type": "value","name": "销量","axisLabel": {"formatter": "{value} kg"}}
}
}

系列(series)属性

type

指定图表的类型,如柱状图('bar')、折线图('line')、饼图('pie')等。不同类型的图表有其特定的配置选项。
例如,绘制柱状图:

{"series": [{"type": "bar","name": "水果销量","data": [10, 20, 15]}]
}

data

{"series": [{"type": "pie","name": "水果占比","data": [{"name": "苹果","value": 30},{"name": "香蕉","value": 50},{"name": "橙子","value": 20}]}]
}

 图表样式属性

color

用于设置图表的颜色主题或单个系列的颜色。可以是一个颜色数组,按照系列顺序依次应用颜色,也可以针对特定系列设置颜色,如下:

{"color": ["#3398DB", "#66CCFF", "#99FF99"],"series": [{"type": "line","name": "系列1","data": [1, 2, 3],"lineStyle": {"color": "#FF0000"}}]
}

backgroundColor

设置图表的背景颜色

其他练习实例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script>
</head>
<style>#main{margin: 20px;width: 30%;height: 40vh;min-height: 100px;min-width: 150px;}#two{margin: 10px; width: 30%;height: 40vh;min-height: 100px;min-width: 150px;}body{background-color: rgb(10, 95, 193);}
</style>
<body><div id="main"></div><script>// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {//对标题进行设置title: {//标题text: '农作物病害发生防止面积',//标题样式textStyle:{//颜色color:'#fff'//字体大小//font-size}//副标题//subtext: 'Fake Data'},//提示框组件tooltip: {trigger: 'axis',axisPointer:{type:"shadow"},backgroundColor:'rgb(0,0,0,0.8)',borderColor:'rgb(0,120,212,0.5)',textStyle:{color:'#fff'}},//图例组件legend: {data: ['发生面积', '防止面积'],//位置right:'3%',//布局朝向orient:'vertical',//纵向//样式textStyle:{//颜色color:'#fff'//字体大小//font-size}},//工具/*toolbox: {show: true,feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},*/calculable: true,xAxis: [{type: 'category',// prettier-ignoredata: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],//坐标轴轴线axisLine:{//坐标轴样式lineStyle:{color:'#fff',}}}],yAxis: [{//坐标轴名称name:'面积(亿亩)',type: 'value',axisLine:{//显示纵轴show:'show',//坐标轴样式lineStyle:{color:'#fff',}},//去掉背景分割横线splitLine:{show:false}}],series: [{name: '发生面积',type: 'bar',//柱状图data: [24,51,59,62,51,45,28],/*markPoint: {data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]},markLine: {data: [{ type: 'average', name: 'Avg' }]}*/},{name: '防止面积',type: 'bar',data:[21,50,55,59,48,41,25],/*markPoint: {data: [{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }]},markLine: {data: [{ type: 'average', name: 'Avg' }]}*/}],//柱状图颜色//color:['','']//位置grid:{left:'5%',right:'5%',bottom:'2%',//是否包含坐标轴containLabel:true}
};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//图标调整尺寸window.onresize = function(){myChar.resize()}</script>
<!-- 第二个图表 -->
<div id="two"></div>
<script>var myChart2 = echarts.init(document.getElementById('two'));var option2 = {title: {//标题text: '病虫害致粮食损失统计',//标题样式textStyle:{//颜色color:'#fff'//字体大小//font-size}//副标题//subtext: 'Fake Data'},xAxis: {type: 'category',boundaryGap: true,data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],axisLine:{//显示纵轴show:'show',//坐标轴样式lineStyle:{color:'#fff',}},},yAxis: {name:'损失(万吨)',type: 'value',axisLine:{//显示纵轴show:'show',//坐标轴样式lineStyle:{color:'#fff',}},//去掉背景分割横线splitLine:{show:false}},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',color:'#5B89FE',areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, // 渐变方向,从左上角到右下角[{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 起始颜色(红色,透明度为0.5){ offset: 1, color: 'rgba(128, 128, 128, 0.2)' }  // 结束颜色(蓝色,透明度为0.5)])}}]};myChart2.setOption(option2);window.addEventListener('resize', function() {myChart2.resize();});
</script>
</body>
</html>


http://www.ppmy.cn/devtools/132178.html

相关文章

Centos7.6离线安装软件

在离线情况下&#xff0c;安装Centos软件&#xff0c;有几个方法 1、直接下载离线软件包 如果能直接下载离线软件包&#xff0c;是最省事的方法&#xff0c;可以直接baidu查找试试&#xff0c;或到下面这个网址试试&#xff1a; Packages for Linux and Unix - pkgs.org Ubun…

深入理解 Linux du 命令:用法详解与使用示例

深入理解 Linux df 命令&#xff1a;用法详解与使用示例   du 命令是一个非常常用的工具&#xff0c;它用于统计文件和目录的磁盘使用情况。作为 GNU Coreutils 的一部分&#xff0c;du 具备强大的功能&#xff0c;可以递归地计算每个文件或目录的大小&#xff0c;并以各种格…

html语法

网站是指在因特网上根据一定规则&#xff0c;使用html等制作的用于展示特定内容相关的网页集合 网站由很多网页组成&#xff0c;网页是构成网站的基本元素&#xff0c;通常由图片、连接、视频、声音、文字等元素组成&#xff0c;一般用.htm和.html做后缀&#xff0c;又被称为h…

ONLYOFFICE 8.2版本评测:超好用办公工具

前言 在技术的快速发展和工作方式的持续演进下&#xff0c;现代办公软件正变得越来越强大和多样化。ONLYOFFICE&#xff0c;作为市场上备受瞩目的一体化办公解决方案&#xff0c;以其全面的文档编辑、表格处理和演示制作功能&#xff0c;满足了用户在不同办公场景下的需求。最…

C语言必做30道练习题

C语言练习30题&#xff08;分支循环&#xff0c;数组&#xff0c;函数&#xff0c;递归&#xff0c;操作符&#xff09; 目录 分支循环1.闰年的判断2.阅读代码&#xff0c;计算代码输出的结果3.输入一个1~7的数字&#xff0c;打印对应的星期几4.输入任意一个整数值&#xff0c;…

使用PyQt5设计一个简易计算器

目录 设计UI图 代码 结果展示 设计UI图 代码 from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import QFileDialog, QMainWindow, QMessageBox from untitled import Ui_MainWindow import sysclass…

tauri开发中如果取消了默认的菜单项,复制黏贴撤销等功能也就没有了,解决办法

取消默认的菜单项&#xff1a;清除tauri默认的菜单项&#xff0c;让顶部的菜单menu不显示-CSDN博客 就是通过配置空菜单&#xff0c;让菜单不显示&#xff0c;但是这个引发的问题就是复制黏贴撤销等功能也就没有了&#xff0c;解决办法&#xff1a; 新增加编辑下的子菜单&…

基于MySQL的企业专利数据高效查询与统计实现

背景 在进行产业链/产业评估工作时&#xff0c;我们需要对企业的专利进行评估&#xff0c;其中一个重要指标是统计企业每一年的专利数量。本文基于MySQL数据库&#xff0c;通过公司名称查询该公司每年的专利数&#xff0c;实现了高效的专利数据统计。 流程 项目流程概述如下&…