v-charts 柱状图与折线图（混合图）All In One

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, 禁止转载 🈲️，侵权必究⚠️！

---