1、echarts折线图(折线图)

折线图也是我们数据可视化图表中最常用的图表之一。它是将各种数据点标记用线连接起来的图表。它不仅可以代表数字,还可以反映同一事物在不同时期的发展变化情况和变化趋势。

看着官网例子的这些五颜六色的折线图,相信在日常开发中,只要稍加配置和调整,就能满足90%的需求。

2、echarts的下载、安装和使用

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

像这样:

从“echarts”导入 * 作为 echarts;

// 根据准备好的dom初始化ecarts实例

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

// 绘制图表

myChart.setOption({

标题:{

text: 'ECharts 入门示例'

},

工具提示:{},

x轴:{

数据:['衬衫','开衫','雪纺衬衫','裤子','高跟鞋','袜子']

},

y轴:{},

系列:[{

name: '销售量',

类型:“酒吧”,

数据:[5, 20, 36, 10, 10, 20]

}]

});

其实在项目开发中不推荐使用上面的引入方式!!!

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

但是如果你不想引入所有的组件,ECharts 提供了一个按需接口来封装必要的组件。

在接下来的文章中,我们将使用按需引入的接口进行开发。

现在开始了。

3、echarts的下载和点播介绍

下一步是开发这个例子。

首先下载并安装依赖项:

1\。运行命令:

npm 安装 echarts --save

//或

纱线添加 echarts

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

这里注意 4 X 版本和 5 X 版本的介绍是很不一样的

• 4.x版本的介绍方法

//导入基本模板

从“echarts/lib/echarts”导入 echarts;

//引入环形图

导入“echarts/lib/chart/bar”;

//引入提示框组件、标题组件和工具箱组件。

导入“echarts/lib/component/tooltip”;

导入“echarts/lib/component/title”;

导入“echarts/lib/component/legend”;

• 5.x版本介绍方法

我们的项目使用最新版本 5 x。

3\。测试一下

如果您的代码像我的一样运行,那是正确的。

4、echarts需求开发示例

这张图是官网的基本折线图样式。我们需要做的就是将此图表配置为我们需要的样式。

这张图片是一个需求的例子

配置还原的相似度不是100%,但也应该是85%。

打开和干燥:

1.先配置网格

在官网的文档中找到grid属性的配置。首先,我们配置渲染区域。因为默认渲染区域占的比例不大,而且很大一部分是空白的,所以我们需要调整渲染区域。

为了更直观的看到渲染区域,我们将容器 div 的边框设置为红色。

将渲染区域设置为底部25,顶部20,左侧40,右侧20。默认单位为 px。一些小伙伴可能不太了解距离。官网解释了网格组件与容器的距离。如果要设置标题,顶部的空白要大一些,否则标题会占据图表的渲染区域。

网格:{

显示:真实,

底部:20,

顶部:20,

左:40,

右:20

}

设置了以上属性后,看起来“屏幕共享”变大了。

1.x轴

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

让 hs u003d 函数() {

让 arr u003d [];

for (let index u003d 0; index <u003d 24; index++) {

(index % 2 u003du003d 0) && arr.push(index);

}

返回 arr;

};

x轴:{

类型:“类别”,

axisTick: { //刻度设置

显示:假

},

axisLabel: { //坐标文本

颜色:'#151515'

},

轴线:{

lineStyle:{//轴的样本颜色

颜色:'#E8EFF1'

}

},

数据:hs()

}

设置以上属性的效果如下,离目标又近了一步。

1.y轴

接下来设置y轴的坐标轴,观察y轴的数据需要格式化,因为需要显示“摄氏度”的单位。另外,下图中框起来的虚线属于网格中y轴的分隔线,所以也需要在yAxis属性的splitLine中设置。由于放大后视力不好,所以分割线的颜色是'#004C63',不是看到的渐变...

