ECharts

ECharts
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
ECharts 遵循 Apache-2.0 开源协议，免费商用。

安装

下载地址：https://echarts.apache.org/zh/download.html
- 完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
- 常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
- 精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。
使用

创建 HTML 页面，引入 echarts.min.js：
```
DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <script src="echarts.min.js">script>
head>
html>
1
2
3
4
5
6
7
8
```
为 ECharts 准备一个具备高宽的 DOM 容器：
```
<body>
    
    <div id="main" style="width: 600px;height:400px;">div>
body>
1
2
3
4
```
设置配置信息

ECharts 库使用 json 格式来配置。
```
echarts.init(document.getElementById('main')).setOption(option);
1
```
标题：
```
title: {
    text: '第一个 ECharts 实例'
}
1
2
3
```
提示信息：
```
tooltip: {},
1
```
图例组件：展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
```
legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}
1
2
3
4
5
6
7
8
9
10
11
```
X 轴：配置要在 X 轴显示的项:
```
xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
1
2
3
```
Y 轴：配置要在 Y 轴显示的项。
```
yAxis: {}
1
```
系列列表：每个系列通过 type 决定自己的图表类型:
```
series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]
1
2
3
4
5
```
type类型如下：
- ‘bar’：柱状/条形图
- ‘line’：折线/面积图
- ‘pie’：饼图
- ‘scatter’：散点（气泡）图
- ‘effectScatter’：带有涟漪特效动画的散点（气泡）
- ‘radar’：雷达图
- ‘tree’：树型图
- ‘treemap’：树型图
- ‘sunburst’：旭日图
- ‘boxplot’：箱形图
- ‘candlestick’：K线图
- ‘heatmap’：热力图
- ‘map’：地图
- ‘parallel’：平行坐标系的系列
- ‘lines’：线图
- ‘graph’：关系图
- ‘sankey’：桑基图
- ‘funnel’：漏斗图
- ‘gauge’：仪表盘
- ‘pictorialBar’：象形柱图
- ‘themeRiver’：主题河流
- ‘custom’：自定义系列
样式设置

ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark。
```
var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');
1
2
```
或者在官方的主题编辑器选择自己喜欢的主题下载：
https://echarts.apache.org/zh/theme-builder.html
目前主题下载提供了 JS 版本和 JSON 版本。

常用配置项说明

https://echarts.apache.org/zh/option.html#title
示例：
```
option = {
  title: {
    text: "Main Title",		// 主标题文本，支持使用 \n 换行。
    subtext: "Sub Title",	// 副标题文本。
    left: "center",			// title 组件离容器左侧的距离。
    top: "center",			// title 组件离容器上侧的距离。
    textStyle: {			// 主标题文字的颜色。
      fontSize: 30
    },
    subtextStyle: {			// 副标题文字的颜色。
      fontSize: 20
    },
   	backgroundColor: rgb(128, 128, 128)		// 标题背景色，默认透明。
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
相关阅读:
win10系统win+r找不到组策略编辑器gpedit.msc
deepvariant 基因变异识别算法docker版使用
 2.23作业
 机器人过程自动化(RPA)入门 3. 顺序、流程图和控制流程
 台式机卡死救机心情点滴记录
 新能源充电桩直流功率计量电表在中国香港充电桩项目中的应用
 生产制造管理系统对中小型企业的作用有哪些？
提质增效，安全灵活，阿里云EDA上云方案让芯片设计驶入高速路
 后端web开发框架——Spring Boot
设计模式之原型模式(Prototype)
原文地址：https://blog.csdn.net/weixin_43956958/article/details/132868570

安装

使用

设置配置信息

样式设置

常用配置项说明