v-charts 图表组件 - 基于 Vue 和 echarts 封装

更新日期: 2019-07-07 阅读次数: 1679 字数: 472 分类: VueJS

现在稍微复杂一点的前端界面,我发现离开了 Vue 就写不动。

目前正在做一个数据的图表展示,发现 v-charts 真是个神器。完美结合了 Vue 和 echarts 的优点。

效果如图

v-charts 图表组件 - 基于 Vue 和 echarts 封装

配置方便直观

  • 设置别名
  • 双 Y 轴

很轻松实现,文档示例也非常人性化,比 echarts 官网文档更直观。

代码实现

模板

<ve-histogram
       :title="{text: '订单趋势', left: 'center', top: 'bottom'}"
       :data="order_data" :settings="order_chart_settings"></ve-histogram>

Vue JS

order_chart_settings: {
  labelMap: {
    'date': '日期',
    'money': '订单金额',
    'num': '订单量',
  },
  metrics: ['money', 'num'],
  dimension: ['date'],
  axisSite: { right: ['num'] },
  yAxisName: ['金额', '订单量'],
  showLine: ['money'],
},
order_data: {},

Laravel 后台数据接口

$data = Order::selectRaw('DATE(created_at) as date, sum(total_price) as money, count(1) as num')
  ->where('payed', 1)
  ->groupBy('date')
  ->get();

$rsp["data"] = [
  'columns' => ['date', 'money', 'num'],
  'rows' => $data,
];
return response()->json($rsp);

返回的数据格式:

{
  "err_code": 0,
    "err_msg": "OK",
    "data": {
      "columns": [
        "date",
        "money",
        "num"
      ],
      "rows": [
        {
          "date": "2019-06-24",
          "money": "234.00",
          "num": 4
        },
        {
          "date": "2019-06-27",
          "money": "0.02",
          "num": 2
        },
        {
          "date": "2019-06-28",
          "money": "2139.84",
          "num": 23
        },
        {
          "date": "2019-06-29",
          "money": "2391.83",
          "num": 28
        },
        {
          "date": "2019-07-01",
          "money": "546.04",
          "num": 11
        },
        {
          "date": "2019-07-02",
          "money": "165.17",
          "num": 6
        }
      ]
    }
}

vue echarts 图表显示空白

偶尔会出现图表不显示的问题。但是鼠标放上去是能够显示数字的,只是不显示曲线部分。

v-charts 图表组件 - 基于 Vue 和 echarts 封装

当我将数据请求的 ajax 方法,从 mounted 挪到 created 中之后,就能正常显示了。。。

v-charts 图表组件 - 基于 Vue 和 echarts 封装

这个问题,我怎么也没想明白是怎么回事。就算我是在 mounted 中延后一秒去执行 ajax 请求,也不行。

但是确实问题解决了。

  • created 时,已经初始化了 data,但是 template 还没有渲染。
  • mounted 时,template 也渲染好了。

爱评论不评论

近期节日

2019年09月18日 "九一八"事变纪念日
2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
查看更多节日