当前位置： 首页 > article >正文

04 ECharts基础入门

article 2024/11/13 11:56:56

文章目录

  • 一、ECharts介绍
    • 1. 简介
    • 2. 相关网站
    • 3. HTML引入方式
    • 4. 基本概念
  • 二、常见图表
    • 1. 柱状图
    • 2. 折线图
    • 3. 饼图
    • 4. 雷达图
    • 5. 地图
  • 三、应用
    • 1. 动画
    • 2. 交互

一、ECharts介绍

1. 简介

ECharts是一个使用JavaScript实现的开源可视化库，用于生成各种图表和图形。
ECharts提供了折线图、柱状图、散点图、饼图、地图、时间序列等，以及各种交互功能和数据可视化效果。

ECharts的主要特点包括：

  1. 高度定制化：用户可以根据自己的需求自定义图表的各种属性和样式，包括颜色、字体、交互等。
  2. 跨平台：ECharts可以在各种浏览器和设备上运行，包括桌面浏览器、移动设备和嵌入式浏览器。
  3. 丰富的图表类型和组件：ECharts提供了大量的图表类型和组件，可以满足各种数据可视化的需求。
  4. 高度兼容性：ECharts支持多种数据格式和数据源，可以与各种数据库和数据服务进行集成。
  5. 易于使用：ECharts提供了简单易用的API和文档，用户可以快速上手并创建各种图表。

2. 相关网站

ECharts 官网
ECharts CDN

3. HTML引入方式

  • 本地引入
<script src="echarts-5.4.3.min.js"></script>
  • CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js "></script>

4. 基本概念

echart = echarts.init(document.getElementById("container"));	// 初始化类
option = {														// 配置类
	title: {													// 标题
		text: 'Website',
		left: 'center'
	},
	tooltip: {													// 提示框
		trigger: 'item'
	},
	legend: {													// 配置图例的显示和位置
		orient: 'vertical',
		left: 'left'
	},
	xAxis: {													// 配置X轴（直角坐标才会有）
		type: 'category',
		data: []
	},
	yAxis: {													// 配置Y轴（直角坐标才会有）
		type: 'value'
	},
	series: [													// 配置图表的数据和绘制方式
	{
		type: '',												// 图表类别，如折线图（line）
		data: [													// 图表数据，可以是数组或对象数组
		]
	}]
};
echart.setOption(option);										// 渲染图形

二、常见图表

1. 柱状图

柱状图官方示例

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test</title>
    <link rel="icon" href="data:;base64,=">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
	<div id="container" style="width: 600px; height: 500px;"></div>
</body>
<script>
	echart = echarts.init(document.getElementById("container"));
	option = {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
		{
			data: [120, 200, 150, 80, 70, 110, 130],
			type: 'bar'
		}]
	};
	echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

2. 折线图

折线图官方示例

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test</title>
    <link rel="icon" href="data:;base64,=">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
	<div id="container" style="width: 600px; height: 500px;"></div>
</body>
<script>
	echart = echarts.init(document.getElementById("container"));
	option = {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
		{
			data: [50, 130, 160, 170, 120, 110, 170],
			type: 'line'
		}]
	};
	echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

3. 饼图

饼图官方示例

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test</title>
    <link rel="icon" href="data:;base64,=">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
	<div id="container" style="width: 600px; height: 500px;"></div>
