zoukankan      html  css  js  c++  java
  • vcharts 柱状图与折线图(混合图)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, 禁止转载 ️,侵权必究⚠️!


  • 相关阅读:
    函数配接器
    函数对象和函数指针
    unary_function 和 binary_function
    堆排序
    Shell排序
    volatile理解
    死锁
    进程间通信
    优化循环的方法-循环展开
    如何学习编译原理
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/15701229.html
Copyright © 2011-2022 走看看