美文网首页
uniapp+ucharts实现正负轴

uniapp+ucharts实现正负轴

作者: 子夜照弦歌 | 来源:发表于2022-06-21 11:33 被阅读0次

    参考文章: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>
    
    

    相关文章

      网友评论

          本文标题:uniapp+ucharts实现正负轴

          本文链接:https://www.haomeiwen.com/subject/dkzsvrtx.html