echarts-折线图与柱状图，图形的标记，堆叠_echarts柱状图与折线图结合

如果要画一个图标就需要在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",
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

设置填充区域 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",
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

设置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",
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

设置光滑折线图 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",
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

柱状图

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,
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

图形的堆叠

柱状图和折线图可以堆叠。堆叠是将每个点上的数量加到一起作为总和显示在图表上。
目前 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",
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在图形上进行标记

图标上进行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],
              },
            ],
          ],
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

设置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",
      },
    ],
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

特殊的标注 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",
      },
    ],
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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",
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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，标记的点才有内容。
            },
          ],
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

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" }]],
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

 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],
              },
            ],
          ],
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

  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],
              },
            ],
          ],
        },
      },
    ],
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

图标颜色的修改

图标颜色的修改的几种方式：

1. 默认是按主题的颜色顺序的
2. options.color自定义颜色顺序
3. 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,
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在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",
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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",
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

高亮和失焦

高亮

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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

还可以设置高亮状态下的itemStyle和lineStyle等

 {
        name: "d1",
        type: "bar",
        data: d2,
        stack: "all",
        itemStyle: {
          color: "blue",
        },
        emphasis: {
          focus: "series",
          itemStyle: {
            color: "yellow",
          },
        },
      },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

失焦 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",
          },
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

选择交互 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",
          },
        },
      },
    ],
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70