echarts-demo
1.数据可视化
数据可视化主要目的：借助于图形化手段，清洗有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。
2.Echarts
（1）引入echarts.js
（2）准备一个呈现图表的盒子（要有宽高）
（3）初始化echarts实例对象
（4）准备配置项
（5）将配置项设置给echarts实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--步骤1：引入 ECharts 文件 -->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 步骤3：基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var xDataArr = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月"]
var yDataArr = [88, 92, 63, 90, 77, 94, 80, 72, 86]
// 步骤4：指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
type:'category',
data: xDataArr
},
yAxis: {
type: 'value' // 数值轴（会自动查找series中的data）
},
series: [{
name: '销量',
type: 'bar', // bar柱状图，line折线图
data: yDataArr
}]
};
// 步骤5：将配置项设置给echarts实例对象
myChart.setOption(option);
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现