图表组件

1.组件引用

声明：

本组件支持折线、柱状、散点、面积效果的渲染,默认是折线图,可在_options.datas.data中的配置属性中进行其他图形的配置

import { comChartLine } from '@bdsoft/chart';
<comChartLine :options="_options"></comChartLine>

2.option配置

注意先声明一个空对象 再进行赋值处理,不然不会触发组件的渲染

注意：

禁止使用ref 容易导致页面卡死 同时datas中的对象也禁止使用ref渲染

3.示例

单条曲线

const _options = shallowRef(null); // 禁止使用ref 容易导致页面卡死

 _options.value = {
    options: {
        // 默认空,可根据定制需要进行个性化配置,具体参考echarts官网options结构
    },
    datas: {
      // x轴分类
      categories: [5, 10, 15, 20, 25, 30, 35],
      // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
      data: [{ data: [820, 932, 901, 934, 1290, 1330, 1320] }]
    }
  };

多图形组件

本demo渲染了一个柱状图一个散点图在一个grid中展示

const _options2 = shallowRef(null); // 禁止使用ref 容易导致页面卡死
 _options2.value = {
    options: {},
    datas: {
      // x轴分类
      categories: [5, 10, 15, 20, 25, 30, 35],
      // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
      data: [
        {  type: 'bar',data: [820, 932, 901, 934, 1290, 1330, 1320] }, 
        { type: 'scatter', data: [720, 632, 401, 934, 990, 1130, 1020] }
      ]
    }
  };

自定义配置

在_options.options中进行图标的相关配置，与echarts原生配置一致，可参考echarts官网进行了解, echarts官网
下面示例中配置了x轴、y轴的标题

 _options.value = {
        options: {
          xAxis: {
            name: '日期', // x轴的名称
            nameLocation: 'middle', // 名称位置设置为中间
            nameGap: 30 // 名称与轴线之间的距离
          },
          yAxis: {
            name: '销售额', // y轴的名称
            nameLocation: 'middle', // 名称位置设置为中间
            nameRotate: 90, // 旋转角度，仅对y轴有效，因为y轴的文本默认是水平的
            nameGap: 50 // 名称与轴线之间的距离
          }
        },

        datas: {
            islinear: false,
          //enableYRangeCalc:是否设置y轴的取值区间+-10%
          // x轴分类
          categories: x, //[5, 10, 15, 20, 25, 30, 35],
          // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
          data: [{ data: y1 }, { type: 'scatter', data: y2 }] // [{ data: [630, 630, 630, 630, 630, 630, 630] }, { type: 'scatter', data: [720, 632, 401, 934, 850, 720, 650] }]
        }
      };

多y轴上下排列

const _options2 = shallowRef(null); 
 _options.value = {
    options: {
      xAxis: {
        // 标签处理
        name: '日期(年月)', // x轴的名称
        nameLocation: 'middle', // 名称位置设置为中间
        nameGap: 30, // 名称与轴线之间的距离
        // type: 'time',
        data: [],
        splitLine: {
          show: true
        }
      },

      yAxis: {
        boundaryGap: [0, '100%'],
        name: '产量标签测试(万吨)', // y轴的名称
        nameRotate: 90,
        nameLocation: 'middle', // 名称位置设置为中间
        splitLine: {
          show: true
        }
      },
      series: []
    },
    datas: {
      // x轴分类
      categories: [
        '2023-11-20',
        '2023-11-21',
        '2023-11-22',
        '2023-11-23',
        '2023-11-24',
        '2023-11-25',
        '2023-11-26',
        '2023-11-27',
        '2023-11-28',
        '2023-11-29',
        '2023-11-30',
        '2023-12-01',
        '2023-12-02',
        '2023-12-03',
        '2023-12-04',
        '2023-12-05',
        '2023-12-06',
        '2023-12-07',
        '2023-12-08',
        '2023-12-09',
        '2023-12-10',
        '2023-12-11',
        '2023-12-12',
        '2023-12-13',
        '2023-12-14',
        '2023-12-15',
        '2023-12-16',
        '2023-12-17',
        '2023-12-18',
        '2023-12-19',
        '2023-12-20'
      ],
      isMultipleY: true, // 启用多y轴显示
      MultipleYWarpHeight: 400,
      // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
      data: [
        { name: '测试数据', data: [30.93, 30.24, 30.18, 30, 30, 30.29, 30.12, 30.25, 17.96, 24.82, 18.52, 30.04, 30.28, 29.97, 27.28, 27.03, 3.87, null, null, null, null, null, null, null, null, null, null, null, 9.89, 32.53, 33.04] },
        { name: '日注水平', data: [31.03, 31.03, 31.03, 31.03, 31.03, 31.03, 31.03, 31.03, 31.03, 31.03, 31.03, 31.03, 32.8, 32.8, 32.8, 32.81, 30.89, 30.17, 29.19, 29.19, 28.85, 28.85, 28.85, 28.85, 27.63, 27.51, 27.36, 27.36, 27.36, 29.3, 30.53] },
        { name: ' 油压', data: [28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 28.81, 32.99, 33, 32.99, 32.99, 32.99, 31.09, 30.37] },
        { name: ' 泵压', data: [36.6, 36.6, 36.6, 36.5, 36.5, 37, 36.5, 36.5, 36.5, 36.9, 36.3, 37, 37.2, 37.2, 37.2, 36.9, 36.9, null, null, null, null, null, null, null, null, null, null, null, 35.5, 37.1, 37] }
        // { name: '测试数据2', data: dataListY3 }
      ]
    }
  };

阿尔普斯Arps

demo参考demo/阿尔普斯.vue enableArps 支持以下功能

• 框选数据
• 获取框选坐标索引方法
• 渲染分割线
• 获取斜率
• log对数曲线支持
• 去选分段颜色支持
• 标签处理

4.API方法

const comChartLineRef=ref()
// 置空
const handleSetEmpty = () => {
  comChartLineRef.value.resetEmptyOptions();
};
<comChartLine id="main" :options="_options"  ref="comChartLineRef"></comChartLine>

方法名	说明	参数
resetEmptyOptions	置空图表数据功能