v-charts 柱狀圖與折線圖（混合圖）All In One

vue & charts

<template>
  <ve-histogram
    :data="chartData"
    :extend="chartExtend">
  </ve-histogram>
</template>

<script>
  export default {
    data () {
      // 混合圖
      this.chartExtend = {
        series (arr) {
          console.log('arr', arr);
          arr.forEach((item, index) => {
            if (index === 1) {
               item.type = 'line';
            }
            item.barWidth = 10
          })
          return arr;
        },
        tooltip (v) {
          v.trigger = 'none'
          return v
        }
      }
      /* 等同於
        this.chartExtend = {
          series: {
            barWidth: 10
          },
          tooltip: {
            trigger: 'none'
          }
        }
        等同於
        this.chartExtend = {
          'series.0.barWidth': 10,
          'series.1.barWidth': 10,
          'tooltip.trigger': 'none'
        }
      */
      return {
        chartData: {
          columns: ['日期', '成本', '利潤'],
          rows: [
            { '日期': '1月1日', '成本': 15, '利潤': 12 },
            { '日期': '1月2日', '成本': 12, '利潤': 25 },
            { '日期': '1月3日', '成本': 21, '利潤': 10 },
            { '日期': '1月4日', '成本': 41, '利潤': 32 },
            { '日期': '1月5日', '成本': 31, '利潤': 30 },
            { '日期': '1月6日', '成本': 71, '利潤': 55 }
          ]
        }
      }
    }
  }
</script>

https://v-charts.xgqfrms.xyz/#/props-demo2

demo

refs

https://www.cnblogs.com/xgqfrms/p/14666778.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 發布文章使用：只允許注冊用戶才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---