v-charts使用总结(随时补充)

柱状图、折线图、环图的常用配置(配置连接地址https://v-charts.js.org/#/line)

:data 绑定基本数据

{
  // 第一个参数为维度(就是横轴，例如时间)，剩余为指标（就是legend）
  columns: ['日期', '访问用户', '下单用户', '下单率'],
  // rows为数组，每个指标各有一条柱，并标注出每个指标的值
  rows: [
            { '日期': '2018-01-01', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '2018-01-02', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '2018-01-03', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '2018-01-05', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '2018-01-10', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
            { '日期': '2018-01-20', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
],
  // rows为对象 -- 散点图可以用
  rows: {
    name1: [
      {month:'二月', key1:'', key2:'', key3: ''}
    ],
    name2: [
      {month:'三月', key1:'', key2:'', key3: ''}
    ],
  }
}

:settings 绑定基本配置

{
  // 声明维度 -- 默认就是columns的第一个
  dimension: ['日期'],

  // 设置横轴为连续的数值轴，如时间，数字等
  xAxisType: 'value(横轴必须是数字)', 'time(横轴是时间)'

  // 声明指标 -- columns的第二个开始
  metrics: ['key1', 'key2', 'key3'],

  // 指标的别名 -- 后台数据给的指标大多时候不为中文，但是给用户看的肯定是中文的
  labelMap: {
    key1: 'value指标',
    key2: 'value指标',
    key3: 'value指标',
    key4: '举个例子显示百分比'
  },

  // 修改图例别名 -- 就是顶部的那个几个色块，官网文档没用，绑定在legend里设置
  legendName:{
    'key1': '访问用户 total: 10000'
  },
  
  // 指标所在的轴 -- 设置左右双Y轴用
  axisSite: { right: ['key4'] },

  // 柱图 -- 堆叠key1、key2、key3在一条轴上显示
  stack: { 'month': ['key1', 'key2', 'key3'] },

  // 柱图 -- 设置其中一个指标为折线图（需要引入折线图组件）
  showLine: ['key3'],

  // 纵轴左右坐标轴标题
  yAxisName: ['月度课程发布情况', 'key4Name'],

  // 设置常用数据格式 -- 指标的单位
  // 可以使用 numerify™ 的格式来配置显示，具体的格式支持和插件扩展写法可以参考 numerify™ 文档
  // 也支持使用回调函数的方式function (v) {return v + ' ￥'}
  // 折线图 -- 用yAxisType
  yAxisType: ['KMB(对应yAxisName第一位)', 'percent(对应yAxisName第二位)'],
  // 饼图环图 -- 用dataType
  dataType: {
    'key1': 'KMB', //数字转为RMB(基本的数据格式)
    'key2': 'percent', //百分比格式(基本的数据格式)
    'key3': 'normal' //千分位(基本的数据格式)
  },

  // 数据格式为 percent 保留的小数点
  digit: 2,

  // 设置数据的排序方式，例如根据指标key1升序（实际效果好像是反的）
  dataOrder: {
    { label: 'key1', order: 'asc' }
  },

  // 折线图 -- 填充整个面积的色块
  area: true

  // 色块透明度
  opacity: 0.5,

  // 环图 -- 限制最大数量
  limitShowNum: 3,

  // 环图 -- 内外径
  radius: [50, 70],

  // 环图 -- 纵轴中心位置，px或者%或'center'等
  offsetY: '45%',

  // 环图 -- 支出来的那个线后面的文字
  label: {
    show: false
  },
  // 柱图 -- 显示柱状图数据值，并把具体数字放在顶部
  label: { show: true, position: "top" }
  // 折线 -- 显示具体数据数值
  label: { normal: { show: true } }

  // 环图 -- 支出来的那个线
  labelLine: {
    show: false
  },

  // 环图 -- 玫瑰图
  roseType: 'radius'

  // 环图饼图 -- 是否放上去放大
  hoverAnimation: false
}

　:legend图例

{
  // 调整图例区的位置，单位(数字，百分比，center/left位置)
  right: 0,

  // 是否可以点击，隐藏点击的内容
  selectedMode:false,

  // 图例的宽度，不够会换行
  width: 100,
  
  //样式
  textStyle: {
    color: '#BED1EF'
  }

}

　　grid绘制整个区域

{
  // 调整位置
  bottom: 0,

  //调整大小啥的
  width: 200
}

　　title：环形图中间的文字说明

import 'echarts/lib/component/title'; //必须引入这个组件，默认不带title
{ 
  // 文字啥的，用\n可以换行
  text: '',

  //调整位置
  x: 'center',
  top: '35%',

  //调整样式
  textStyle: {
    fontSize: 20,
    fontWeight: 'normal'
  }
}

:extend 最终所有的配置都可以用这个值重新设置

{

  // x轴的文字倾斜
  'xAxis.0.axisLabel.rotate': 45,

  series: {
      //环图 -- 圆心位置
      center: ['50%', '50%'],
      ///环图颜色顺序，颜色不是按你的列表一一对应的，需要手动设置顺序
      itemStyle: {
        normal: {
          color: (params)=> {
            return this.colorList[params.dataIndex]
          }
        }
      },
      barWidth : 20,//柱图 -- 条宽度
　　　 barMaxWidth: 20, // 柱状图---条的最大宽度
  },

yAxis: {
    // 纵坐标网格线设置，同理横坐标
    splitLine:{
      lineStyle: {
        color: '#999'
      }
    },
    // 纵坐标字体颜色，同理横坐标
    axisLine:{
      lineStyle:{
        color: '#BED1EF'
      }
    }
  } 
}

v-charts使用总结(随时补充)

猜你喜欢