bizchart折线图案例
https://bizcharts.alibaba-inc.com/product/BizCharts4/demo/399
image.png

告警线数据

  • 告警设置 alert: true, count: Number
  • 不是告警的清除 count: null

image.png
image.png

bizchart3.8.0需要设置2个刻度

  1. const scale = {
  2.   date: {
  3.     alias: "日期",
  4.     type: "time",
  5.     tickCount: 10,
  6.     mask: 'HH:mm',
  7.   },
  8.   count: {
  9.     alias: "状态",
  10.     type: 'cat',
  11.     values: ['离线', '在线'],
  12.     range: [0, 1]
  13.   },
  14. };
  15. const alertScale = {
  16.   ...scale,
  17.   count: {
  18.     alias: "状态",
  19.     tickCount: 2,
  20.     max: 1,
  21.     min: 0,
  22.     range: [0, 1]
  23.   },
  24. }

bizchart4.x

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import {
  4.   Chart,
  5.   Line,
  6.   Legend,
  7.   Axis,
  8.   Tooltip,
  9.   Point,
  10.   View,
  11. } from "bizcharts";
  13. const scale = {
  14.   date: {
  15.     alias: "日期",
  16.     type: "time",
  17.     tickCount: 10,
  18.     mask: 'HH:mm',
  19.   },
  20.   count: {
  21.     alias: "状态",
  22.     type: 'cat',
  23.     values: ['离线', '在线'],
  24.     range: [0, 1]
  25.   },
  26. };
  28. LineChart.propTypes = {
  29.   dataSource: PropTypes.array.isRequired,
  30.   height: PropTypes.number,
  31.   padding: PropTypes.array,
  32. };
  34. LineChart.defaultProps = {
  35.   height: 360,
  36.   padding: [24, 16, 24, 24],
  37. }
  39. function LineChart({dataSource, height, padding}) {
  41.   const alertLine = dataSource.map((item) => {
  42.     return item.alert ? item : {...item, count: null};
  43.   });
  45.   return (
  46.     <Chart
  47.       autoFit
  48.       height={height}
  49.       padding={padding}
  50.       scale={{
  51.         count: {
  52.           sync: true,
  53.         },
  54.       }}
  55.       className='mb32'
  56.     >
  57.       <Tooltip />
  58.       <View data={dataSource} scale={scale}>
  59.         <Axis name="count" />
  60.         <Line
  61.           position="date*count"
  62.           color="#9AD681"
  63.           size={2}
  64.           tooltip={[
  65.             "count*alert",
  66.             (count, alert) => {
  67.               return {
  68.                 name: "状态",
  69.                 color: alert ? '#f00' : '#9AD681',
  70.                 value: count ? '在线' : '离线',
  71.               };
  72.             },
  73.           ]}
  74.         />
  75.         <Point
  76.           position="date*count"
  77.           shape='circle'
  78.           color={[
  79.             "date*alert",
  80.             (count, alert) => {
  81.               return alert ? '#f00' : "#9AD681";
  82.             },
  83.           ]}
  84.           tooltip={false}
  85.         />
  86.       </View>
  88.       <View data={alertLine} scale={scale}>
  89.         <Line
  90.           position="date*count"
  91.           color="#f00"
  92.           size={2}
  93.           tooltip={false}
  94.         />
  95.       </View>
  96.       <Legend visible={false}/>
  97.     </Chart>
  98.   );
  99. }
  101. export default LineChart;

滑块Bug

折线图，默认显示滑块，如何解决？

  • bizChart4.x 用 Line 代替

https://bizcharts.net/product/BizCharts4/category/62/page/81#slidable
image.png
在 Chart里面设置：

image.png

image.png