echarts入门和基本知识点
程序员文章站
2022-06-28 13:22:32
@ echarts的入门和使用echarts文档echarts使用步骤（1）通过标签方式直接引入构建好的echarts文件
@ echarts的入门和使用
echarts使用步骤
（1）通过标签方式直接引入构建好的echarts文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
（2）在绘图前准备一个具备高宽的DOM容器（注意：一定要有宽高，否则图表不显示）
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
(3)通过echarts.init方法初始化一个echarts实例，并通过setOption方法生成一个简单的柱状图
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
option对象
(1)
- title–>标题
- text：标题内容
- link：超文本链接
title:{
text:'折线图',
textStyle:{
color:'#AAA'
}
// link:'HTTPS://www.baidu.com'
},
subtext:{//副标题
text:'nihao'
},
(2)xAxis --代表x轴
xAxis: {//x 轴
name:'星期',
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
(3)yAxis–代表y轴
yAxis: {
type: 'value'
},
(4) series–系列（注意：series中的data和x轴的data的数组长度必须保持一致）
一般存放图表的数据
series: [{//
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'//类型
}]
其中：
type有
1.line：折现
2.bar：柱状
3.pie:饼状图
4.series-scatter：散点（气泡）图
。。。可以查配置文档
[echarts配置文档](https://echarts.apache.org/zh/option.html#series-scatter)
----------------------------------------------------------------
（5）name属性：是图例的意思
series: [{//
name:'BBB',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'//类型
},
{ name:'AAA',
data: [856, 972, 911, 934, 1290, 1330, 1320],
type:'bar'
}
]
(6) legend:图例组件
legend:{
data:['BBB','AAA'],
type:'scroll'
},
(7)icon是设置图例样式的
legend:{
data:[{
name:'AAA',
icon:'circle'
},{
name:'BBB',
icon:'circle'
}],
折线图
legend和series集合对象中的name要一致，否则不会显示的
（1）默认legend中没有data，那么默认按照series集合对象中顺序生成图例（legend）
（2）如果legend指定data，默认返回legend中data的顺序
数据格式
xAxis：[" "," "," ", ]
xAxis：[" "," "," ", ]
注意：x轴和y轴数据个数需要对应
案例
（1）代码部分
option = {
legend:{
data:[{
name:'AAA',
icon:'circle'
},{
name:'BBB',
icon:'circle'
}],
type:'scroll'
},
title:{
text:'折线图',
textStyle:{
color:'#AAA'
}
// link:'HTTPS://www.baidu.com'
},
subtext:{//副标题
text:'nihao'
},
xAxis: {//x 轴
name:'星期',
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{//
name:'BBB',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'//类型
},
{ name:'AAA',
data: [856, 972, 911, 994, 1270, 1330, 1560],
type:'line'
}
]
};
(2)运行的结果图
(8)toolbox:工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
option = {
toolbox:{
show:true,
feature:{
mark:{
show:true
},
dataView:{show:true,readOnly:true},
magicType:{
show:true,
type:['line','bar'],//数据类型
option:{
funnel:{
x:'25%',
width:'50%',
funnelAlign:'center',
max:1548
}
}
},
restore:{show:true},//还原的方法
saveAsImage:{show:true}
}
},
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',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
运行结果：
（9）grid：网格
（10）color：调色板，和series中数据列的值会在前一个系列的值上相加。
（11）tooltip:提示框组件，
可以设置在全局，即 tooltip
可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
可以设置在系列中，即 series.tooltip
可以设置在系列的每个数据项中，即 series.data.tooltip
本文地址：https://blog.csdn.net/m0_47298981/article/details/107536952
上一篇： 全面探究 Java 内部类