bj-component-library v1.0.9

bj-component-library

1. 安装包
npm install bj-component-library


2. main.js引入
import BjComponentLibrary from 'bj-component-library'
Vue.use(BjComponentLibrary)


3. # 页面使用
 <baseLineChart  ref="chart" :option="options"></baseLineChart>
 
4. # 配置options //只有id是必填 其他均可不填
options: {
        id: 'hero',//唯一标识  ！！必填
        dataset: [  //图表展示数据 
          { categories: '苹果', value: 10000 },
          { categories: '三星', value: 34000 },
          { categories: '小米', value: 23000 },
          { categories: 'oppo', value: 54000 },
          { categories: 'vivo', value: 34000 },
        ],
        autoHover:true,//类目自动轮播
        category:'categories',//指定dataset数据指定类目
        alias:'a,b',//指定dataset数据结构的key值集合
        titleShow: true,//是否展示标题
        title: '主标题',//标题名字
        subtext: '副标题',//副标题名字
        titleColor: '#000',//标题颜色
        titleFontSize: '14',//标题字号
        titlePostion: '10',//标题离左侧距离
        subTitleColor: '#ccc',//副标题颜色
        subTitleFontSize: '12',//副标题字体
        tipFontSize: 14,//弹框文字字体
        tipColor: '#ccc',//弹框文字颜色
        gridL: '60',//图表距离左侧距离
        gridT: '60',//图表距离上面距离
        gridR: '60',//图表距离右侧距离
        gridB: '30',//图表距离底部距离
        //图例配置
        selectedMode: 'multiple',//图例选择的模式 single multiple false
        legend: true,//开启图例
        itemWidth: 30,//图例宽度
        itemHeight: 15,//图例高度  
        legendOrient: 'horizontal',//图例列表的布局朝向 horizontal vertical
        legendPostion: 'right',//图例对齐方式 left right center
        legendTop: 10,//图例距离顶部高度
        legendRight: 10,//图例距右侧距离
        legendColor: '#000',//图例字体颜色
        legendFontSize: '12',//图例字体大小
        //x轴配置
        xAxisName: 'x轴名字',//x轴名字
        nameColor: '#ccc',//x,y轴字体颜色
        xNameFontSize: 12,//x轴字体大小  
        boundaryGap: true,//坐标轴两边留白策略 true false 默认true
        lineColor: '#fff',//x,y坐标网格颜色
        xAxisInverse: false,//反向x轴坐标轴
        xAxisShow: true,//x轴是否展示
        xAxisSplitLineShow: true,//x轴网格线展示 默认false
        xAxisinterval: 'auto',//坐标轴刻度标签的显示间隔 隔几个显示刻度 auto或者数字
        xAxisRotate: 30,//刻度标签旋转的角度
        //y轴配置
        yAxisName: 'y轴名字',//y轴名字
        yNameFontSize: 12,//y轴字体大小  
        yAxisInverse: false,//反向y轴坐标轴
        yAxisShow: true,//y轴是否展示
        splitNumber: 10,//y轴的分割段数
        yAxisSplitLineShow: true,//y轴网格线展示 默认false
        //series配置
        symbol: true,//标记的点 默认没有 开启是圆点
        smooth: true,//线段是否平滑
        symbolSize: 10,//标记的点的大小
        linePropColor: '#000',//线的颜色
        lineWidth: 2,//线的宽度
        lineType: 'solid',//线的类型 solid dashed dotted 默认solid
        symbolColor: 'purple',//点的颜色
        labelShow: true,//图形上的文本标签开启
        labelShowFontSize: 10,//图形上的文本字体大小
        labelShowColor: '#000',//图形上的文本字体颜色
        labelShowFontWeight: 500,//图形上的文本字体粗细
        step: false,//是否是阶梯线图
      }