• v-chart使用的相关实例


    v-charts官网参考,有什么想要的图表,应该现在官网查,再去百度找

    https://v-charts.js.org/#/

    1、在安装v-charts以后可能会出现渲染不不出来的问题,可能是版本的问题,降版本到4.9即可

    npm i v-charts echarts@4.9.0 -S

    2、柱形图 + 折线图 双y坐标对齐

    <ve-histogram :data="chartData" :settings="chartSettings" :extend="chartExtend"></ve-histogram>

    在 chartExend 的data中,设置两个坐标轴的最小值,最大值,以及间距,就可以按照自己的想法控制他们的间距以及两条坐标轴对齐问题

                    this.chartExtend = {
                        'yAxis.0.min': 0, // yAxis.0:y轴左侧 //设置纵坐标的最小值
                        'yAxis.1.min': 0, // yAxis.0:y轴左侧 //设置纵坐标的最小值
                        'yAxis.0.max':Math.ceil(this.maxData[0]/5)*6, 
                        'yAxis.1.max':Math.ceil(this.maxData[1]/5)*6, 
                        'yAxis.0.interval': Math.ceil(this.maxData[0] / 5),
                        'yAxis.1.interval': Math.ceil(this.maxData[1] / 5),
                        series:{
                            label:{show:true, position:"inside"},
                            barWidth:"50%",
                            smooth:false
                        }                    
                    }

    这个data如果是需要从后端获取最小最大值的话,需要放在return中,并且在created或者mounted的函数中来赋值

    smooth 是来控制折线图中折现是曲线还是直线的,

    label 的属性是控制 柱状图折叠里的数据的,就是两个折叠的柱状图中的大小显示到柱状图中

  • 相关阅读:
    网页改版的A/B测试(A/B test)
    好看又实用的英文字体
    十大Web压力测试工具
    javascript中的setInterval()方法
    jquery中find方法和children方法的区别
    .net之路
    blur事件
    理解委托的两类必要方法
    jquery中的过滤操作
    推荐一个好的分区软件win7调整磁盘的大小
  • 原文地址:https://www.cnblogs.com/wanghao-boke/p/14264318.html
Copyright © 2020-2023  润新知