echarts 折线图 设置y轴最小刻度_手把手教你玩转Echarts ！

茫茫人海中与你相遇

74d46c102a7727f7447c065887297e3a.png

相信未来的你不会很差

作者：婷酱Yaaa

来源：https://juejin.im/post/5ef7426fe51d45349e254124

前言

一直想写一篇关于echarts的文章，因为之前接触的 echarts 也不多，几乎没怎么用过。之前写过移动端用过一两次 echarts , 不过都是看官方文档配置硬凑出来的，比较花时间。这次也是因为换新工作了，公司要求三天出一个大屏可视化页面，由于之前一直是写后台管理的，内容也比较简单，所以当时接到这个需求还是有点子慌的?。不过程序员嘛，不是在学习就是在学习的路上，慌归慌，工作还是要照常的，对你有困难的东西才是挑战，等你会了就会觉得。。嗯，真香～

你可以学到什么？

说的有点子多了哈，归根结底，授人以鱼不如授人以渔。通过这篇文章，你会学到什么？

  • 图表如何自适应

  • 折线图区域配置

  • 条形图自定义渐变色

  • 自定义图表字体、图例样式

  • x、y轴的轴线设置以及一些细节处理

  • 如何配置复合型双轴乃至多轴数据

  • 还有其他细节部分(是否平滑、字体位置、颜色...等等)

最最重要的一点，看完本篇文章，你会形成一个图表思维：需求来了，我该配置什么一目了然。本篇文章可能过长，大家可以选择性查看。 话不多说，接下来我们来讲一下`echarts`到底怎么写.最后我会给出一个规律性的小结，以后大家如果也碰到echarts，麻麻再也不担心我不会啦！如果本文有不足的地方，恳请斧正。当然如果大家觉得对你有用的话，码字构思不易，记得给小仙女点个赞哟～ (笔芯❤️)

UI图表样例

先说一下我们的设计图，涉及到的echarts的几种图标的类型，接下来我会按照难度划分，按照图表类别从易到难来详细讲一下。

2bb8dd1f0005a525f7af88c0b2ea2e0a.png

Echarts基本使用

这里我司使用的技术栈为nuxt.js+echarts,这里nuxt.js怎么使用我就不讲了，这个不是本篇文章讲述的重点，就讲一下最常见的vue-cli的使用方式。

1. 安装echarts依赖

npm i echarts -S

2. 全局挂载在vue原型上

改写main.js

import Vue from 'vue'import App from './App'import router from './router'// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echartsVue.config.productionTip = falsenew Vue({  el: '#app',  router,  components: { App },  template: ''})

3. 模版中使用

