如果要画一个图标就需要在series里加一个对象。
data中定义图标的数据。
xAxisIndex、yAxisIndex、polarIndex(radiusAxis,angleAxis等) 用来选择使用哪条坐标轴。
coordinateSystem 用来选择坐标系是什么坐标系，默认是直角坐标系。
id,name用来给图表一个唯一的标识，用于setOption的更新或用id获取图表。
折线图
基本使用
线的端点可以用symbol来设置，可以设置成图片，文字样式用testStyle来设置，线条样式用lineStyl来设置。
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "line",
data: d1,
lineStyle: {
width: 3,
color: "red",
},
symbol: "roundRect", //起点标记的图形,线的连接处的样式
symbolSize: 6,
},
{
name: "d2",
type: "line",
data: d2,
lineStyle: {
color: "blue",
},
},
],
};
设置填充区域 areaStyle
areaStyle
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "line",
data: d1,
lineStyle: {
width: 3,
color: "red",
},
symbol: "roundRect",
symbolSize: 6,
areaStyle: {
color: "blue",
//shadowColor: "rgba(0, 0, 0, 0.5)",
//shadowBlur: 10,
},
},
{
name: "d2",
type: "line",
data: d2,
lineStyle: {
color: "blue",
},
areaStyle: {
color: "red",
},
},
],
};
设置wield阶梯图 step
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "line",
data: d1,
lineStyle: {
width: 3,
color: "red",
},
symbol: "roundRect",
symbolSize: 6,
areaStyle: {
// color: "blue",
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
},
step: true,
//smooth: true,
},
{
name: "d2",
type: "line",
data: d2,
lineStyle: {
color: "blue",
},
areaStyle: {
color: "red",
},
},
],
};
设置光滑折线图 Smooth
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "line",
data: d1,
lineStyle: {
width: 3,
color: "red",
},
symbol: "roundRect",
symbolSize: 6,
areaStyle: {
// color: "blue",
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
},
smooth: true,
},
{
name: "d2",
type: "line",
data: d2,
lineStyle: {
color: "blue",
},
areaStyle: {
color: "red",
},
},
],
};
柱状图
showBackground:是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
柱状图的样式可以通过itemStyle来调整， label可以设置柱状图上的文字。
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 10, 180, 0.2)",
},
itemStyle: {
//图形样式
borderColor: "blue",
color: "red",
},
label: {
show: true,
},
},
],
};
图形的堆叠
柱状图和折线图可以堆叠。堆叠是将每个点上的数量加到一起作为总和显示在图表上。
目前 stack 只支持堆叠于 ‘value’ 和 ‘log’ 类型的类目轴上
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "line",
data: d1,
stack: "all", //堆叠所有的值 'positive' 只堆积正值。 'negative' 只堆叠负值。
},
{
name: "d2",
type: "line",
data: d2,
stack: "all",
},
],
};
在图形上进行标记
图标上进行mark标记
图标的颜色系列调节
图表的激活和失活状态的设置
图表的点击选中调节
markLine 在图表上按要求画一条线
markLine:图表标线。
data：标线的数据数组。每个数组项可以是一个两个值的数组，分别表示线的起点和终点
使用 coord设置起点和终点
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
markLine: {
data: [
[
{
name: "两个坐标之间的标线",
coord: [1, 20],
},
{
coord: [2, 30],
},
],
],
},
},
],
};
设置x,y的坐标也可以
//x,y是相对于 echarts区域的
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
smooth: true,
stack: "all",
markLine: {
data: [
[
{
name: "line1",
// coord: [0, 10],
x: 20,
y: 30,
},
{
// coord: [1, 40],
x: 100,
y: 100,
},
],
],
},
},
{
name: "d2",
type: "line",
data: d2,
stack: "all",
},
],
};
特殊的标注 max, min
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
smooth: true,
stack: "all",
markLine: {
data: [
{
valueIndex: 1,
type: "max",
name: "最大值",
},
{
valueIndex: 0, //用于指定在哪个维度上指定最大值最小值 number
// valueDim: "y", //用于指定在哪个维度上指定最大值最小值 ,string
type: "min",
name: "最小值",
},
],
},
},
{
name: "d2",
type: "line",
data: d2,
stack: "all",
},
],
};
xAxis, yAxis给特定的值标线
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
smooth: true,
stack: "all",
markLine: {
data: [
{
name: "X 轴值为 100 的竖直线",
yAxis: 20,
},
{
name: 'X 轴值为 "2020-01-01" 的竖直线',
xAxis: "星期二",
},
],
},
},
{
name: "d2",
type: "line",
data: d2,
stack: "all",
},
],
};
markPoint 在图表上画一个点
markPoint图表标注
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
smooth: true,
stack: "all",
markLine: {
data: [
{
name: "X 轴值为 100 的竖直线",
yAxis: 20,
},
{
name: 'X 轴值为 "2020-01-01" 的竖直线',
xAxis: "星期二",
},
],
},
markPoint: {
data: [
{ name: "point", type: "max" },
{
name: "p1",
coord: [1, 22],
value: 22, //必须设置value，标记的点才有内容。
},
],
},
},
],
};
markArea 在图表上画一块区域
设置type为max, min ，画出最大值到最小值之间的区域
const d1 = [10, 22, 12, 33, 12, 33, 16];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
markArea: {
data: [[{ type: "min", name: "最大值到最小值" }, { type: "max" }]],
},
},
],
};
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
markArea: {
data: [
[
{ coord: [1, 22], name: "最大值到最小值" },
//{ type: "max" }, 可以混用
{
coord: [3, 10],
},
],
],
},
},
],
};
const d1 = [10, 22, 12, 33, 12, 33, 16];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
markArea: {
data: [
[
{ x: 0, y: 0 },
//{ type: "max" },
{
coord: [3, 10],
},
],
],
},
},
],
};
图标颜色的修改
图标颜色的修改的几种方式：
- 默认是按主题的颜色顺序的
- options.color自定义颜色顺序
- itemStyle,lineStyle设置颜色
这几个优先级从小到大。
配置的其他主题，颜色会按color中的依次分配。
在options中设置color后就会按color中的设置。
let options = {
color: ["red", "yellow", "blue", "#fff"],
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
},
],
};
在itemStyle或者lineStyle中设置了，temStyle或者lineStyle的会生效
let options = {
color: ["red", "yellow", "blue", "#fff"],
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
itemStyle: {
color: "blue",
},
},
],
};
colorBy从调色盘 option.color 中取色的策略
‘data’：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
‘series’：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；
let options = {
color: ["red", "yellow", "blue", "#fff"],
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
colorBy: "data",
},
],
};
高亮和失焦
高亮
emphasis 高亮状态
focus 在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
stack: "all",
itemStyle: {
color: "red",
},
},
{
name: "d1",
type: "bar",
data: d2,
stack: "all",
itemStyle: {
color: "blue",
},
emphasis: {
focus: "series",
},
},
],
};
rednderEcharts(options);
});
还可以设置高亮状态下的itemStyle和lineStyle等
{
name: "d1",
type: "bar",
data: d2,
stack: "all",
itemStyle: {
color: "blue",
},
emphasis: {
focus: "series",
itemStyle: {
color: "yellow",
},
},
},
失焦 blur
既要给d1也要给d2设置，当d1激活时，d2失焦，d2激活时,d1失焦
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
stack: "all",
itemStyle: {
color: "red",
},
emphasis: {
focus: "series",
itemStyle: {
color: "yellow",
},
},
blur: {
itemStyle: {
color: "green",
},
},
},
{
name: "d2",
type: "bar",
data: d2,
stack: "all",
itemStyle: {
color: "blue",
},
emphasis: {
focus: "series",
itemStyle: {
color: "yellow",
},
},
blur: {
itemStyle: {
color: "green",
},
},
},
],
};
选择交互 select
可以设置selectedMode，符串取值可选’single’，‘multiple’，‘series’
const d1 = [10, 22, 12, 33, 12, 33, 16];
const d2 = [5, 12, 10, 23, 11, 13, 10];
let options = {
xAxis: {
type: "category",
data: [
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
"星期日",
],
},
axisPointer: {
type: "line", //十字准星指示器
show: true,
},
yAxis: {},
series: [
{
name: "d1",
type: "bar",
data: d1,
stack: "all",
itemStyle: {
color: "red",
},
emphasis: {
focus: "series",
itemStyle: {
color: "yellow",
},
},
blur: {
itemStyle: {
color: "green",
},
},
selectedMode: "single",
select: {
itemStyle: {
borderWidth: 3,
borderColor: "green",
},
},
},
{
name: "d2",
type: "bar",
data: d2,
stack: "all",
itemStyle: {
color: "blue",
},
emphasis: {
focus: "series",
itemStyle: {
color: "yellow",
},
},
blur: {
itemStyle: {
color: "green",
},
},
},
],
};
1618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