! zoz100037](https://programming.vip/images/doc/a18d7bcda518c5862662f7111a172f3b.jpg)

设置以下属性:

y轴:{

类型:“价值”,

splitNumber: 4,

axisLabel: { //坐标文本

颜色:'#151515',

格式化程序:函数(值){

返回 `${value} ℃`;

}

},

分割线:{

lineStyle: { //y轴分隔线样式设置

color: '#004C63',//颜色

type: 'dashed', //虚线

}

}

}

4\。折线样式

最后,我们来设置折线的样式,观察折线的特点,包括:折线的颜色是“#004C63”和实心拐点。

一般图表样式属性设置都是在“系列”中设置的,如下:

系列:[{

数据:[50, 23, 24, 18, 35, 14, 26],

类型:'线',

lineStyle: { //折线样式

颜色:'#004C63'

},

itemStyle:{ //这里设置的拐点颜色

颜色:'#004C63'

},

symbol: "circle", //标记图形(拐点)

symbolSize: 6, //大小

}]

大部分设置到这里就完成了。其实我们的还原度看起来并没有那么高。因为这个设计图的原因,有些地方放大后变形了,可能有一些地方漏掉了,所以看起来有点不一样。

完整的代码和样式。

<模板>

<div idu003d"charts-container" classu003d"charts-container" />

</模板>

<脚本>

// 引入ecarts的核心模块,为使用ecarts提供必要的接口。

从 'echarts/core' 导入 * 作为 echarts;

// 引入折线图,Chart的后缀是Chart

从“图表/图表”导入 { LineChart };

// 介绍提示框、标题、直角坐标系Component和Component后缀都是Component

从 'echarts/components' 导入 { TitleComponent, GridComponent };

// 引入Canvas渲染器时,注意引入Canvas渲染器或SVGRenderer是必要的一步

从 'echarts/renderers' 导入 { CanvasRenderer };

echarts.use([CanvasRenderer, LineChart, TitleComponent, GridComponent]);

导出默认 {

名称:“线图”,

数据() {

返回{

};

},

安装() {

这个.init();

},

方法:{

/**

* 初始化图表

*/

初始化() {

让 hs u003d 函数() {

让 arr u003d [];

for (let index u003d 0; index <u003d 24; index++) {

(index % 2 u003du003d 0) && arr.push(index);

}

返回 arr;

};

// 根据准备好的dom初始化ecarts实例

让 myChart u003d echarts.init(document.getElementById('charts-container'));

变量选项 u003d {

网格:{

显示:真实,

底部:20,

顶部:20,

左:40,

右:20

},

x轴:{

类型:“类别”,

axisTick: { //刻度设置

显示:假

},

axisLabel: { //坐标文本

颜色:'#151515'

},

轴线:{

lineStyle:{//轴的样本颜色

颜色:'#E8EFF1'

}

},

数据:hs()

},

y轴:{

类型:“价值”,

splitNumber: 4,

axisLabel: { //坐标文本

颜色:'#151515',

格式化程序:函数(值){

返回 `${value} ℃`;

}

},

分割线:{

lineStyle: { //y轴分隔线样式设置

color: '#004C63',//颜色

type: 'dashed', //虚线

}

}

},

系列:[{

数据:[50, 23, 24, 18, 35, 14, 26],

类型:'线',

lineStyle: { //折线样式

颜色:'#004C63'

},

itemStyle:{ //这里设置的拐点颜色

颜色:'#004C63'

},

symbol: "circle", //标记图形(拐点)

symbolSize: 6, //大小

}]

};

myChart.setOption(选项);

}

}

};

</脚本>

<style langu003d"scss" 作用域>

.charts-container {

宽度:80%;

边距:100px 自动;

高度:410px;

// 边框:1px 实心 #f00;

}

</style>

5、本文小结

其实我写到这里的时候也发现了还原出来的样式有些不足,比如y轴坐标值和直线之间的样式。写完例子,发现一不注意就省略了。请原谅我。

其实从上一节不难看出,常用折线图设置的属性大部分都具备,上一篇速记的属性可以很快完成。

作为Echart的系列文章,本系列的主要目的是让学习Echart的朋友快速上手,并会持续更新。

如有任何问题,请留言或@博主。感谢大家的支持o( ̄) ̄)O~

感谢您的阅读。如果这篇文章或项目对你有帮助,可以的话请三键三连!

GitHub 有一个开源项目。如果需要小伙伴,可以轻松star哦!

GitHub:https://github.com/langyuxiansheng