原文地址：https://www.oschina.net/news/114320/echarts-4-7-0-released

最新，ECharts 发布了在 GitHub 上的第 100 个版本！

什么是hooks?

简单说就是我们将文件里的一些功能抽离出去封装后达到复用的效果。看到这里你会想这不就是以前的utils换个名字吗？其实我们更倾向于把一些如ref、reactive、onMounted等vue的api抽离的函数叫做hooks函数，它区别于mixin的不好排查异常和维护。

Echart的基本操作

在

时光荏苒、转瞬即逝，国家富强使得人们迈入幸福的新生活，随着时代的发展，人们对于事物的处理方式也发生了改变，从书信交流到如今视频通话，人们日常生活中的交流方式也发生了改变，尤其是人们对于图像的接受能力远远大于文字，很多时候，几十上百字的归纳说明还没有一张图给人带来的直观，这种将文字变成表格，表格变成图表的过程却并不算漫长，随着互联网的蓬勃生长、对于千万条乃至数百亿条数据的处理之后，如何让管理者更加直观便捷的查看出大数据下隐藏的信息，这就不仅仅是文字能够表述的清楚，或者这样说，在如今这个时代，任何可以被节约下来的时间都不能去浪费，以至于表格逐渐代替了文字账本，在互联网中使用图表来展示数据也逐渐成为了主流趋势，当我们把目光放向物联网时，其实也是这样，随着互联网的壮大，物联网也在迅速崛起，而物联网可视化的万物可视也成为了当前的一大需求，将三维实景与数据结合起来也成为了可视化的一大亮点。

前言

我们在书写echarts组件的时候，往往会发现：

1 方法中设置option

var datamap0 = [];
var datamap1 = [];

var maps = res.data;
var data_A = ['', '', '', '', '', '', '', '', '', '', '', ''];
var data_B = ['', '', '', '', '', '', '', '', '', '', '', ''];

maps.forEach((map, index) => {
  datamap0.push(
          map.时间
  );
  data_A[index] = map.人数
  datamap1.push(
          map.人数
  );
  data_B[index] = map.净增
});

console.log("mapsyear,",datamap1);


var xData = datamap0;
var y1Data = data_A;

var y2Data = data_B;
option = {
  grid: {
    left: "7%",
    right: "5%",
    top: "25%",
    bottom: "19%",
  },

  title: {
    show: true,
    text: "增长统计" || pName,
    left: 'center',

    textStyle: {
      color: "#030303",
    },

  },

  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  legend: {
    data: ["月末","净增"],
    left: "3%",
    top: "10%",
    itemWidth: 11,
    itemHeight: 11,
    textStyle: {
      color: "#100e0e",
      fontSize: 13,
    },
  },
  toolbox: {
    show: false,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: true,
      show: true,
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 13,
        color: "#5b5959",
        margin: 8,
        interval: 0,
        formatter: function (val) {
          return val;
        },
      },
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#4e608b", //左边线的颜色
          width: "1", //坐标线的宽度
        },
      },
      data: xData,
    },
  ],
  yAxis: [
    {

      axisLabel: {
        formatter: "{value}",
        textStyle: {
          fontSize: 12,
          fontFamily: "PingFang SC",
          fontWeight: 400,
          lineHeight: 17,
          color: "#979A9F", //坐标值的具体的颜色
          opacity: 1,
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          width: 2,
          color: ["#E3E3E3"], //分割线的颜色
          // color: ['#5d5d5d'] //分割线的颜色
        },
      },


      type: "value",
      scale: true,
      name: "",
      axisLine: {
        show: true,
      },
      splitNumber: 4,
      axisTick: {
        show: false,
      },
      // splitLine: {
      //   lineStyle: {
      //     // 使用深浅的间隔色
      //     color: "#4e608b",
      //   },
      // },
      // axisLabel: {
      //   fontSize: 13,
      //   color: "#d0d0d0",
      //   margin: 5,
      // },
      max: 10000,
      min: 0,
      boundaryGap: [0.2, 0.2],
    },
    {
      type: "value",
      scale: true,
      axisLine: {
        show: true,
      },
      splitNumber: 3,
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 13,
        color: "#d0d0d0",
        margin: 12,
      },
      splitLine: {
        lineStyle: {
          // 使用深浅的间隔色
          color: "#4e608b",
        },
      },
      name: "",
      max: 300,
      min: -200,
      boundaryGap: [0.2, 0.2],
    },
  ],
  series: [
    {
      name: "月末",
      type: "bar",
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#1dacfe",
          },
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#4889fb", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#15b3ff", // 100% 处的颜色
                    },
                  ],
                  false
          ),
        },
      },
      barWidth: "40%",
      yAxisIndex: 0,
      data: y1Data,
    },
    {
      name: "净增",
      yAxisIndex: 1,
      color: "#f30e0e",
      label: {
        normal: {
          show: true,
          position: "top",
          textStyle: {
            color: "#f30e0e",
          },
        },
      },
      lineStyle: {
        color: "#f30e0e",
      },
      type: "line",
      data: y2Data,
    },
  ],
};

this.myChart4.setOption(option);

今天分享几段工作生活中常用的代码，都是最为基础的功能和操作，而且大多还都是出现频率比较高的，很多都是可以拿来直接使用或者简单修改就可以放到自己的项目当中

前言说明：因工作需要用到图统计数据作为展示，用到echarts3（你也可以考虑用阿里的AntV:http://antv.alipay.com/zh-cn/index.html,或者国外的一些图形插件）。发现官方文档只有根据属性查询，没有根据图的类型文档说明。以下重点写的例子主要是官方示例中没有提及，但是我工作中用到了的示例。