Echarts 数据导入方式汇总

一、坐标轴数据

    1、横坐标-X轴

// 不写data,此时更据数据自适应
xAxis: {
  name: 'weekTime',   // 名称
  type: 'time',       // 类型,category-类目,value-数值,time-时间
},

xAxis: {
  name: 'weekTime',   // 名称
  type: 'category',   // 类型,category-类目,value-数值,time-时间
  // 数据,最高级显示,不会被改变
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},

  2、纵坐标-Y轴 

// 默认获取图中数据的最大最小值自适应坐标轴
yAxis: {
  name: 'weekTime',
  type: 'value',
},

// 设置最大最小值、间隔
yAxis: {
  name: 'weekTime',
  type: 'value',
  min:'2',       // 最小值
  max: '10',     // 最大值
  interval: 10    // 间隔
  minInterval: 1  // 最小间隔
  maxInterval: 20 // 最大间隔
},

// 固定y轴
yAxis: {
  name: 'weekTime',
  type: 'value',
  // 数据,最高级显示,不会被改变
  data: [1, 2, 3, 4, 5, 6, 7]
},

二、 图表数据

   1、series 中设置 data
      这种方式数据格式只能为数组(一维数组、二维数组、多维数组)

series: [
 {
  name: '绳索1',
  type: 'line',
  smooth: true,     // 光滑曲线
  // 第一个数为X轴坐标,第二个数为Y轴坐标,当未设置X轴Y轴上的刻度时,可自动根据该数据自适应
  data: [['2012-03-1', 150], ['2012-3-2', 230], ['2012-03-4', 224], ['2012-3-05', 218], ['2012-03-6', 135], ['2012-03-7', 147], ['2012-03-8', 260]]
 },
 {
  name: '绳索2',
  type: 'line',
  smooth: true,     // 光滑曲线
  // 只有Y轴数据,按照顺序对应X轴刻度
  data: [1, 2, 3, 4]
 }
]

2、dataset 中设置 source (数据集)

dataset: [
  {
    id: 0,   // 与 series 中 datasetIndex 进行数据绑定
    // 数据,Json格式,X轴 Y轴 可根据 Key 进行设置刻度
    source: [
      { weekTime: 'Mon', valueData: 11 },
      { weekTime: 'Tue', valueData: 12 },
      { weekTime: 'Wed', valueData: 8 },
      { weekTime: 'Thu', valueData: 3 },
      { weekTime: 'Fri', valueData: 6 }
    ]
  },
  {
    id: 1,
    // 数据,二维数组,第一行/列可以给出 维度名,第一列为 X轴 坐标,自动检测,可以不给出
    source: [
      ['product', '2015', '2016', '2017'],  
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  {
    id: 2,
    // 数据,Json,Key 为维度名,对应 Value 为图中数据,第一个 Key 对应的 Value 为 X轴 坐标
    source: {
      'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
      'count': [823, 235, 1042, 988],
      'score': [95.8, 81.4, 91.2, 76.9]
    }
  }
]

你可能感兴趣的:(#,Vue,#,Echarts,echarts,前端)