手把手教你玩转Echarts（一）！

最新推荐文章于 2024-06-26 11:09:42 发布

小小婷几

最新推荐文章于 2024-06-26 11:09:42 发布

阅读量1k

点赞数 3

文章标签：可视化

本文链接：https://blog.csdn.net/qq_40128375/article/details/107566627

版权

前言

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

你可以学到什么？

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

图表如何自适应
折线图区域配置
条形图自定义渐变色
自定义图表字体、图例样式
x、y轴的轴线设置以及一些细节处理
如何配置复合型双轴乃至多轴数据
还有其他细节部分（是否平滑、字体位置、颜色…等等）

最最重要的一点，看完本篇文章，你会形成一个图表思维：需求来了，我该配置什么一目了然。本篇文章可能过长，大家可以选择性查看。

话不多说，接下来我们来讲一下`echarts`到底怎么写.最后我会给出一个规律性的小结，以后大家如果也碰到echarts，麻麻再也不担心我不会啦！如果本文有不足的地方，恳请斧正。当然如果大家觉得对你有用的话，码字构思不易，记得给小仙女点个赞哟～（笔芯❤️）

UI图表样例

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

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'

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

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。
使用的效果是这样：

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

方案三

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

个人理解

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

同学们来了，划重点！

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

补充

对于评论区有人说使用mychart.resize()方法就可以的，这点我表示赞同，不过resize方法仅针对图表的父容器，以上所说是针对全局做的自适应.

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

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

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"
        }
      }
      ...               // 其他配置
    },
    {
        ...             // 第二根坐标轴的配置，配置项基本相同，可以自定义
    }
]