<template>
  <div id="chart">
    <side-nav :nav="navData" />

    <border-box-7 class="attention" id="attention">
      <div class="title">Attention</div>

      <div class="text-info">
        下列组件颜色配置均绑定在节点的colors属性上
      </div>

      <div class="text-info">
        若未绑定将自动使用默认配色
      </div>

      <div class="text-info">
        colors所绑变量应为hex十六进制色的数组,示例如下
      </div>

      <highlight-code>
&lt;chart :data="data" :colors="color" /&gt;
      </highlight-code>

      <highlight-code>
// 修改默认配色方案 可直接修改./src/config/color.js
colors: ['#9cf4a7', '#66d7ee', '#eee966', '#a866ee', '#ee8f66', '#ee66aa']
// 数组内颜色将自动循环使用
      </highlight-code>

      <div class="text-info">
        如在特殊颜色配置属性中使用colors关键字,将自动将该属性配置指向colors
      </div>

      <div class="text-info" id="column-chart">
        下列组件均不再展示colors属性绑定的变量
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <column-chart :data="columnChartData1" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Column-Chart</div>
        <highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  data: [
    { // 必须 允许空位 空位数据不参与绘制
      data: [180, 290, 420, 200, 350, 219],
      // 非必须 可单独设置该列数据填充色 多个颜色自动渐变 允许colors指代
      fillColor: ['#247efc', '#ff2fdb']
    }, ...
  ],
  x: {
    // 必须 允许空位 空位保留占位
    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
  },
  labelLine: {
    // 非必须 若不配置 自动使用全角色 多个颜色 循环使用
    color: '#2b7bfb',
    // 非必须
    data: ['车流量'],
    // 非必须 rect | rectangle 正方形 或长方形
    type: 'rectangle'
  }
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <column-chart :data="columnChartData2" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Column-Chart</div>
        <highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
