echarts.js使用指南

发表于 更新于 分类于

具体配置参考 echartsJs 官网

图表

折线图

折线图配置如下：
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
option = {
  title: {
    text: "折线图--text",
    subtext: "折线图标题--subtext",
    x: "center",
    y: "top",
    textAlign: "left"
  },
  grid: {
    show: true,
    left: 40,
    top: 80,
    right: 10
  },
  legend: {
    icon: "rect",
    itemWidth: 18,
    itemHeight: 10,
    bottom: 10,
    data: ["line"],
    textStyle: {
      color: "#999999",
      fontSize: 10
    }
  },
  tooltip: {
    className: "chart-tooltip",
    trigger: "axis",
    confine: true
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    minorSplitLine: {
      show: true
    }
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "line",
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
      symbol: "circle",
      symbolSize: 3,
      lineStyle: {
        color: "skyblue"
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "skyblue" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#fff" // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      }
    }
  ],
  dataZoom: [
    {
      type: "inside", // slider 表示有滑动块的，inside 表示内置的
      show: true,
      xAxisIndex: [0],
      minValueSpan: 4,
      maxValueSpan: 4,
      startValue: 1,
      // end,
      // zoomOnMouseWheel: false,
      backgroundColor: "rgba(0,0,0,0.5)", // 滑块背景颜色
      fillerColor: "rgba(255,255,0,0.5)", // 填充颜色
      showDetail: false // 拖拽时，是否显示详细信息
    }
  ]
};

渐变折线图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// options: { series: [{ type: "line", areaStyle: {} }] }
areaStyle: {
  color: {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "skyblue" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#fff" // 100% 处的颜色
      }
    ],
    global: false // 缺省为 false
  }
};

线的颜色

1
2
3
lineStyle: {
  color: "skyblue";
}

标记

1
2
3
4
5
6
7
8
9
10
symbol: "circle", // 标记的图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
symbolSize: 3, // 标记的大小，可以设置成诸如 10 这样单一的数字
itemStyle: {
  normal: {
    color: "#2ec7c9", // 标记的颜色
    lineStyle: {
      color: "#2ec7c9" // 线的颜色
    }
  }
}

柱状图

饼图

饼图配置如下：
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
option = {
  title: {
    text: "某站点用户访问来源",
    subtext: "纯属虚构",
    left: "center"
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    left: "left"
  },
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
        { value: 580, name: "邮件营销" },
        { value: 484, name: "联盟广告" },
        { value: 300, name: "视频广告" }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
};
环形图配置如下：
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
option = {
  tooltip: {
    trigger: "item"
  },
  legend: {
    top: "5%",
    left: "center"
  },
  series: [
    {
      name: "访问来源",
      type: "pie",
      radius: ["40%", "70%"], // 环形图配置
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center"
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "40",
          fontWeight: "bold"
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
        { value: 580, name: "邮件营销" },
        { value: 484, name: "联盟广告" },
        { value: 300, name: "视频广告" }
      ]
    }
  ]
};

环形大小

1
2
// options: { series: [ radius: ["内环", "外环"] ] }
radius: ["40%", "70%"], // 环形图配置

标题

1
2
3
4
5
6
7
title: {
  text: "折线图--text",
  subtext: "折线图标题--subtext",
  x: "center",
  y: "top",
  textAlign: "left"
}

图例

1
2
3
4
5
6
7
8
9
10
11
legend: {
  icon: "rect", // 方形图例
  itemWidth: 18,
  itemHeight: 10,
  bottom: 10, // 图表底部
  data: ['line'],
  textStyle: {
    color: "#999999",
    fontSize: 10
  }
}

tooltip 提示框内容过多超出边界

在 tooltip 里加上 confine: true

tooltip. confine
是否将 tooltip 框限制在图表的区域内。
当图表外层的 dom 被设置为 ‘overflow: hidden’，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。

1
2
3
4
5
6
7
8
9
var option = {
  tooltip: {
    trigger: "axis",
    confine: true // 将tooltip框限制在图表的区域内
  },
  xAxis: {
    // ...
  }
};

初始化图表

1
2
3
4
5
myChart = echarts.init(echartDom);

myChart.clear();

myChart.setOption(chartOptions);

重置图表

在使用 echartsJs 制作图表时，一般需要在窗口改变时重置图表

1
2
3
4
function resizeHandle() {
  myChart.resize();
}
window.addEventListener("resize", resizeHandle);

图表可拖动

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
// options: { dataZoom: [] }
dataZoom: [
  {
    type: "inside", // slider表示有滑动块的，inside表示内置的
    show: true,
    xAxisIndex: [0],
    minValueSpan: 4,
    maxValueSpan: 4,
    startValue: 1,
    // end,
    // zoomOnMouseWheel: false,
    backgroundColor: "rgba(0,0,0,0.5)", // 滑块背景颜色
    fillerColor: "rgba(255,255,0,0.5)", // 填充颜色
    showDetail: false // 拖拽时，是否显示详细信息
  }
];

myChart.on("datazoom", params => {
  if (params.batch[0].start == 0) {
    if (pageNo == 0) {
      pageNo = 1;
      //  ....
    }
  }
});