Only老K说-SPA项目之v-charts

前期提要

接到项目需求，使用vue做一个表图用于管理层能够更加直观的看到数据显示

直接开始

nmp下载：npm i v-charts echarts -S
下载成功如下图：

实现效果：（这里简单测试，发现和需要显示的不一样继续换）
没错就是你了皮卡丘！！！

个人观点

看到这里八成各大神仙会问为什么没有贴代码（贴你个头，只会一顿copy）
自己去看贴出学习网站v-charts
整个网站花店时间还是能够很快就能看懂可能比较复杂点的就是图标属性以及事件监听

简单项目实战

需求：完成显示药物流入和流出数量的饼图
前台代码：（看不懂里面参数内容的说明你没有去官网上面看）

    created() {
      let url=this.axios.urls.SYSTEM_SSM_FLOWXX_BAOBIAO;
      this.axios.post(url, {}).then((response) => {
        this.chartData={
          columns: ['方向', '数量'],
          rows:response.data.data
        }
      }).catch(function(error) {
        console.log(error);
      });
    }

前台就是传递对应的json数据就可以了
提供一个测试方法用来判断前台的数据是否符合格式
console.log(typeof …) 代表前台传递的放回结果

后台效果：

对前台不会转数据格式的各路神仙提供一篇博客，翻到最下面有类似的教程
点击查看博客，进入最下面有数据格式处理代码