echats折线图、柱状图、饼状图三种图表 Json数据格式

一、柱状图：
1.1.展示 多种设备的 数据名称
  legend: {
    data: ['设备一', '设备2', 设备3', '设备4']
  },
     可能是：厂区，车间，设备，系统 （需要多种，且每种汇总方式不一样）--难点

1.2.X轴 一般是某时间
 xAxis: [
    {
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  同时这个时间还要下拉选：年，季度，月，周 （需要多种，且每种汇总方式不一样，单位都不一样）
1.3  单位，单位字段 数据表要加 --难点  

1.4.Y轴 取数值
series: [
    {
      name: '设备一',
      data: [320, 332, 301, 334, 390]
    },
    {
      name: '设备2',
      data: [220, 182, 191, 234, 290]
    },
    {
      name: '设备3',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    },
    {
      name: '设备4',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [98, 77, 101, 99, 40]
    }
  ]
   注意要带上 数值的单位，单位字段 数据表也要加.







二.饼状图
   （1）一张饼：
 series: [
    {
      name: '图表标题',
      type: 'pie',
      data: [
        { value: 40, name: '系统一' },
        { value: 38, name: '系统 2' },
        { value: 32, name: '系统 3' },
        { value: 30, name: '系统 4' },
        { value: 28, name: '系统 5' },
        { value: 26, name: '系统 6' },
        { value: 22, name: '系统 7' },
        { value: 18, name: '系统 8' }
      ]
    }
  ]
    

   （2）两张饼：

[
    {
      name: '厂区一',
      type: 'pie',
      data: [
        { value: 40, name: 'rose 1' },
        { value: 33, name: 'rose 2' },
        { value: 28, name: 'rose 3' },
        { value: 22, name: 'rose 4' },
        { value: 20, name: 'rose 5' },
        { value: 15, name: 'rose 6' },
        { value: 12, name: 'rose 7' },
        { value: 10, name: 'rose 8' }
      ]
    },
    {
      name: '厂区二',
      data: [
        { value: 30, name: 'rose 1' },
        { value: 28, name: 'rose 2' },
        { value: 26, name: 'rose 3' },
        { value: 24, name: 'rose 4' },
        { value: 22, name: 'rose 5' },
        { value: 20, name: 'rose 6' },
        { value: 18, name: 'rose 7' },
        { value: 16, name: 'rose 8' }
      ]
    }
  ]
2.2 总名称
2.3 数值对应名称 需要下拉选 可能是：厂区，车间，设备，系统 （需要多种，且每种汇总方式不一样）--难点
    下拉选之后 还要再次下拉选：具体厂区，具体车间，具体设备，具体系统 （选几种）

2.4 数值的单位    





三.折线图
3.1 数据名称
legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
3.2 横坐标
xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
3.3 单位
 yAxis: {
    type: 'value'
  }

3.4 纵坐标
[
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]

柱状、折线图 一般同时可展现不同时间或阶段 的 多种不同类型的数据--多个柱子 或  多条折线，饼状图展现的是 某段时间 各个数据的汇总--一般是单种数据。
每种图的数据格式都不一样，都要单独转换。