一、echarts简介

1.1图表工具

应用场景：网页

工具：百度echarts highCharts

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

1.2 echarts

点击下载

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

2.写基本结构

3.js代码

1.3使用步骤

1. 引入ecahrts文件

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

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轴数据 需要数组，数据的处理成数组，才能渲染

转载原文：https://zhuanlan.zhihu.com/p/265573408/edit