v-charts使用-柱状图属性

菜鸟学习之路
可查看vue-echarts图表使用 https://blog.csdn.net/weixin_48399505/article/details/130584489

1.安装v-charts
npm i v-charts echarts -S
2.全局引用
在main里面引入
import vcharts from 'v-charts'
Vue.use(vcharts )
[v-charts官网地址](https://v-charts.js.org/)

代码

<ve-histogram :data="chartData" :extend="extend" :legend-visible="false"></ve-histogram>

   data() {
    return {
      extend: {
        // x轴的文字倾斜
        "xAxis.0.axisLabel.rotate": 45,
        yAxis: {
          //是否显示y轴线条
          axisLine: {
            show: true,
          },
          // 纵坐标网格线设置，同理横坐标
          splitLine: {
            show: false,
          },
          // 线条位置
          position: "left",
        },
        xAxis: {
          axisLine: {
            show: true,
          },
        },
        series: {
          label: { show: true, position: "top" },
        },
        //数据过多时出现横向滚动条
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 50,
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 50,
          },
        ],
      },
      chartData: {
          columns: ["data", "number"],第一个参数为维度(横轴，例如时间)，其他参数为指标
          rows: [
          { data: "1/1", number: 1393 },
          { data: "1/2", number: 3530 },
          { data: "1/3", number: 2923 },
          { data: "1/4", number: 1723 },
          { data: "1/5", number: 3792 },
          { data: "1/6", number: 4593 },
        ],
      },
    };

extend属性里的series的label图形上的文本标签，可用于说明图形的一些数据信息。show是否展示数据

显示结果为：在这里插入图片描述

:legend-visible=“true” 隐藏图标的图例
显示结果为：
在这里插入图片描述
y轴只显示一条线，x轴文字倾斜

extend：{
// x轴的文字倾斜
    xAxis: {
       axisLabel: {
            rotate: 45,x轴的文字倾斜(范围：-90~90)
       }
    },     
    yAxis: {
          axisLine: {show: true},
          position: "left",
        },
}

显示结果为：
在这里插入图片描述

文字竖直显示

  xAxis: {
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              return value.split("").join("\n");
            },
          },
        },

显示结果为：
在这里插入图片描述

纵坐标网格线设置，同理横坐标

 splitLine: {
    show: false,
  },

显示结果为：
在这里插入图片描述

修改别名

<ve-histogram :data="chartData" :extend="extend" :legend-visible="false" :settings="chartSet"></ve-histogram>
:settings属性里的labelMap
 data() {
    return {
      //设置chart属性
      chartSet: {
        labelMap: {
          number: "访问用户",
        },
       },
       }
      }

  显示结果为：

在这里插入图片描述

无数据是显示暂无数据
 <ve-line  :data="chartData" :data-empty="dataEmpty"></ve-line>
<script>
import 'v-charts/lib/style.css' 引入css样式
export default {
  data() {
    return {
      dataEmpty: true,是否显示暂无数据
      extend: {
        yAxis: {
          //是否显示y轴线条
          axisLine: {
            show: false,
          },
        },
        xAxis: {
        axisLine: {
            show: false,
          },
         }
       }
     }
   }

显示结果为：
在这里插入图片描述

设置柱状图宽度

series: {
  label: { show: true, position: "top" },
  barMinWidth: 150,最小宽度
  barmaxWidth: 150,最大宽度
  barWidth : 40%,自适应宽度
},

显示结果为：
在这里插入图片描述

数据过多滚动条展示

在这里插入图片描述

v-charts使用-柱状图属性

悦读