Echarts visualization development

Basic introduction to Echarts

ECharts, an open source visualization library implemented using JavaScript, can run smoothly on PCs and mobile devices, compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.), and the underlying layer relies on vector graphics The library ZRender provides intuitive, interactive, and highly personalized data visualization charts.

Basic steps of using Echarts

Introduce echarts plug-in file to html page

Prepare a DOM container of size

<div id="main" style="width: 600px;height:400px;"></div>

Initialize echarts instance object

var myChart = echarts.init(document.getElementById('main'));

Specify configuration items and data (option):
Set the configuration item to the echarts instance object: myChart.setOption(option);

Echarts basic configuration

title: Title component

常用的属性：
 1. title. show = true : 是否显示标题组件，需求不需要时设置为false就不会显示标题组件
 2. title. textStyle     设置标题组件的文本样式。
 	color: 设置文字的颜色
	fontStyle : 主标题文字字体的风格
	fontWeight : 主标题文字字体的粗细（可用数字100|200|300...）
	fontFamily : 主标题文字的字体系列
	fontSize : 主标题文字的字体大小
	lineHeight : 设置行高
	rich : 自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效	果。
	........
3. padding : 标题内边距，单位px
4. backgroundColor：标题背景色，默认透明
5. borderColor：标题的边框颜色
6. borderWidth：标题的边框线宽
7. borderRadius：圆角半径，单位px
8. ......

legend: Legend component

常用的属性：
1. tyep ：图例的类型。 'plain'普通图例 , 'scroll'可滚动翻页的图例。
2. show：是否显示图例组件
3. left、top、right、bottom： 控制图例组件的位置。
4. width：图例组件的宽度
5. height：图例组件的高度
6. orient：图例组件的布局朝向
7. padding：图例内边距，单位px
8. itemGap：图例每项之间的间隔
9. itemWidth：图例标记的图形宽度
10. formatter：用来格式化图例文本，支持字符串模板和回调函数两种形式
11. selected：图例选中状态表
12. textStyle：图例的公用文本样式
13. icon：图例项的icon
14. data：图例的数据数组，数组项通常为一个字符串，每一项代表一个系列的 name
15. backgroundColor：图例背景色，默认透明。
16. ........

grid: drawing grid component

	直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。
常用的属性：
1. show：是否显示直角坐标系网格
2. left：组件离容器左侧的距离
3. top：组件离容器上侧的距离
4. right：组件离容器右侧的距离
5. bottom：组件离容器下侧的距离
6. width：组件的宽度，默认自适应
7. height：组件的高度，默认自适应
8. containLabel：grid区域是否包含坐标轴的刻度标签。
9. backgroundColor：网格背景色，默认透明。
10. borderColor：网格的边框颜色
11. borderWidth：网格的边框线宽
12. .......

xAxis: the x axis in the rectangular coordinate system grid

一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
1. show：是否显示x轴
2. gridIndex：x轴所在的grid的索引，默认位于第一个grid
3. position：x轴的位置。可选‘top’和‘bottom’
4. offset：x轴相对于默认位置的偏移，在相同的pisition上有多个x轴d的时候有用
5. type：坐标轴的类型
6. name：坐标轴的名称
7. nameLocation：坐标轴名称显示位置
8. nameGap：坐标轴名称与轴线之间的距离
9. inverse：是否是反向坐标轴
10. boundaryGap：坐标轴两边留白策略
11. min：坐标轴刻度最小值
12. max：坐标轴刻度最大值
13. axisLine：坐标轴轴线相关设置
14. axisTick：坐标轴刻度相关设置
15. axisLabel：坐标轴刻度标签的相关设置
16. splitLine：坐标轴在grid区域中的分隔线
17. axisPointer：坐标轴指示器配置项
18. .......

yAxis: the y-axis in the rectangular coordinate system grid

与上面xAxis相似，详情看官方文档

tooltip: tooltip component

1. show：是否显示提示框组件
2. trigger：触发类型
3. axisPointer：坐标轴指示器配置项
4. position：提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
5. formatter：提示框浮层内容格式器，支持字符串模板和回调函数两种形式
6. backgroundColor：提示框浮层的背景颜色
7. borderColor：提示框浮层的边框颜色
8. borderWidth：提示框浮层的边框宽
9. textStyle：提示框浮层的文本样式
10. ........

series: Series list.

Each series determines its own chart type by type.

Echarts visualization entry development steps and basic configuration

Echarts quick start