uniapp+ucharts实现正负轴

参考文章:https://blog.csdn.net/qq_29384789/article/details/107613568

<template>
    <view>
            ...
             <qiun-data-charts 
                  type="line"
                  :opts="opts"
                  :chartData="chartData"
                />
    </view>
</template>

<script>
import QiunDataCharts from '../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';

export default {
    components: {
        QiunDataCharts
    },
    data() {
        return {
            chartData: {},
            opts: {
                color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: [15,10,0,15],
                legend: {},
                rotate: true,
                xAxis: {
                    disableGrid: true,
                    rotateLabel: true
                },
                yAxis: {
                    gridType: "dash",
                    dashLength: 2,
                    data: [{
                        position: 'left'
                    }, {
                        position: 'right'
                    }]
                },
                extra: {
                    line: {
                        type: "straight",
                        width: 2
                    }
                },
                index: 0
            },
                        x: ''
        };
    },
    mounted() {
        this.xxx();
    },
    methods: { 
        xxx() {
                api.xxx({
                x: this.x
            }, res=>{
                console.log(res)
                let {data} = res
                if(data.length>0){
                    let arr = [], arr1=[], arr2=[]
                    data.forEach(item=>{
                        arr.push(item[0])
                        
                        if(item[1]>=0){
                            
                            arr1.push(item[1])
                        }else{
                            
                            arr2.push(item[1])
                        }
                    })
                   let res = {
                    categories: arr,
                    series: [
                      {
                        name: "增长率趋势",
                        data: arr1,
                        index: 0
                      },
                      {
                        name: "增长率趋势",
                        data: arr2,
                        index: 1
                      },
                    ]
                  };
                this.chartData = JSON.parse(JSON.stringify(res));
                }
            })
        },
    }
};
</script>
<style lang="scss" scoped>
@import url('@/css/common.css');
@import url('@/css/analysis.css');
</style>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容