1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列

折线图在我们也是我们的数据可视化图表中最常用的一种图表之一，是用折线将各个数据点标志连接起来的图表，不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况以及变化趋势。 看着官网示例的这些花花绿绿的折线图，相信在日常的开发中，只要稍加配置调一下，已经可以满足9成的需求了。

在上一篇的文章里，我们主要是学习如何快速上手Echarts的一些属性设置，我们演示的时候用的引入方式是一次性引入所有的资源。

如这样：

其实上面这样的引入方式在项目的开发中是不推荐的！！！

原因是上面的代码会引入所有 ECharts 中所有的图表和组件，有很多属性我们都用不上，会造成资源的浪费与占用。

但是假如你不想引入所有组件， ECharts 是提供了按需引入的接口来打包必须的组件。

后面的文章我们都会使用按需引入的接口的方式来进行开发。

下面正开始。

接下来就是要这个例子进行开发。 首先下载安装依赖：

1、运行命令：

2、按需引入项目(作者使用Vue项目)

这里需要注意的是4.x版本和5.x版本的引入方式有很大的不同

4.x版本的引入方式

// 引入基本模板 import echarts from “echarts/lib/echarts”;

//引入环形图 import “echarts/lib/chart/bar”; // 引入提示框组件、标题组件、工具箱组件。 import “echarts/lib/component/tooltip”; import “echarts/lib/component/title”; import “echarts/lib/component/legend”;

5.x版本的引入方式 我们的项目里使用的是最新的版本5.x。

3、测试一下

如果你的代码跑起来，和我的这个一样就说明是正确的了。

这张图片是官网的基础折线图样式，我们需要做的就是将这个图表配置为我们需求要的样式。 这个图片就是需求的例子 配置还原的相似度不说100%，但是也要做到85%的还原度才行。

开干：

在官网的文档中找到grid属性的配置，我们首先配置一下渲染区域，因为默认的渲染区域的占比不是很大，有很大的一部分是空白的，所以需要我们调整渲染区域。 为了更直观的看到渲染区域，我们将容器div的边框设置为红色。 设置渲染区域为底部25，顶部20留白，左侧40，右侧20，单位默认是px，可能有小伙伴也没看懂这个的距离，官网的解释是grid组件距离容器的距离，如果要设置标题，top的留白区域还要大一些才行，否则标题就会占用图表的渲染区域。

设置好上面的属性，看起来就像有更大的“屏占比”了。

接下来设置x的轴线，我们先观察一下，x轴是没有刻度线的，颜色为“color: ‘#151515’”,数据为24小时，每2小时为一个间隔。