茫茫人海中与你相遇

相信未来的你不会很差

作者：婷酱Yaaa

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

前言

哈喽，everybody,我又来了。话不多说，这次给大家带来的是 echarts 系列之折线图，满满的干货。一个小实例让你对echarts折线图不再陌生！

剖析你的心

啊呸，错了，是剖析设计图。心有啥好剖析的🙄

简简单单的设计图，那让我们来分析一下折线图的细节在哪里：

1. 图例。今日、昨日、历史最高。位置在左侧。图标颜色为渐变色，高度大致2px。
2. Y坐标轴。字体大致为10px,紧贴坐标轴线。
3. X坐标轴最小值不显示。
4. 折线图为区域显示，并显示渐变色从左至右。
5. 折现同样为渐变色，从左至右。
6. 分割线为虚线且有颜色。

绘制图形

基础的图形生成我就不再复述了，不会的同学可以看我的系列第一篇手把手教你玩转Echarts(一)，这里我就继续讲配置了。

图例

legend: {    right: "3%",    top: "5%",    textStyle: {      color: colors[3],      fontSize: 8    },    itemWidth: 15,  // 图例标记的图形宽度    itemHeight: 3,  // 图例标记的图形高度    icon: "rect",   // 图例形状为方形    data: ["今日", "昨日", "历史最高"]  // 图例的数据数组},

Y坐标轴

yAxis: [{  type: "value",  axisLine: {       // 坐标轴线的配置    show: false,     lineStyle: {    // 轴线样式      color: colors[3]    }  },  splitLine: {      // y轴分割线配置    show: true,    lineStyle: {    // 分割线样式      type: 'dashed',   // 虚线      color: '#1e47697d'    }  },  axisTick: {       // 轴线上的刻度线配置    show: false  },  axisLabel: {    fontSize: 8,    formatter: v => {      return v >= 1000 ? v / 1000 + "k" : v;    }  }}],

微说下axisLabel.formatter，其实这里很灵活，支持字符串模板和回调函数两种形式，可以是 string 或者 Function .其实是对刻度值的一个格式化。官方例子在这里

X坐标轴

xAxis: [    {      type: "category",      boundaryGap: false,      axisLine: {        lineStyle: {          color: colors[3]        }      },      axisLabel: {      // 坐标轴刻度设置        fontSize: 8,        margin: 4,      // 距离坐标轴的距离      },      axisTick: {       // 是否显示刻度        show: false      },      data: []          // 数据数组，可以异步获取赋值    }],

渐变色

1.先引入echarts

import echarts from "echarts";

2.定义色彩数组，也就是取色盘。

const colors = [  new echarts.graphic.LinearGradient(0, 0, 1, 0, [  // 四个位置依次为左、下、右、上, 为逆时针。所以这里为横向渐变    {      offset: 0,      color: "#504DFF"    },    {      offset: 1,      color: "#91E6FF"    }  ]),  "#A2C6E0",  "#1e47697d"];

3.配置series

  // ...  series: [    {      name: "今日",         // 系列名称，用于tooltip的显示, 与legend的data是相对应的      type: "line",         // 类型，是折线还是柱子还是其他的      // stack: "总量",     // 是否显示图形堆叠      color: colors[0],     // 这里是指对应折线`line`的颜色      areaStyle: {        opacity: ".3",        color: colors[0]    // 一个颜色数组中的某个值      },      symbol: "none",       // 标记的图形      smooth: false,        // 是否平滑曲线显示      data: [120, 132, 101, 134, 90, 230, 210] // 对应x轴上的value值    },    // ...  ]

完整配置

export default {  inject: ['queryD'],  data() {    return {      option: {...option},      timer: null    };  },  mounted() {    this.initChart();    this.getVolumn();    window.addEventListener("resize", this.initChart);    this.timer = setInterval(this.getVolumn, this.$store.state.demo.time)  },  methods: {    initChart() {      let myChart = echarts.init(document.getElementById("hourTrend"));      myChart.setOption(this.option);      myChart.resize();    },    async getVolumn() {      try {        const res = await this.$axios.post("/api/weightHourInfo", JSON.parse(this.queryD));        // 这段代码如果有可优化的地方，请告知。反正我也不会承认自己菜的! 🤭        if (res.data && res.data.data) {          const arr = res.data.data;          this.option.xAxis[0].data = [];          this.option.series[0].data = [];          this.option.series[1].data = [];          this.option.series[2].data = [];          arr.forEach(el => {            this.option.xAxis[0].data.push(el.hour);            this.option.series[0].data.push(el.chargeableWeight);            this.option.series[1].data.push(el.chargeableWeightYest);            this.option.series[2].data.push(el.chargeableWeight9);          });          this.initChart();        }      } finally {      }    }  },  destroyed() {    window.removeEventListener("resize", this.initChart);    clearInterval(this.timer)  }};

小结

这里不清楚大家是否有仔细看里面的配置，其实都有很多的相似点，比如：
x轴、y轴都可以设置 name 、 axisLine 、 axisLabel 、 axisTick 、 color 等等，这些都是有规律可循的，然后根据不同的类型在series设置不同的个性化配置。

写在最后

文笔垃圾，也没有觉得自己很厉害。都是基础的文章，写给自己的，也给一些么有接触过的同学一点方向。当然，还是那句废话“如果对你有用的话，记得给小仙女点个赞哟”♥

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

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

首先介绍下背景：最近，接到一个任务，将数据可视化展示出来。项目是基于Vue的，开搞呗，安装echarts库。。。按照官方的说明文档，开始实现，效果如下：

看着好像也没啥问题。

想多了，从上图中，还不能看出数据大小的明显差异，但到了测试环境，由于数据的差异过大，有的是个数级别的，有的是百万级别的，结果就导致了那些个数据较小的柱子基本看不出来，高度太低(因为echarts是根据数据的大小分配高度的)。没办法，查了一圈官方文档也没啥眉目，就百度了下，看到了 “数据映射”关键词，开始动手实现第一步：先将y轴等分成几份(这里是5等分)，然后设置最小值(这里设置成0)，由于数据是接口返回的，这里最大值不设置，由库自己定，然后自定义y轴的刻度标签显示：

yAxis: {  type: 'value',  min: 0,  splitLine: {    show: false  },  interval: this.interval,  axisLabel: {    formatter: (v, ix) => {      if (this.max <= this.boundary) {        return v      } else {        let vl        switch (ix) {          case 0:            vl = this.ylabel[0]            break          case 1:            vl = this.ylabel[1]            break          case 2:            vl = this.ylabel[2]            break          case 3:            vl = this.ylabel[3]            break          case 4:            vl = this.ylabel[4]            break          case 5:            vl = this.ylabel[5]            break        }        return vl      }    }  }}

interval是强制设置坐标轴分割间隔，因为我是五等分y轴，所以这里的interval值是0.2倍最大值(最大值在第二步中会获取并存在data中)，这里的刻度值我是按照[0,10,0.1max,0.2max,0.5max,max]设置，需要说明的是，这里的刻度标签仅仅是展示变了，实际上其代表的值没变，所以需要数据映射。

第二步：y轴设置好了之后，就开始关键的数据映射了，简单理解就是将原始数据通过计算变成可以分布在处理过的y轴上的数据，

// 数据映射处理if (this.max > this.boundary) {  drt = rt.map(el => {    return el.map((elv, elix) => {      if (elix == 0) {        return elv      } else if (elv >= this.ylabel[0] && elv <= this.ylabel[1]) {        return (elv / this.ylabel[1]) * this.interval      } else if (elv > this.ylabel[1] && elv <= this.ylabel[2]) {        return (elv / this.ylabel[2]) * this.interval + this.interval      } else if (elv > this.ylabel[2] && elv <= this.ylabel[3]) {        return (elv / this.ylabel[3]) * this.interval + this.interval * 2      } else if (elv > this.ylabel[3] && elv <= this.ylabel[4]) {        return (elv / this.ylabel[4]) * this.interval + this.interval * 3      } else {        return (elv / this.ylabel[5]) * this.interval + this.interval * 4      }    })  })  return drt}

这里要注意保存处理前的数据，即实际数据，到此，图表即可满足需求

和之前的对比，可以看出，数值较小时，也能明显展示，不足的是，鼠标放在柱子上的提示框会展示处理之后的数据，即非实际数据，所以我们需要将提示框展示的数据处理下。第三步：设置tooltip

tooltip: {  formatter: params => {    if (this.max <= this.boundary) {      return `${params.seriesName}${params.name}：${params.data[params.seriesIndex + 1]}`    } else {      const va = this.od[params.dataIndex][params.seriesIndex + 1]      return `${params.seriesName}${params.name}：${va}`    }  }}

这里使用之前保存的原始数据，这样就不用因为反计算导致精度有差异了。

搞定！