v-charts 堆叠面积图 All In One

v-charts 堆叠面积图 All In One

new Vue({
  el: '#app',
  data () {
    this.chartExtend = {
        // series (v) {
        //   v.forEach(i => {
        //     i.barWidth = 10
        //   })
        //   return v
        // },
        // tooltip (v) {
        //   v.trigger = 'none';
        //   return v
        // },
        // tooltip (obj) {
        //   // console.log('obj', obj);
        //   // 拼接字符串
        //   // const {formatter, trigger} = obj;
        //   return obj;
        // },
        // tooltip: {
        //     formatter: (params) => {
        //        // 一个 column 返回 对象 
        //         const {
        //             name,
        //             marker,
        //             value,
        //             percent,
        //         } = params;
        //         console.log('params', params);
        //         return `${marker}${name}<br/>${value}(${percent} %)`;
        //     },
        // },
        tooltip: {
            formatter: (arr) => {
               // 多个 column 返回 数组
               let result = ``;
               for([i, params] of arr.entries()) {
                  const {
                      name,
                      marker,
                      value,
                  } = params;
                  console.log('params', params, i);
                  if (i === 0) {
                    result += `
                      <span style="color: #0f0;">🚀${name}</span>
                      <br/>
                      ${marker}${value[1]}<br/>
                    `;
                  } else {
                    result += `${marker}${value[1]}<br/>`;
                  }
               }
               return result;
            },
        },
    };
    this.chartSettings = {
      stack: {
          '用户': ['访问用户', '下单用户'],
          // area: true,
      },
      // area: { '用户': ['访问用户', '下单用户'] },
      area: true,
      // ❌ v-charts 不支持，设置 area 与 line 混合图 ？？？https://codepen.io/xgqfrms/pen/MWEdROy?editors=1010
      // ✅ echarts 支持，设置 area 与 line 混合图  https://codepen.io/xgqfrms/pen/MWEMvmY
      // area: false,
      // 柱状图 ？？？showLine: ['下单率'],
      // 双轴 （下单率）
      axisSite: {
        right: ['下单率']
      },
      yAxisType: ['normal', 'percent'],
      // yAxisType: ['KMB', 'percent'],
      // yAxisName: ['数值', '比率']
    };
    return {
      chartData: {
        // 颜色顺序：绿色 / 蓝色 （与 columns 一致）
        // columns: ['日期', '下单用户', '访问用户'],
        // columns: ['日期', '访问用户', '下单用户'],
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 1.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 2423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ],
      },
    };
  }
})

https://v-charts.xgqfrms.xyz/#/line?id=堆叠面积图

demo

❌ v-charts 不支持，设置 area 与 line 混合图 ???

https://codepen.io/xgqfrms/pen/MWEdROy

✅ echarts 支持，设置 area 与 line 混合图

https://codepen.io/xgqfrms/pen/MWEMvmY

refs

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

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

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---