使用echarts的vue项目第二天,vue的按钮点击echarts表格联动(适合没接触过的echarts的新手)

vue的按钮点击echarts表格联动

昨天晚上打游戏到很晚,今天中午12点才起床,来吧,继续我的项目.
      想要点击vue视图中的按钮实现echarts的表格联动,得有一个准确的思路:
      ①弄清楚echarts的api属性和属性值(简单来说就是这么使用echarts)—>②创造匹配echarts表格和vue联动的一系列数据—>③在vue子组件中灵活构造echarts表格
实现思路:

1. echarts的参数属性和属性值
   网上找案例(行不通)
   网上找的案例也是五花八门,算起来功能倒也能实现,可是关键的属性和属性值,这些人居然一个都没说,也就是说如果想自己学习深入的理解echarts的话就要一样稳扎稳打的去官网找文档,(如果项目催的紧,那就展示出程序员复制粘贴大法神功了.)
   直接去到echarts官网看文档:
   找到基础概念预览就可以清楚的看到这些echarts的属性值用法了.
   
   在这里我们可以很清楚的看到如何实现自己想要的基础表格和echarts提供的各种组件以及实现这些组件的属性值,豁然开朗啊,这样子echarts的接口就找到了.
   下面这三张图片就几乎涵盖了你所用到的echarts的所有属性(api接口):
   
   
   
   括弧,如果找不到接口对应的属性值,可到echarts的api文档查看:
   

2. 创造匹配vue按钮实现echarts联动的所有数据(测试数据)
   这对新手来说是个很复杂的问题,需要考虑的元素非常多,新手请注意(造过无数次数据的老鸟就别看了):
   ①构造测试数据的时候要尽量多想可能会发生的情况,不要到最后还要回炉重造数据
   ②多注意创造数据的格式,json格式的数据错一个标点符号就获取不到
   ③多了解js自带的字符串,数组,对象方法,也可以学老鸟直接上正则表达式
   一般来说一个人的数据只有自己最清楚,我把我造了一半的数据拉出来给你们瞧一瞧:
   

3. 在vue生命周期里实现点击按钮数据改变echarts模板
   ①改变echarts数据
   
   ②在子组件的生命周期中用echarts初始化
   
   这样就能点击不同的按钮显示不同的echarts表格.迫不及待,明天就能实现最终的三级联动,点击每个按钮,视图层都会改变,爽歪歪…