// 相同配置不再赘述
data: {
  x: {
    // 非必须 设置是否绘制网格
    grid: true,
    // 非必须 设置网格类型 line | dashed 虚实线
    gridType: 'dashed'
  },
  y: {
    min: 0, // 非必须 强制设定该轴最小值
    max: 450, // 非必须 强制设定该轴最大值
    unit: '次', // 非必须 设置该轴单位
    grid: true,
    gridColor: '#333' // 非必须 设置网格颜色 允许colors指代
  }
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <column-chart :data="columnChartData3" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Column-Chart</div>
        <highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
// 相同配置不再赘述
data: {
  // 非必须 配置该项 将绘制背景色
  showColumnBG: true,
  // 非必须 可设置背景色 多个颜色将自动循环使用
  bgColor: 'rgba(200, 200, 200, 0.2)'
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <column-chart :data="columnChartData4" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Column-Chart</div>
        <highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
// 相同配置不再赘述
data: {
  data: [
    {
      data: [180, 290, 420, 200, 350, 219],
      fillColor: '#247af7'
    },
    {
      data: [
        [32, 110, 75],
        [66, 80, 15],
        [125, 136, 116],
        [110, 66, 67],
        [84, 20, 50],
        [69, 28, 45]
      ],
      fillColor: ['#47bf97', '#292163', '#fafb5d']
    },
    {
      data: [250, 120, 350, 333, 125, 200],
      fillColor: '#ff23d4'
    }
  ],
  x: {
    data: [ '布拉迪斯拉发', '斯里巴加湾市', ...],
    // 非必须 旋转该轴文字以适应长标签 仅在轴生效
    rotate: true,
    // 非必须 设置该轴偏移
    offset: 60,
    // 设置该轴宽度或长度 | unitHeight
    unitWidth: 10
  }
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <column-chart :data="columnChartData5" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Column-Chart</div>
        <highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
// 相同配置不再赘述
data: {
  data: [
    x: {
      min: 0,
      max: 450,
      unit: '次',
      grid: true,
      gridColor: '#333'
    },
    y: {
      data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
    },
    // 非必须 配置该项可以绘制圆角柱
    columnType: 'round',
    // 非必须 水平柱状图需配置该项
    horizon: true,
    showColumnBG: true
},
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <column-chart :data="columnChartData6" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Column-Chart</div>
        <highlight-code>
&lt;column-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
// 相同配置不再赘述
data: {
  x: {
    // 非必须 配置该项将不绘制坐标线
    noAxisLine: true,
    // 非必须 配置该项将不绘制坐标刻度标识
    noAxisTag: true
  },
  y: {
    noAxisLine: true,
    noAxisTag: true
  }
},
        </highlight-code>
      </div>
      <div id="radar-chart" />
    </border-box-7>

    <border-box-7 class="chart-item">
      <radar-chart :data="radarChartData1" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Radar-Chart</div>
        <highlight-code>
&lt;radar-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  data: [
    {
      data: [450, 50, 450, 50, 450, 50] // 必须
    },
    {
      data: [50, 450, 50, 450, 50, 450]
    }, ...
  ],
  label: {
    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'] // 必须
  },
  // 非必须 不配置该项则不绘制底部label
  labelLine: {
    data: ['同期', '环期']
  }
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <radar-chart :data="radarChartData2" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Radar-Chart</div>
        <highlight-code>
&lt;radar-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  data: [
    {
      data: [450, 50, 450, 50, 450, 50],
      dashed: true // 非必须 为真时绘制虚线
    },
    {
      data: [50, 450, 50, 450, 50, 450],
      lineColor: '#9cf4df', // 非必须 可配置改数据线条颜色
      fillColor: 'rgba(238, 233, 108, 0.5)' // 非必须 可配置改数据填充颜色
    }
  ],
  label: {
    data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
    color: 'colors', // 非必须 可配置文字颜色
    fontSize: 10 // 非必须 可配置文字大小
  },
  labelLine: ['同期', '环期'],
  rayLineType: 'dashed', // 非必须 设置径向射线为虚线
  rayLineColor: 'colors', // 非必须 设置径向射线颜色
  ringNum: 5, // 非必填 设置环线个数
  ringType: 'polyline', // 非必须 设置环线为折线
  ringFillType: 'cover', // 非必须 设置环线填充颜色类型为cover
  ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'], // 非必须 设置环线填充色
  ringLineType: 'line', // 非必须 设置环线线条为实线
  ringLineColor: 'rgba(156, 244, 233, 0.2)', // 非必须 设置环线线条颜色
  rayLineOffset: Math.PI * -1.5, // 非必须 设置雷达图旋转偏移
  radius: 0.8, // 非必须 设置雷达图最大环线半径
  max: 550 // 非必须 设置雷达图数据最大值
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <radar-chart :data="radarChartData3" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Radar-Chart</div>
        <highlight-code>
&lt;radar-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
// 相同配置不再赘述
data: {
  ringFillColor: ['rgba(61, 231, 201, 0.1)'],
  ringFillType: 'mulCover', // 非必须 设置环线填充颜色类型为mulCover
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <radar-chart :data="radarChartData4" :colors="colors" class="chart" />

      <div class="config-info">
        <div class="title">Radar-Chart</div>
        <highlight-code>
&lt;radar-chart :data="data" :colors="colors" /&gt;
        </highlight-code>

        <highlight-code>
// 相同配置不再赘述
data: {
  ringFillColor: ['rgba(61, 231, 201, 0.1)'],
  ringFillType: 'ring', // 非必须 设置环线填充颜色类型为ring
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <capsule-chart :data="capsuleChartData" class="chart" />

      <div class="config-info">
        <div class="title">Capsule-Chart</div>
        <highlight-code>
&lt;capsule-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  // 必填项
  data: [
    {
      value: 85,
      title: '收费系统'
    },...
  ],
  // 必填项 依次循环使用
  color: ['#00baff', '#3de7c9', ...]
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item" :reverse="true">
      <arc-ring-chart :data="arcRingChartData" class="chart" />
      <div class="config-info">
        <div class="title">Arc-Ring-Chart</div>

        <highlight-code>
&lt;capsule-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  // 必填项
  data: [
    {
      value: 38,
      title: '监控系统'
    },...
  ],
  // 必填项 依次循环使用
  color: ['#00c0ff', '#3de7c9', ...]
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <concentric-arc-chart :data="concentricArcChartData" class="chart" />

      <div class="config-info">
        <div class="title">Concentric-Arc-Chart</div>

        <highlight-code>
&lt;concentric-arc-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  // 必填项
  data: [
    {
      value: 0.38,
      title: '8小时以内'
    },...
  ],
  // 必填项 多个颜色自动生成渐变色
  color: ['#00c0ff', '#3de7c9']
  arcArea: [0.3, 0.7],           // 非必须
  arcGap: 5,                     // 非必须
  fontSize: 12                   // 非必须
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item" :reverse="true">
      <ring-chart :data="ringChart1" class="chart" />

      <div class="config-info">
        <div class="title">Ring-Chart</div>

        <highlight-code>
&lt;ring-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  // 必填项
  data: [
    {
      value: 1315,
      title: '收费站'
    },...
  ],
  // 必填项 依次循环使用
  color: ['#00baff', '#3de7c9'],
  // 为false时 无动态效果
  active: true
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <ring-chart :data="ringChart2" class="chart" />

      <div class="config-info">
        <div class="title">Ring-chart</div>

        <highlight-code>
&lt;ring-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  data: [
    {
      value: 1315,
      title: '收费站'
    },...
  ],
  // 非必须 依次循环使用
  color: ['#00baff', '#3de7c9'],
  // 为true时 有动态效果
  active: false,
  // 非必须 该项可设置百分比精度 active为false时无效
  // fixed: 2
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item" :reverse="true">
      <polyline-chart :data="polylineChartData1" class="chart" />

      <div class="config-info">
        <div class="title">Polyline-chart</div>

        <highlight-code>
&lt;polyline-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  data: [
    {
      // 必填项 存在空位时 该点忽略
      data: [99.81, '', ..., '', 99.23, 99.62],
      // 非必须 配置此项 将进行颜色填充
      fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
      // 非必须 配置此项可更改数据点颜色
      pointColor: '#00db95',
      // 非必须 配置此项可更改线条颜色
      lineColor: '#ffc53d',
      // 非必须 默认为折线
      // 可选项有 polyline 折线 | smoothline 平滑曲线 | column 柱状
      type: 'polyline'
      // 默认为false 实线 非必须
      dashed: true
    },...
  ],
  // 非必须 依次循环使用
  color: ['#00baff', '#3de7c9', ...],
  x: {
    // 必填项 不想显示底部刻度 可以全留空位
    data: [ '10/01', '', ..., '', '10/23' ],
    // unit: '日期'     // 非必须 单位展示
    // fontSize: 20     // 非必须 x轴刻度字体大小
    // offset: 30       // 非必须 x轴向上偏移 此处未配置
  },
  y: {
    min: 96,            // 非必须 y轴最小值 未配置则自动根据数据计算
    max: 100,           // 非必须 y轴最大值 未配置则自动根据数据计算
    fixed: 2,           // 非必须 y轴刻度精度
    num: 10,            // 非必须刻度个数 默认为10 数据范围不足10则自动缩减
    unit: '%'           // 非必须 单位展示
    // fontSize: 20     // 非必须 x轴刻度字体大小
    // offset: 30       // 非必须 x轴向上偏移
  },
  // boundaryGap: false // 非必须 配置为true 将不贴合边界进行绘制
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <polyline-chart :data="polylineChartData2" class="chart" />

      <div class="config-info">
        <div class="title">Polyline-chart</div>

        <highlight-code>
&lt;polyline-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  data: [
    {
      data: [99.81, ..., 99.81, 99.56],
      fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
      pointColor: '#00db95',
      type: 'polyline'
    },
    {
      data: [97.81, ..., 97.23, 97.62],
      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
      type: 'smoothline'
    }
  ],
  color: ['#00baff', '#3de7c9', ...],
  x: {
    data: ['10/01', '', ..., '', '10/23']
  },
  y: {
    fixed: 2,
    unit: '%'
  },
  boundaryGap: true
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item" :reverse="true">
      <polyline-chart :data="polylineChartData3" class="chart" />

      <div class="config-info">
        <div class="title">Polyline-chart</div>

        <highlight-code>
&lt;polyline-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: {
  data: [
    {
      data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
      columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
      type: 'column'
    },
    {
      data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
      fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
      type: 'smoothline'
    }
  ],
  color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
  x: {
    data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
  },
  y: {
    fixed: 2,
    unit: '%'
  },
  boundaryGap: true
}
        </highlight-code>
      </div>
    </border-box-7>

    <border-box-7 class="chart-item">
      <polyline-chart :data="polylineChartData4" class="chart" />

      <div class="config-info">
        <div class="title">Polyline-chart</div>

        <highlight-code>
&lt;polyline-chart :data="data" /&gt;
        </highlight-code>

        <highlight-code>
data: [
        data: [
          {
            data: [3, 4.5, 4, 6, 5, 4, 3],
            dashed: true
          },
          {
            data: [0.5, 1, 0.8, 3, 2, 1.5, 0.5],
            fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
          },
          {
            data: [1, 3, 2, 4, 3, 2, 1],
            type: 'smoothline',
            fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
          },
          {
            data: [2, 2.5, 3, 5, 4, 3, 2],
            type: 'column',
            columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
          }
        ],
        x: {
          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
        },
        y: {
          max: 6,
          min: 0,
          unit: '单位'
        },
        labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
        color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
        boundaryGap: true
}
        </highlight-code>
      </div>
    </border-box-7>

    <!-- <highlight-code class="chart-item" :reverse="true">
      <polyline-chart :data="polylineChartData" class="chart" />

      <div class="config-info">
        <div class="header">Polyline-chart</div>
        <pre>
        </pre>
      </div>
    </highlight-code> -->

  </div>
</template>

<script>
export default {
  name: 'Chart',
  data () {
    return {
      navData: [
        {
          title: 'Attention',
          target: 'attention'
        },
        {
          title: 'Column-Chart',
          target: 'column-chart'
        },
        {
          title: 'Radar-Chart',
          target: 'radar-chart'
        }
      ],

      columnChartData1: {
        data: [
          {
            data: [180, 290, 420, 200, 350, 219],
            fillColor: ['#247efc', '#ff2fdb']
          }
        ],
        x: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
        },
        y: {
        },
        labelLine: {
          color: '#2b7bfb',
          data: ['车流量'],
          type: 'rectangle'
        }
      },

      columnChartData2: {
        data: [
          {
            data: [180, 290, 420, 200, 350, 219],
            fillColor: ['#247efc', '#ff2fdb']
          }
        ],
        x: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
          grid: true,
          gridType: 'dashed'
        },
        y: {
          min: 0,
          max: 450,
          unit: '次',
          grid: true,
          gridColor: '#333'
        },
        labelLine: {
          color: '#2b7bfb',
          data: ['车流量'],
          type: 'rectangle'
        }
      },

      columnChartData3: {
        data: [
          {
            data: [180, 290, 420, 200, 350, 219],
            fillColor: ['#247efc', '#ff2fdb']
          }
        ],
        x: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
        },
        y: {
          min: 0,
          max: 450,
          unit: '次',
          grid: true,
          gridColor: '#333'
        },
        labelLine: {
          color: '#2b7bfb',
          data: ['车流量'],
          type: 'rectangle'
        },
        showColumnBG: true,
        bgColor: 'rgba(200, 200, 200, 0.2)'
      },

      columnChartData4: {
        data: [
          {
            data: [180, 290, 420, 200, 350, 219],
            fillColor: '#247af7'
          },
          {
            data: [
              [32, 110, 75],
              [66, 80, 15],
              [125, 136, 116],
              [110, 66, 67],
              [84, 20, 50],
              [69, 28, 45]
            ],
            fillColor: ['#47bf97', '#e3b4a2', '#fafb5d']
          },
          {
            data: [250, 120, 350, 333, 125, 200],
            fillColor: '#ff23d4'
          }
        ],
        x: {
          data: [
            '布拉迪斯拉发',
            '斯里巴加湾市',
            '达累斯萨拉姆',
            '亚的斯亚贝巴',
            '特古西加尔巴',
            '下诺夫哥罗德'
          ],
          offset: 60,
          rotate: true,
          unitWidth: 10
        },
        y: {
          min: 0,
          max: 450,
          unit: '次',
          grid: true,
          gridColor: '#333'
        },
        labelLine: {
          color: ['#247af7', '#47bf97', '#e3b4a2', '#fafb5d', '#ff23d4'],
          data: ['玩具', '书本', '食品', '服装', '娱乐'],
          type: 'rectangle'
        }
      },

      columnChartData5: {
        data: [
          {
            data: [250, 120, 350, 333, 125, 200],
            fillColor: ['#247efc', '#ff2fdb']
          }
        ],
        x: {
          min: 0,
          max: 450,
          unit: '次',
          grid: true,
          gridColor: '#333'
        },
        y: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
        },
        labelLine: {
          color: '#2b7bfb',
          data: ['车流量'],
          type: 'rectangle'
        },
        columnType: 'round',
        horizon: true,
        showColumnBG: true
      },

      columnChartData6: {
        data: [
          {
            data: [250, 120, 350, 333, 125, 200],
            fillColor: ['#247efc', '#ff2fdb']
          }
        ],
        x: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
          noAxisLine: true,
          noAxisTag: true,
          offset: 10
        },
        y: {
          min: 0,
          max: 450,
          noAxisLine: true,
          noAxisTag: true,
          offset: 1
        },
        labelLine: {
          color: '#2b7bfb',
          data: ['车流量'],
          type: 'rectangle'
        },
        showColumnBG: true
      },

      radarChartData1: {
        data: [
          {
            data: [450, 50, 450, 50, 450, 50]
          },
          {
            data: [50, 450, 50, 450, 50, 450]
          }
        ],
        label: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳']
        },
        labelLine: {
          data: ['同期', '环期']
        }
      },

      radarChartData2: {
        data: [
          {
            data: [450, 50, 450, 50, 450, 50],
            dashed: true
          },
          {
            data: [50, 450, 50, 450, 50, 450],
            lineColor: '#9cf4df',
            fillColor: 'rgba(238, 233, 108, 0.5)'
          }
        ],
        label: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
          color: 'colors',
          fontSize: 10
        },
        labelLine: {
          data: ['同期', '环期']
        },
        rayLineType: 'dashed',
        rayLineColor: 'colors',
        ringNum: 5,
        ringType: 'polyline',
        ringFillType: 'cover',
        ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'],
        ringLineType: 'line',
        ringLineColor: 'rgba(156, 244, 233, 0.2)',
        rayLineOffset: Math.PI * -1.5,
        radius: 0.8,
        max: 550
      },

      radarChartData3: {
        data: [
          {
            data: [450, 50, 450, 50, 450, 50]
          },
          {
            data: [50, 450, 50, 450, 50, 450]
          }
        ],
        label: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
          color: 'colors',
          fontSize: 10
        },
        labelLine: {
          data: ['同期', '环期']
        },
        rayLineType: 'dashed',
        rayLineColor: 'colors',
        ringNum: 5,
        ringType: 'polyline',
        ringFillType: 'mulCover',
        ringFillColor: ['rgba(61, 231, 201, 0.1)'],
        ringLineType: 'line',
        ringLineColor: 'rgba(156, 244, 233, 0.2)',
        rayLineOffset: Math.PI * -1.5,
        radius: 0.8,
        max: 550
      },

      radarChartData4: {
        data: [
          {
            data: [450, 50, 450, 50, 450, 50]
          },
          {
            data: [50, 450, 50, 450, 50, 450]
          }
        ],
        label: {
          data: ['西峡', '周口', '南阳', '驻马店', '郑州', '洛阳'],
          color: 'colors',
          fontSize: 10
        },
        labelLine: {
          data: ['同期', '环期']
        },
        rayLineType: 'dashed',
        rayLineColor: 'colors',
        ringNum: 5,
        ringType: 'polyline',
        ringFillType: 'ring',
        ringFillColor: ['rgba(61, 231, 201, 0.3)', 'rgba(61, 231, 201, 0.1)'],
        ringLineType: 'line',
        ringLineColor: 'rgba(156, 244, 233, 0.2)',
        rayLineOffset: Math.PI * -1.5,
        radius: 0.8,
        max: 550
      },

      capsuleChartData: {
        data: [
          {
            value: 85,
            title: '收费系统'
          },
          {
            value: 44,
            title: '通信系统'
          },
          {
            value: 125,
            title: '监控系统'
          },
          {
            value: 110,
            title: '供配电系统'
          },
          {
            value: 66,
            title: '其他'
          }
        ],
        color: [
          '#00baff',
          '#3de7c9',
          '#ffffff',
          '#ffc53d',
          '#469f4b'
        ]
      },

      arcRingChartData: {
        data: [
          {
            value: 19,
            title: '监控系统'
          },
          {
            value: 16,
            title: '收费系统'
          },
          {
            value: 24,
            title: '通信系统'
          },
          {
            value: 14,
            title: '供配电系统'
          },
          {
            value: 27,
            title: '其他'
          }
        ],
        color: ['#00c0ff', '#3de7c9', '#fff']
      },

      concentricArcChartData: {
        data: [
          {
            value: 0.38,
            title: '8小时以内'
          },
          {
            value: 0.57,
            title: '24小时以内'
          },
          {
            value: 0.7,
            title: '48小时以内'
          },
          {
            value: 0.78,
            title: '72小时以内'
          },
          {
            value: 0.22,
            title: '大于72小时'
          }
        ],
        color: ['#00c0ff', '#3de7c9'],
        arcArea: [0.3, 0.7],
        arcGap: 5,
        fontSize: 12
      },

      ringChart1: {
        data: [
          {
            value: 1315,
            title: '收费站'
          },
          {
            value: 415,
            title: '监控中心'
          },
          {
            value: 90,
            title: '道路外场'
          },
          {
            value: 317,
            title: '其他'
          }
        ],
        color: [
          '#00baff',
          '#3de7c9',
          '#ffffff',
          '#ffc53d',
          '#469f4b'
        ],
        active: true
      },

      ringChart2: {
        data: [
          {
            value: 1315,
            title: '收费站'
          },
          {
            value: 415,
            title: '监控中心'
          },
          {
            value: 90,
            title: '道路外场'
          },
          {
            value: 317,
            title: '其他'
          }
        ],
        color: [
          '#00baff',
          '#3de7c9',
          '#ffffff',
          '#ffc53d',
          '#469f4b'
        ],
        active: false
      },

      polylineChartData1: {
        data: [
          {
            data: [
              99.81, 99.42, 99.56, 99.23, 99.62,
              99.36, 99.56, '', 99.81, 99.56,
              99.42, 99.56, '', '', 99.36,
              99.42, '', 99.56, '', '',
              99.56, 99.23, 99.62
            ],
            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
            pointColor: '#00db95',
            lineColor: '#ffc53d',
            type: 'polyline',
            dashed: true
          }
        ],
        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
        x: {
          data: [
            '10/01', '', '10/03', '', '10/05', '',
            '10/07', '', '10/09', '', '10/11', '',
            '10/13', '', '10/15', '', '10/17', '',
            '10/19', '', '10/21', '', '10/23'
          ]
        },
        y: {
          min: 96,
          max: 100,
          fixed: 2,
          num: 10,
          unit: '%'
        }
      },

      polylineChartData2: {
        data: [
          {
            data: [
              99.81, 99.42, 99.56, 99.23, 99.62,
              99.36, 99.56, '', 99.81, 99.56,
              99.42, 99.56, '', '', 99.36,
              99.42, '', 99.56, '', '',
              99.56, 99.23, 99.62
            ],
            fillColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
            pointColor: '#00db95',
            type: 'polyline'
          },
          {
            data: [
              97.81, 97.42, 97.56, 97.23, 97.62,
              97.36, 97.56, '', 97.81, 97.56,
              97.42, 97.56, '', '', 97.36,
              97.42, '', 97.56, '', '',
              97.56, 97.23, 97.62
            ],
            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
            type: 'smoothline'
          }
        ],
        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
        x: {
          data: [
            '10/01', '', '10/03', '', '10/05', '',
            '10/07', '', '10/09', '', '10/11', '',
            '10/13', '', '10/15', '', '10/17', '',
            '10/19', '', '10/21', '', '10/23'
          ]
        },
        y: {
          fixed: 2,
          unit: '%'
        },
        boundaryGap: true
      },

      polylineChartData3: {
        data: [
          {
            data: [99.81, 99.42, 99.56, 99.23, 99.62, 99.36, 99.56],
            columnColor: ['rgba(0, 186, 255, 0.3)', 'rgba(0, 186, 255, 0)'],
            type: 'column'
          },
          {
            data: [97.81, 97.42, 97.56, 100.23, 97.62, 97.36, 97.56],
            fillColor: ['rgba(0, 219, 149, 0.3)', 'rgba(0, 219, 149, 0)'],
            type: 'smoothline'
          }
        ],
        color: ['#00baff', '#3de7c9', '#ffffff', '#ffc53d', '#469f4b'],
        x: {
          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
        },
        y: {
          fixed: 2,
          unit: '%'
        },
        boundaryGap: true
      },

      polylineChartData4: {
        data: [
          {
            data: [3, 4.5, 4, 6, 5, 4, 3],
            dashed: true
          },
          {
            data: [0.5, 1, 0.8, 3, 2, 1.5, 0.5],
            fillColor: ['rgba(61, 231, 201, 0.5)', 'rgba(61, 231, 201, 0.1)']
          },
          {
            data: [1, 3, 2, 4, 3, 2, 1],
            type: 'smoothline',
            fillColor: ['rgba(255, 197, 61, 0.4)', 'rgba(255, 197, 61, 0.1)']
          },
          {
            data: [2, 2.5, 3, 5, 4, 3, 2],
            type: 'column',
            columnColor: ['rgba(52, 36, 50, 0.8)', 'rgba(52, 36, 50, 0.4)']
          }
        ],
        x: {
          data: ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
        },
        y: {
          max: 6,
          min: 0,
          unit: '单位'
        },
        labelLine: ['收费系统', '收费系统', '监控系统', '供配电系统'],
        color: ['#00baff', '#3de7c9', '#ffc53d', '#342432'],
        boundaryGap: true
      },

      colors: ''
    }
  }
}
</script>

<style lang="less">
#chart {
  display: flex;
  flex-direction: column;

  .attention {
    width: 80%;
    margin-left: 20%;
    text-align: center;
    margin-bottom: 20px;

    .highlight-code {
      margin: -40px 0px;
    }
  }

  .chart-item {
    width: 80%;
    min-height: 300px;
    display: flex;
    flex-direction: row;
    margin: 20px 0px;
    margin-left: 20%;
    align-items: center;
  }

  .chart {
    width: 400px;
    height: 300px;
    flex-shrink: 0;
  }

  .config-info {
    padding: 0px 30px;
    display: flex;
    flex-direction: column;

    .highlight-code {
      margin: -30px 0px;
    }
  }
}
</style>
