ucharts 如何实现双 y 轴，并实现不同的参数使用不同的 y 轴 All In One

ucharts 如何实现双 y 轴，并实现不同的参数使用不同的 y 轴 All In One

bug

solution

    options: {
        // enableScroll: true,
        // dataLabel: true,
        xAxis:{
            // gridType: 'dash',
            // splitNumber: 3,
            // max: 10,
            // labelCount: 2,
            labelCount: 20,
            // itemCount: 5,
            // itemCount: 10,
            // gridEval: 2,
            // itemCount: 3,
            // max: 10,
        },
        yAxis:{
            // gridType: 'dash',
            // splitNumber: 2,
            // formatter: (val) => {
            //     console.log('val', val);
            //     return val + '%';
            // },
            // format: (val) => {
            //     console.log('val', val);
            //     return val + '%';
            // },
            // label: {
            //     formatter: function() {
            //         return 100 * value /$(this.axis.tickPositions).last()[0] + '%';
            //     }
            // },
            // type: "value",
            // name: "%",
            // axisLabel: {
            //     formatter: "{value} %",
            // },
            // type: "value",
            // name: "%",
            // axisLabel: {
            //     formatter: "{value} %",
            // },
            //如不写此方法，Y轴刻度默认保留两位小数
            data:[
                {
                    position: 'left',
                    title: '',
                    min: 0,
                    max: 1,
                    // max: 100,
                    textAlign: 'left',
                    //
                    tofix: 2,
                    unit: '%',
                    // type: 'value1',
                    // name: '温度',
                    // axisLabel: {
                    //     formatter: '{value} °C'
                    // },
                },
                {
                    position: 'right',
                    title: '',
                    min: 0,
                    // max: 15,
                    // max: 100,
                    textAlign: 'left',
                    // type: 'value2',
                },
                // {
                //     position: 'left',
                //     title: '???',
                // },
                // {
                //     position: 'left',
                //     title: '???',
                // },
                // {
                //     // position: 'left',
                //     position: 'right',
                //     title: '折线',
                // },
                // {
                //     position: 'right',
                //     min: 0,
                //     max: 200,
                //     title: '柱状图',
                //     textAlign: 'left',
                // },
            ],
        },
        extra: {
            mix: {
                column: {
                    width: 20,
                    // seriesGap: 2,
                    // barBorderCircle: false,
                    // linearType: 'opacity',
                    // linearOpacity: 1,
                    // colorStop: 3
                },
            },
            tooltip: {
                showBox: true,
                // showArrow: true,
                showCategory: true,
                // splitLine: false,
                // horizentalLine: false,
                // horizontalLine: false,
                xAxisLabel: false,
                yAxisLabel: true,
            },
        },
    },

    formatChartData (rows = [], labels =[]) {
        const categories = rows.map(obj => obj.date);
        // const categories = rows.map(obj => obj.date).filter(item => typeof item === 'number');
        const series = [];
        const types = {
            value1: 'column',
            value2: 'line',
        };
        for(const [key, label] of Object.entries(labels)) {
            const data = rows.map(obj => (obj[key]).toFixed(2));
            series.push({
                name: label,
                data,
                type: types[key],
                // index: 0,
                // 可选项
                // index: 1,
                // style: 'curve',
                // color: '#1890ff',
                // disableLegend: true,
            });
        }
        console.log('series', series);
        console.log('categories', categories);
        for (let i = 0; i < series.length; i++) {
            // ✅ 添加对应的 index，渲染到指定的 y 轴上
            series[i].index = i;
        }
        // series.push(series[0]);
        this.chartsData = {
            series,
            categories,
        };
    },

API

refs

series & index

https://blog.csdn.net/qq_29384789/article/details/107613568

---

---

©xgqfrms 2012-2020

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

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

---