</body>
<script>
	echart = echarts.init(document.getElementById("container"));
	option = {
		title: {
			text: 'Website',
			left: 'center'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		series: [
		{
			name: 'Access From',
			type: 'pie',
			radius: '50%',
			data: [
				{ value: 1048, name: 'Search Engine' },
				{ value: 735, name: 'Direct' },
				{ value: 580, name: 'Email' },
				{ value: 484, name: 'Union Ads' },
				{ value: 300, name: 'Video Ads' }
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};
	echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

4. 雷达图

雷达图官方示例

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test</title>
    <link rel="icon" href="data:;base64,=">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
	<div id="container" style="width: 600px; height: 500px;"></div>
</body>
<script>
	echart = echarts.init(document.getElementById("container"));
	option = {
		title: {
			text: 'Radar Chart'
		},
		legend: {
			data: ['Allocated Budget', 'Actual Spending']
		},
		radar: {
			indicator: [
				{ name: 'Sales', max: 6500 },
				{ name: 'Administration', max: 16000 },
				{ name: 'Technology', max: 30000 },
				{ name: 'Customer', max: 38000 },
				{ name: 'Development', max: 52000 },
				{ name: 'Marketing', max: 25000 }
			]
		},
		series: [
		{
			name: 'Budget vs spending',
			type: 'radar',
			data: [
				{
					value: [4200, 3000, 20000, 35000, 50000, 18000],
					name: 'Allocated Budget'
				},
				{
					value: [5000, 14000, 28000, 26000, 42000, 21000],
					name: 'Actual Spending'
				}
			]
		}]
	};
	echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

5. 地图

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test</title>
    <link rel="icon" href="data:;base64,=">
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
</head>
<body>
    <div id="container" style="width: 800px; height: 600px;"></div>
    <script>
        data_list = [
        	{name:'黑龙江',value:-2},		{name:'吉林',value:0},			{name:'辽宁',value:5},
			{name:'北京',value:10},			{name:'天津',value:11},			{name:'山东',value:10},
			{name:'河北',value:9},			{name:'河南',value:7},			{name:'湖北',value:12},
			{name:'湖南',value:11},			{name:'江苏',value:12},			{name:'安徽',value:12},
			{name:'上海',value:12},			{name:'浙江',value:11},			{name:'福建',value:13},
			{name:'广东',value:17},			{name:'四川',value:11},			{name:'重庆',value:11},
			{name:'江西',value:10},			{name:'陕西',value:10},			{name:'贵州',value:10},
			{name:'广西',value:10},			{name:'山西',value:10},			{name:'云南',value:17},
			{name:'甘肃',value:0},			{name:'内蒙古',value:0},			{name:'海南',value:21},
			{name:'新疆',value:0},			{name:'宁夏',value:0},			{name:'青海',value:-1},
			{name:'西藏',value:0},			{name:'香港',value:17},			{name:'澳门',value:17},
			{name:'台湾',value:12},
        ]
        data_value_list = [-2,0,5,10,11,10,9,7,12,11,12,12,12,11,13,17,11,11,10,10,10,10,10,17,0,0,21,0,0,-1,0,17,17,12]
        option = {
            title: {
                text: '全国省市温度',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '省市：{b}<br/>温度：{c}'
            },
            dataRange: {
                min: 0,
                max: Math.max.apply(null, data_value_list),
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],
                calculable: true,
                color: ['orangered', 'yellow', 'lightskyblue']
            },
            series: [
                {
                    name: '数据',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: data_list
                }
            ]
        };
        echart = echarts.init(document.getElementById('container'));
        echart.setOption(option);
    </script>
</body>
</html>
  • HTML页面效果
    在这里插入图片描述

三、应用

1. 动画

  • 动画延迟开始
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test</title>
    <link rel="icon" href="data:;base64,=">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
	<div id="container" style="width: 600px; height: 500px;"></div></body>
<script>
	echart = echarts.init(document.getElementById("container"));
	var xAxisData = [];
	var data1 = [];
	var data2 = [];
	for (var i = 0; i < 100; i++) {
		xAxisData.push('A' + i);
		data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
		data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
	}
	option = {
		legend: {
			data: ['bar1', 'bar2']
		},
		xAxis: {
			data: xAxisData,
			splitLine: {
				show: false
			}
		},
		yAxis: {},
		series: [
		{
			name: 'bar1',
			type: 'bar',
			data: data1,
			emphasis: {
				focus: 'series'
			},
			animationDelay: function(idx) {
				return idx * 10;
			}
		},
		{
			name: 'bar2',
			type: 'bar',
			data: data2,
			emphasis: {
				focus: 'series'
			},
			animationDelay: function(idx) {
				return idx * 10 + 100;
			}
		}],
		animationEasing: 'elasticOut',
		animationDelayUpdate: function(idx) {
			return idx * 5;
		}
	};
	echart.setOption(option);
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

2. 交互

  • 用鼠标可以拖拽曲线的点，从而改变曲线的形状
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Test</title>
    <link rel="icon" href="data:;base64,=">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
	<div id="container" style="width: 600px; height: 500px;"></div></body>
</body>
<script>
	var symbolSize = 20;
	var data = [
	  [15, 0],
	  [-50, 10],
	  [-56.5, 20],
	  [-46.5, 30],
	  [-22.1, 40]
	];
	var myChart = echarts.init(document.getElementById('container'));
	myChart.setOption({
	  tooltip: {
		triggerOn: 'none',
		formatter: function(params) {
		  return (
			'X: ' +
			params.data[0].toFixed(2) +
			'<br />Y: ' +
			params.data[1].toFixed(2)
		  );
		}
	  },
	  xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },
	  yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },
	  series: [
		{ id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }
	  ]
	});
	myChart.setOption({
	  graphic: echarts.util.map(data, function(item, dataIndex) {
		return {
		  type: 'circle',
		  position: myChart.convertToPixel('grid', item),
		  shape: { r: symbolSize / 2 },
		  invisible: true,
		  draggable: true,
		  ondrag: echarts.util.curry(onPointDragging, dataIndex),
		  onmousemove: echarts.util.curry(showTooltip, dataIndex),
		  onmouseout: echarts.util.curry(hideTooltip, dataIndex),
		  z: 100
		};
	  })
	});
	window.addEventListener('resize', function() {
	  myChart.setOption({
		graphic: echarts.util.map(data, function(item, dataIndex) {
		  return { position: myChart.convertToPixel('grid', item) };
		})
	  });
	});
	function showTooltip(dataIndex) {
	  myChart.dispatchAction({
		type: 'showTip',
		seriesIndex: 0,
		dataIndex: dataIndex
	  });
	}
	function hideTooltip(dataIndex) {
	  myChart.dispatchAction({ type: 'hideTip' });
	}
	function onPointDragging(dataIndex, dx, dy) {
	  data[dataIndex] = myChart.convertFromPixel('grid', this.position);
	  myChart.setOption({
		series: [
		  {
			id: 'a',
			data: data
		  }
		]
	  });
	}
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

http://www.kler.cn/a/160971.html

相关文章：

  • 使用 Vue 配合豆包MarsCode 实现“小恐龙酷跑“小游戏
  • 力扣.15 三数之和 three-sum
  • Linux——gcc编译过程详解与ACM时间和进度条的制作
  • 力扣 LeetCode 977. 有序数组的平方（Day1：数组）
  • 当AI遇上时尚：未来的衣橱会由机器人来打理吗？
  • 图像处理自动渲染代码
  • MySQL和MongoDB简介以及它们之间的区别
  • ThinkPHP6使用Validate验证表单字段唯一
  • 【每日一题】重新规划路线
  • 【C++初阶】六、类和对象（初始化列表、static成员、友元、内部类）
  • 脉冲压缩及MATLAB仿真
  • 数组常用方法
  • 剧本杀小程序搭建：打造线上剧本杀新体验
  • HTML 块级元素与行内元素有哪些以及注意、总结
  • EasyExcel如何读取全部Sheet页数据方法
  • leetcode刷题：611.有效三角形的个数（双指针实现）
  • C++中单引号‘‘和双引号““的区别
  • Linux内核上游提交完整流程及示例
  • 多人聊天室
  • Python实现广义线性回归模型(statsmodels GLM算法)项目实战
  • Oracle 查询语句限制只选择最前面几行，和最后面几行的实现方式。
  • GAN：WGAN前作
  • 【玩转TableAgent 数据智能分析】-- 数据分析不再是专业人士的专利
  • 如何使用Net2FTP轻松部署本地Web文件管理器并远程访问管理内网资源？
  • [⑦ADRV902x]: JESD204学习笔记
  • 【Spark基础】-- 宽窄依赖