# Echarts
## Echarts基础
> 入门Demo
效果
代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Echarts入门demo</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.js"></script>
</head>
<body>
<div id="container" style="width:600px;height: 400px;"></div>
</body>
<script>
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('container'))
// 指定图表的配置项和数据
const option = {
title: {
text: 'ECharts 入门示例-数学成绩统计'
},
xAxis: {
type: 'category', // 类目轴
data: ['小明', '小红', '小黄']
},
yAxis: {
type: 'value' // 数值轴
},
series: [
{
name: '数学成绩',
type: 'bar', // 图表类型
data: [80, 65, 90]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>
</html>
```
> 配置项【重要】
配置项参考：https://echarts.apache.org/zh/option.html
常用配置项解析
- title：标题
文字样式 ：textStyle
标题边框：borderWidth、borderColor、borderRadius
标题位置：left、top、right、bottom
- dataZoom：区域缩放，它的值是一个数组，支持多段缩放
type：slider（滑块）、inside（鼠标滚轮或双指缩放）
xAxisIndex：0 哪个x轴起作用
yAxisIndex：0 哪个y轴起作用
start：缩放开始位置
end：缩放结束位置
- grid: 网格，是x轴和y轴的依附，控制图表大小和位置
是否显示：show
边框宽度：borderWidth
边框颜色
边框位置
- axis：坐标
xAxis：x坐标
yAxis：y坐标
- tooltip：提示框组件，用于配置鼠标滑过或点击图标时的显示框
触发类型：trigger（item、axis）
触发时机：triggerOn（mousemove、click）
格式化：formatter（字符串模板、回调函数）
- toolbox：ECharts提供的工具栏
导出图片：feature.saveAsImage
数据视图：feature.dataView
动态类型切换：feature.magicType.type
数据区域缩放：feature.dataZoom
重置：feature.restore
- legend：图例，用于筛选系列，需要和series配合使用
data：是一个数组，它的值需要和series数组中的某组数据的name值一致
- xAxis：直角坐标系中的x轴
- yAxis：直角坐标系中的y轴
- series：系列列表。每个系列通过type决定自己的图表类型
> 柱状图
效果
代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Echarts入门demo</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.js"></script>
</head>
<body>
<div id="container" style="width:600px;height: 400px;"></div>
</body>
<script>
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('container'))
// 指定图表的配置项和数据
const option = {
// 标题
title: {
text: 'ECharts 入门示例-数学成绩统计'
},
legend: {
data: ['数学成绩', '语文成绩'],
bottom: 0
},
// 提示
tooltip: {
// trigger: 'item'
trigger: 'axis',
// formatter: '{b} 的成绩是 {c}'
formatter: arg => {
return arg[0].name + ' 的分数是: ' + arg[0].data
}
},
// 工具
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, //数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
// 动态类型切换
type: ['bar', 'line']
}
}
},
xAxis: {
type: 'category', // 类目轴
data: ['小明', '小红', '小黄']
},
yAxis: {
type: 'value' // 数值轴
},
series: [
{
name: '数学成绩',
type: 'bar', // 图表类型
// 最大最小值
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
// 平均值
markLine: {
data: [
{
type: 'average',
name: '平均值'
}
]
},
// 是否显示内容
label: {
show: true,
rotate: 60, // 旋转60度
position: 'inside' // 位置
},
// barWidth: '30%',
data: [80, 65, 90]
},
{
name: '语文成绩',
type: 'bar',
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
// 平均值
markLine: {
data: [
{
type: 'average',
name: '平均值'
}
]
},
// 是否显示内容
label: {
show: true,
rotate: 60, // 旋转60度
position: 'inside' // 位置
},
data: [90, 80, 95]
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>
</html>
```
常见属性
- 标记：最大值、最小值、平均值
markPoint
markLine
- 显示：数值显示、柱宽度、横向柱状图
label
barWidth
更改x轴和y轴的角色
> 折线图
效果
代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>折线图</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.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 折线图示例'
},
tooltip: {},
legend: {
data: ['销量', '库存']
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
boundaryGap: false
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: '销量',
type: 'line',
// data: [5, 20, 36, 10, 10, 20]
data: [15, 18, 17, 16, 18, 17],
stack: 'all',
areaStyle: {}
},
{
name: '库存',
type: 'line',
// data: [5, 20, 36, 10, 10, 20]
data: [19, 16, 18, 15, 17, 18],
stack: 'all',
areaStyle: {}
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>
</body>
</html>
```
常见属性
- 标记：最大值（markPoint）、最小值（markPoint）、平均值（markLine）、标注区间（markArea）
- 线条控制：平滑（smooth） 风格（lineStyle）
基于Vue全家桶+ECharts+Koa2+WebSocket搭建的可视化电商平台实时监控系统源码.zip （144个子文件） 
.browserslistrc 30B demo.css 8KB iconfont.css 3KB .env.development 79B .editorconfig 121B iconfont.eot 3KB .gitignore 2KB .gitignore 231B
demo_index.html 15KB map3.html 4KB theme.html 3KB map2.html 3KB palette2.html 3KB index.html 3KB scatter.html 2KB radar.html 2KB gauge.html 2KB palette.html 2KB animation.html 2KB pie.html 2KB line.html 2KB map1.html 1KB map.html 1KB index.html 860B favicon.ico 4KB echarts.min.js 734KB chalk.js 14KB vintage.js 14KB itcast.js 14KB iconfont.js 13KB socket_service.js 2KB index.js 1KB websocket_service.js 1KB map_utils.js 905B theme_utils.js 783B map.js 644B main.js 501B koa_response_data.js 485B app.js 483B index.js 407B koa_response_header.js 386B .eslintrc.js 344B file_utils.js 245B koa_response_duration.js 228B hot.js 156B request.js 126B seller.js 121B trend.js 119B stock.js 119B rank.js 117B babel.config.js 73B vue.config.js 40B china-cities.json 1.15MB world.json 987KB package-lock.json 491KB xinjiang.json 84KB sichuan.json 82KB heilongjiang.json 77KB guangdong.json 70KB yunnan.json 61KB china.json 60KB neimenggu.json 56KB zhejiang.json 50KB shandong.json 49KB liaoning.json 49KB chongqing.json 46KB gansu.json 46KB guangxi.json 46KB hunan.json 44KB xizang.json 44KB qinghai.json 43KB fujian.json 42KB jilin.json 40KB hebei.json 38KB hubei.json 38KB henan.json 35KB guizhou.json 31KB jiangxi.json 31KB shanxi1.json 30KB anhui.json 30KB hainan.json 28KB jiangsu.json 23KB shanxi.json 22KB beijing.json 21KB ningxia.json 12KB shanghai.json 12KB xianggang.json 12KB package-lock.json 12KB tianjin.json 10KB china-contour.json 9KB taiwan.json 8KB hotproduct.json 6KB trend.json 3KB aomen.json 2KB iconfont.json 2KB package.json 971B map.json 913B rank.json 880B stock.json 704B seller.json 670B共 144 条
- 1
- 2
资源评论
onnx
- 粉丝: 1w+
最新资源
- 信息化时代声乐教学模式及教学技巧研究(1).docx
- 企业信息化规划与管理(1).pptx
- 人工智能算法在图像处理中的应用(1).docx
- 电子及通信设备制造企业R&D国际化评估(1).docx
- 基于PLC控制的翻转装配机器人的设计与研究(1).docx
- 软件使用许可协议书(范本)(1).doc
- 解读小学数学教学中如何有效开展深度学习(1).docx
- Vision-Training-3D-eXam-i-2015(1).ppt
- Excel-wps中熵值法、熵权法、指标赋权、权重计算。【精品文档】(1).pdf
- 开题报告基于.Net的网上购物平台(2)(1).doc
- 浅谈基于深度学习的小学数学有效教学策略(1).docx
- 电力信息通信传输中OTN技术的应用研究(1).docx
- 电梯制造企业信息化解决方案.pptx
- 【计算机软件毕业设计】连连看小游戏设计(1).doc
- 计算机在材料科学与工程中的应用省名师优质课赛课获奖课件市赛课百校联赛优质课一等奖课件(1).pptx
- 基于单片机的分段电容式液位测量的研究毕业设计(论文)(2)(1).doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
