坐标轴
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150],
type: 'line'
}
]
};
1、坐标轴的默认类型type是数值型，而xAxis指定了类目型的data，所以Echarts也能识别出这是类目型的坐标轴，所以这里的type: 'category'可以不写。
2、xAxis代表x轴。type:'category'代表类目轴。适用于离散的类目数据，类目数据可自动从series.data或者xAxis.data设置类目数据。
可以如下，设置每个值得颜色，线条得颜色，单个值得特殊颜色
3、坐标轴轴线xAxis.axisLine.symbol:'arrow'左右有箭头 :['none','arrow']右边是箭头
xAxis: {
type: "value",
axisLine: {
onZero:false, //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，
只有在另一个轴为数值轴且包含 0 刻度时有效。
show: true
},onZero:false,默认true
value类型数值轴，默认不展示轴线 ！
4、刻度 xAxis.axisTick.length 刻度线长度
xAxis.axisTick.alignWithLabel：true 刻度线与标签对齐
5、刻度标签xAxis.axisLabel.formatter:'{value} 米' -给标签值增加单位
强制显示第一个和最后一个刻度：
6、splitLine：true网格线 -数值轴默认显示，类目轴不显示,time轴默认不展示
xAxis: {
splitLine: {
lineStyle: {
show: true,
color: "red",
type: "dashed",
},
},
}
7、series.symbol: 'none' 'emptyCircle' 标记的图形
8、series.showSymbol: true 是否展示标记的图形，好像默认true
9、xAxis.boundaryGap: false 默认true，坐标轴两边留白策略;看着不留白，值跟刻度线对齐了！
10、区域填充样式，如上图；color颜色 ；origin:'end'-填充顶部 origin:200 -从200开始填充
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}
]
10、legend 指上面的图例组件
-不写data，只写legend，貌似会自动生成图形组件（自动生成series里对象的name）
icon:图例；
triangle 
rect
circle(默认)
roundRect
diamond
pin
none
legend: {
textStyle: {
color: "red", //图例文字的颜色和大小
fontSize: 12,
},
icon: "rect", //图例形状
itemGap: 55, //图例间隔
itemWidth: 30, //图例宽度
itemHeight: 30, //图例高度
top: 0,
}11、图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。当图例数量过多，可以设置水平滚动、垂直滚动。
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine', 'Search Eng1ine', 'Search Eng2ine', 'Search Eng3ine', 'Search Eng4ine', 'Search Eng5ine', 'Search Eng6ine', 'Search Eng7ine'],
type: 'scroll', //设置数量过多时的滚动
top: 25,
// orient: 'vertical' //设置垂直
}
12、tooltip 提示框组件
tooltip: {
trigger: 'axis'
}
tooltip.axisPointer.type
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},cross:十字准星指示器
line:直线指示器 -默认得
13、曲线图形上的文本标签 label
series.label.show:true
series: [
{
name: 'Search Engine',
type: 'line',
label: {
show: true,
position: 'top'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]折线图 ：
柱状图：
14、markPoint 曲线图标标注 markLine 图标标线
series: [
{
name: 'Highest',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
],
symbol: 'pin' //默认的
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
}]
15、存在两个Y轴 series.yAxisIndex: 1 使用第2个y轴
16、柱状图 就是将series的type设置成 'bar'
17、数据堆叠 stack:'total'
-只能堆叠value和log类型，不支持time和category类型的类目轴
statck好像可以任意字符串值
series: [
{
name: "正面",
type: "bar",
stack: "total",
data: [1,2,3]
},
{
name: "中性",
type: "bar",
stack: "total",
data: [4,5,6]
},
{
name: "负面",
type: "bar",
stack: "total",
data: [7,8,9]
}
]
18、坐标轴倒转 -将x轴设置成value，y轴设置成category类目轴
xAxis: {
type: "value",
},
yAxis: {
type: "category",
data: ['a','b','c']
},
19、折线图折线得默认粗细颜色，和鼠标放上去得粗细颜色 series.lineStyle
series: [
{
name: 'Spectrum',
type: 'line',
showSymbol: false,
data: datas,
lineStyle: {
//设置线条默认样式
normal: {
width: 1,color:'yellow'
},
//设置线条hover样式
emphasis: { width: 2 ,color: 'red'},
}
},
]
20、time轴得数据模拟，使用 let noe = new Date(), new Date(+now + 1000) //加1秒
let now = new Date('2024-05-10 00:00:00')；
let now = new Date('2024-05-11') --8点开始得
let now = new Date(2024, 5, 11) --0点开始
21、实时动态更新折线
setInterval(function () {
datas.shift();
datas.push(randomData());
myChart.setOption({
series: [
{
data: datas,
},
],
});
}, 1000);22、柱状图背景色 series.showBackground:true
23、tooltips.formatter
有几个series数组，params就有几个值
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}24、transparent 透明色