<template>  <div>    <div id="main" style="width: 500px;height:400px;">div>  div>template><script>const option = {  title: {    text: "ECharts 入门示例"  },  tooltip: {},  legend: {    data: ["销量"]  },  xAxis: {    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]  },  yAxis: {},  series: [    {      name: "销量",      type: "bar",      data: [5, 20, 36, 10, 10, 20]    }  ]};export default {  data() {    return {      option: option    };  },  mounted() {    this.drawChart();  },  methods: {    drawChart() {      var myChart = this.$echarts.init(document.getElementById("main"));      // 使用刚指定的配置项和数据显示图表。      myChart.setOption(this.option);    }  }};script>

到这里已经基本可以出来一个基本的柱状图了，恭喜你，已经完成了第一步。

4. 小tip:

如果我们在drawChart中从后台异步获取了数据，在这个步骤里进行初始化init,到前台展示接口返回数据可能会有一定的延迟，页面很有可能报错 会报错Cannot read property 'getAttribute'of null，也就是说无法获取图表的dom元素，也就无法加载图表进行初始化操作，那么这个时候需要你在mounted周期里先初始化一次，会较为稳妥一些。

好的，上面我们已经进行了一个柱状图的基本生成。下面我们来讲一下echarts图表的个性化定制吧。

个性化定制

自适应问题

在echarts图表的个性化定制前，有一点是大家比较关心的问题，就是echarts图表生成后，我该如何让它自适应呢？

自适应的方法有很多种，这里我简单说一下vw、vh的方式。

vw：视窗宽度的百分比(1vw 代表视窗的宽度为 1%)如果设计稿为1920，那么10%就是192px
vh：视窗高度的百分比， 一般设置body为height:100vh,则会占满整个屏幕。
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

方案一

要使echarts能够自适应，思路就是首先能让他显示出来，如果没有给它设置高度，那么它的高度则为0；其次，如果直接给它设置固定的像素px值,,则不会自适应。换个思路，我们可以给它的父级元素设置一个vh值，然后给图表设置height:100%。举个?，可以给它父级盒子设置30vh,像这样

<div style="height:30vh;">  <div id="main" style="height:100%;">div>div>

它会随着你视口高度的变化而变化，当然这种方式也有缺陷，就是如果视口宽度改变它会不会进行自适应，答案是不会。vw和vh只使用一种，要么让他宽度自适应，要么让他高度自适应，并且可以搭配rem的方式来进行字体大小的改变。再详细的我就不说啦，大家可以参考这一篇vw、vh使用详解或者这一篇点击这里

方案二

使用postcss-px-to-viewport，可以将px单位自动转换成viewport单位，vw表示屏幕的1%。考虑到本文的篇幅，这里不讲具体插件怎么配置了，但是会附上相关文章，可以参考vue-cli中使用postcss-px-to-viewport 将px转换成vw。使用的效果是这样：

b439966528af5639ffcb21cf9f97edaa.png

因为vw本身就是css3的新单位，其原理就是插件自动会帮你把px转为vw单位，以达到窗口自适应的效果。

方案三

方式有很多，可以使用百分比布局，也可以rem布局，就是使用js控制根字体html字体的大小。具体的不详述了。

个人理解

接下来，我会讲一下各个不同图表的配置。echarts图表生成的过程就是配置驱动, 当然这只是我自己的理解，可能不完全准确。

同学们来了，划重点！

只有当我们熟知哪些类型的图，应该给他一些什么相应的配置。比如x轴可以配置一些什么东西、y轴可以配置一些什么属性、series又代表了什么。我们要做的不是记得echarts图表所有的属性，这个完全是没有意义的，而是我们需要当一个类型的图表需求来时，应该去做些什么。那么接下来看看我们需要了解哪些？

那些你必须知道的 前置 知识

有一些是我们必须了解的基本配置，因为他们是很多类型图表的都具备属性，知道这些，我们可以省掉很多查找的时间。当然，这里并不是全部。

title: 标题组件，包含主标题和副标题。默认在左上角的那个灰色的超级大的标题。它是一个对象，这里我只讲平时可能会用到的常用的属性：

title: {    show: true,    text: '我是主标题',    textStyle: {        fontSize: 12,   // 标题字体大小        color: '#333'   // 标题颜色    }    ...                 // 其他属性}

legend: 图例组件。可以通过点击图例控制哪些系列不显示，这里我用的最多的是控制图例显隐与位置。

legend: {    show: true, // 默认为true,可以设置false不显示    right: '10%',   // 控制图例显示的位置，默认居中。这里值可以为数值或百分比    top: 'top',    ...}

grid: 直角坐标系内绘图网格,默认是不显示网格的。这里我用的最多的是利用grid来控制图表的拉伸

grid: {    top: '3%',  // grid 组件距离 容器顶部的距离    left: '5%'  // grid 组件距离 容器左侧的距离}

xAixs:直角坐标系 grid 中的 x 轴.可以为数组，也可以为对象。为对象时表示只有一个x轴，如果是数组是多根x轴的配置。一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。那么我们来看下默认的x轴常用的配置：

xAxis: [    {        type: "category",   // 类型        axisTick: {         // 坐标轴刻度相关设置            show: false,    // 是否显示坐标轴刻度            alignWithLabel: true        },        axisLine: {         // 轴线相关设置            lineStyle: {              color: colors[2]            }        },        axisLabel: {        // 轴线上的刻度文字设置            fontSize: 8,            formatter: function (value, index) { // x轴label文字格式化                return value.slice(5, value.length)            }        },      data: []    }]

yAixs: 直角坐标系 grid 中的 y 轴, 也可以为数组和对象，原理同x轴。x轴和y轴的配置基本相同。当我们知道如何配置x轴时同时也就知道了如何配置y轴。

  
yAxis: [    {      type: "value",    // y轴label文字类型      name:"妥投票数",   // y轴需要显示的名称      min: 500,         // 坐标轴最小值，当然也可以设置max最大值      position: "left", // 坐标轴位置，因为可能有多个坐标(y)轴      splitLine: {      // y轴分割线相关设置        show: false,        lineStyle: {          type: "dashed",          color: "#124977"        }      }      ...               // 其他配置    },    {        ...             // 第二根坐标轴的配置，配置项基本相同，可以自定义    }]

由于本文篇幅过长，于是分为系列文章。后续我们在详细讲折线图、条形图以及其他类型的echarts图表。

e056cebdff8554fa230fbad4bda17ec7.png

我们在虚拟的空间与你相遇，期待可以碰撞出不一样的火花

f365e0fff299456110efadd379cb0aa1.png1578bb35ab910ee7977dbbfe31278a00.png公众号ID：前端大联盟扫码关注最新动态