vue项目使用v-charts的柱形图的各种样式和数据配置

时间:2020-01-09
本文章向大家介绍vue项目使用v-charts的柱形图的各种样式和数据配置,主要包括vue项目使用v-charts的柱形图的各种样式和数据配置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

找了很多网上关于v-charts的柱形图使用,我发现我一模一样的配置就是没有效果,原来是因为我是按需引入的,

import VeHistogram from 'v-charts/lib/histogram';

Vue.component(VeHistogram.name, VeHistogram);

搞了半天,就grid的背景起了作用,后来改成了全部引入,才改得了e-charts官方配置文档的那些参数,因为没时间了,按需引入后面再搞回来,

import vCharts from 'v-charts';

Vue.use(vCharts);

v-charts文档:https://v-charts.js.org/#/histogram ,

e-charts官网文档地址:https://www.echartsjs.com/zh/option.html#dataZoom-inside.startValue ,

先来个配置完的效果图:

下面是我的页面的具体代码及配置:

//html部分

<ve-histogram
    class="myve"
    :data="chartData"
    :settings="vchartsConfig.setting"
    :extend="vchartsConfig.extend"
    ></ve-histogram>

//js部分
  data() {
    return {
// v-charts配置参数
      vchartsConfig: {
        setting:{
          // 别称
          labelMap: {
            'area': '地区',
            'count': '拓展数',
          },
        },
        extend: {
          title:{
            show:false,
            text:'实时数据',
            subtext:'各城市对应的拓展',
            // textAlign:'center',
          },
          // 图标顶部的标题及按钮
          legend:{
            show:false,
          },
          // backgroundColor:'red',//整个组件的背景颜色
          //X轴线
          xAxis: {
            // name: "地区",
            type:'category',
            show:true,
            // 坐标轴轴线
            axisLine:{
              show:false,
            },
            // 坐标轴刻度
            axisTick:{
              show:false,
            },
            // 坐标轴每项的文字
            axisLabel:{
              showMaxLabel:true,
              showMinLabel:true,
              color:'#3a3a3a',
              rotate:0, //刻度文字旋转,防止文字过多不显示
              margin:8,//文字离x轴的距离
              boundaryGap:true,
              // backgroundColor:'#0f0',
              formatter:(v)=>{
                // console.log('x--v',v)
                if(v.length>3){
                  return v.substring(0,3)+'...'
                }
                return v
              },
            },
            // X轴下面的刻度小竖线
            axisTick:{
              show:false,
              alignWithLabel:true,//axisLabel.boundaryGap=true时有效
              interval:0,
              length:4,//长度
            },
            // x轴对应的竖线
            splitLine: {
              show: false,
              interval: 0,
              lineStyle:{
                color:'red',
                backgroundColor:'red',
              }
            }
          },
          yAxis: {
            show:true,
            offset:0,
            // 坐标轴轴线
            axisLine:{
              show:false,
            },
            // x轴对应的竖线
            splitLine: {
              show: false,
            },
            // 坐标轴刻度
            axisTick:{
              show:false,
            },
            boundaryGap:false,
            axisLabel:{
              color:'#3a3a3a',
            },
          },
          
          // 滚动组件参数
          dataZoom:[
            {
              type: 'inside',
              show: true,
              xAxisIndex: [0],
              startValue: 0,
              endValue: 4,
              zoomLock:true,
            }
          ],

          // 柱形区域
          grid: {
            show: true,
            backgroundColor: "#FFF6F3",
            borderColor: "#FFF6F3",
            // containLabel:false,
          },

          // 每个柱子
          series(v) {
            // console.log("v", v);
            // 设置柱子的样式
            v.forEach(i => {
              console.log("series", i);
              i.barWidth = 20;
              i.itemStyle={
                barBorderRadius:[10,10,10,10],
                color:'#FF6633',
                borderWidth:0,
              };
              i.label={
                color:'#666',
                fontSize:'0.24rem',
                show:true,
                position:'top',
                // backgroundColor:'yellow',
              };

            });
            return v;
          },
        }
      },
      // v-chats列表数据
      chartData: {
        columns: ["area", "count"],
        rows: [
          { "area": "广州市", "count": 20 },
          { "area": "战狼3", "count": 30 },
          { "area": "2222", "count": 12 },
          { "area": "3333", "count": 42 },
        ],
      },

    };
  },

原文地址:https://www.cnblogs.com/itpyy/p/12171905.html