echarts x 起始_零基础入门echarts图标

一、echarts简介

1.1图表工具

应用场景：网页

工具：百度echarts highCharts

学习：柱状图（条形图） 折线图 饼状图 地图 （数据交互）

1.2 echarts

点击下载

1.下载echarts.js文件 官网下载 或者bootCDN下载

2.写基本结构

3.js代码

1.3使用步骤

1. 引入ecahrts文件

<script src="echarts.min.js"></script>

1. 绘制简单的图表容器 准备一个具备大小（宽高）的 DOM

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

1. js配置 显示图表

显示效果

二、Echarts配置参数

2.1 标题配置

【标题配置】

2.2 系列和悬浮框

【样式配置】

备注：一个坐标轴显示2个柱条内容，悬浮的时候tooltip是指向两个内容，两个数据都显示 需要配置

formatter: {a0} {a1}等表示不同的系列。 如果悬浮当前只展示当前的数据：去掉trigger和formatter

2.3 X轴和Y轴配置

一般x y轴的配置就是轴线的颜色，以及轴线标签的文字颜色。x轴的标签和刻度的对齐位置，x轴的起始点位置。 只看下图的x,y轴

2.4 图形颜色

三、折线图

3.1 折线图修改

注意：柱状图和折线图可以相互转换的 只需要修改图表类型：type:bar/line

如下图：

注意：背景颜色加给容器，x,y轴的样式同步柱条配置。

拐点样式：

修改的是series里面line的样式

3.2 平滑的曲线

曲线平滑属性：serires里面配置：

x轴位置从0点开始：

【代码】

四、网络请求-渲染图表

4.1 网络获取

【代码】

思路：

1. 先配置canvas样式
2. 获取动态数据
3. 处理数据 ---图表x y轴数据 需要数组，数据的处理成数组，才能渲染

视频教程在这里：

01_Echarts_echarts简介_尚学堂202002期第三阶段_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com