今天上午，我的博客后台有个网友，突然给我留言说我写的一篇echart使用中的效果怎么实现的。加了微信，给他说了也发了官网的例子了，结果下午了给我说还不会，一问好吧，刚从培训班出来，学了VUE啥的，一上工作岗位，公司用echart绑定数据懵逼了。我的娘，，手把手教你用。

去官网：https://echarts.apache.org/ apache社区

点击所有示例：

点击曲线图：

进入后下载示例：

左侧源码部分：注意点击完整代码。

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

option && myChart.setOption(option);

能看到所有的代码。对了这里，这个网友问了个我也很懵逼的问题。中间的

document.getElementById('main');

"main"是啥？ 我去吐血。。。。。

一顿手把手教，让他创建了一个p 给了宽高，给个ID ..哦。。这才懂了。

数据绑定

数据绑定又把我气这了。问我：

data: [150, 230, 224, 218, 135, 147, 260],

怎么写？我说这咋写，看后台给你的数据啊。后台给的数据？

网友：“这咋写？”

我：“看后台给的数据”.

网友：“数据有用吗？帮我看看”

发来一看哦。哦哦。不是个“标准”：data: [150, 230, 224, 218, 135, 147, 260],类型

好嘛这就不会了。。。

一顿给他讲如何根据需要的业务数据提取出来。。。

总算给他讲了一遍。。嘴里说懂了懂了，懂是懂，就是不会写。。。估计这网友现在还懵逼这那。

写前端这种东西那，要的就是心境，心境，千万不能浮躁，不会跑，就飞。。那可飞不起来。

且行且珍惜吧。骚年！！！