zoukankan      html  css  js  c++  java
  • 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 的属性是控制 柱状图折叠里的数据的,就是两个折叠的柱状图中的大小显示到柱状图中

  • 相关阅读:
    ReSharper Tips—GotoImplementation
    Possible multiple enumeration of IEnumerable
    Hello, Razor!
    自话自说——POI使用需要注意一个地方
    css中怎么设置透明度的问题
    记录排查国标直播流播放卡顿的问题
    互联网上做广告的优点
    C#、.Net经典面试题集锦(一)
    什么是MFC
    C/S与B/S 的区别
  • 原文地址:https://www.cnblogs.com/wanghao-boke/p/14264318.html
Copyright © 2011-2022 走看看