@bdsoft/chart

v1.1.3

Published

2 months ago

靶点图表

0High
0Medium
0Low

tokysomnus

自身项目就是一个测试环境

一般不需要 new echarts 设置渐变时使用

import {echarts} from '@bdsoft/chart';

组件引用

<comChartLine :options="_options"></comChartLine>

import { comChartLine } from '@bdsoft/chart';
const _options = shallowRef(null); // 禁止使用ref 容易导致页面卡死

曲线_options 配置示例:

** 注意先声明一个空对象再进行赋值处理,不然不会触发组件的渲染 ** // 禁止使用 ref 容易导致页面卡死同时 datas 中的对象也禁止使用 ref 渲染

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


const initChart = () => {
  _options.value = {
    options: {

    },
    datas: {
      // min:0 ,// 手动设置最小值(与max同步使用)
      // max :1000 ,// 手动设置最大值(与mmin同步使用)
      // enableYRangeCalc:true,是否设置y轴的取值区间+-10% --自动控制(比手动的优先级高)
      // x轴分类
      categories: [5, 10, 15, 20, 25, 30, 35],
      // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
      data: [{ data: [820, 932, 901, 934, 1290, 1330, 1320] }]
      // 自定义 宽度 颜色等
      //  data: [{ type: 'bar',itemStyle: { color: '#fb8422' }, barWidth: 20, data: [820, 932, 901, 934, 1290, 1330, 1320] }]
    }
  };
}
onMounted(() => {
  initChart();
});

const _options2 = shallowRef(null); // 禁止使用ref 容易导致页面卡死
const initChart = () => {
  _options.value = {
    options: {

    },
    datas: {
      // x轴分类
      categories: [5, 10, 15, 20, 25, 30, 35],
      // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
      data: [
        { type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320] },
        { type: 'line', data: [720, 632, 401, 934, 990, 1130, 1020] }]
    }
  };
}
onMounted(() => {
  initChart();
});

单坐标轴及标题

 _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] }]
        }
      };

置空图表数据功能

// 置空
const handleSetEmpty = () => {
  comChartLineRef.value.resetEmptyOptions();
};
</script>

<template>
    <div style="height: 50px">
      <el-button type="" @click="handleSetEmpty">置空</el-button>
    </div>
    <div style="width: 100%; height: 500px">
      <comChartLine id="main" :options="_options"  ref="comChartLineRef"></comChartLine>
    </div>
</template>

左右y轴加标题+指定坐标轴示例 20251225

 <!--
* @FileDescription: 左右y轴示例
* @Author: 李兵泉
* @Date: 2025-11-27 
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
  <div style="height: 400px; width: 1200px;border: 1px solid #ccc;margin: 20px;">
    <comChartLine :options="_options"></comChartLine>
  </div>

</template>
<script setup>
import { ref, shallowRef, computed, watch, onMounted } from "vue";
import { comChartLine } from '@bdsoft/chart';
import { max } from "@bdsoft/flatmap/src/unit/vector";
const _options = shallowRef(null)

const initChart = () => {
  _options.value = {
    options: {

      yAxis: [
        {
          type: 'value',
          name: '这是标题1',// 坐标轴名称
          nameLocation: 'middle', // 坐标轴方向(start end middle)
          nameTextStyle: {  // 坐标轴名称样式 默认不设置
            color: '#ff0000',
            fontSize: 16,
          },
          nameGap: 40, // 坐标轴名称距离轴线的距离
          // min:0,
          // max:1000
          position: 'left',
          alignTicks: true,
          gridIndex: 0
        },
        {
          type: 'value',
          name: '这是标题2',
          nameLocation: 'middle',
          //  nameTextStyle: {
          //   color: '#ff0000',
          //   fontSize: 16,
          // },
          // nameGap: 40,
          gridIndex: 0,
          position: 'right',
          alignTicks: true,
        }
      ]
    },
    datas: {
      isOnlyDatasyAxis: false, // min max 从options.yAxis里面取
      // x轴分类
      categories: [5, 10, 15, 20, 25, 30, 35],
      // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
      // data: [{ data: [820, 932, 901, 934, 1290, 1330, 1320] }]
      // 自定义 宽度 颜色等
      data: [
        {
          type: 'line',
          name: 'line1',
          // itemStyle: { color: '#fb8422' }, // #798F99
          barWidth: 20,
          yAxisIndex: 0,
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        },
        {
          type: 'line',
          name: 'line2w',
          // itemStyle: { color: '#fb8422' }, // #798F99
          barWidth: 20,
          yAxisIndex: 0,
          data: [1220, 1232, 1301, 1134, 1290, 1330, 1320]
        },
        {
          type: 'bar',
          name: 'line2',
          // itemStyle: { color: '#fb8422' }, // #798F99
          barWidth: 20,
           yAxisIndex: 1,
          data: [1820, 1932, 1901, 1934, 2290, 2330, 2320]
        }
      ]
    }
  };
}
onMounted(() => {
  initChart();
});

</script>

<style lang="scss" scoped></style>

柱状图横向示例

<!--
* @FileDescription:  柱状图横向
* @Author: 李兵泉
* @Date: 2025-11-27 
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
  <div style="height: 400px; width: 1200px;border: 1px solid #ccc;margin: 20px;">
    <comChartLine :options="_options"></comChartLine>
  </div>

</template>
<script setup>
import { ref, shallowRef, computed, watch, onMounted } from "vue";
import { comChartLine } from '@bdsoft/chart';
const _options = shallowRef(null)

const initChart = () => {
  _options.value = {
    options: {
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
  },
    },
    datas: {
      // x轴分类
      categories: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
      // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
      // data: [{ data: [820, 932, 901, 934, 1290, 1330, 1320] }]
      // 自定义 宽度 颜色等
      data: [
        {
          type: 'bar',
          barWidth: 20,
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        },
        {
          type: 'bar',
          barWidth: 20,
          data: [1820, 1932, 1901, 1934, 2290, 2330, 2320]
        }
      ]
    }
  };
}
onMounted(() => {
  initChart();
});

</script>

<style lang="scss" scoped></style>

堆叠条形图(横向柱状)

<!--
* @FileDescription:  堆叠条形图
* @Author: 李兵泉
* @Date: 2025-11-27 
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
  <div style="height: 400px; width: 1200px;border: 1px solid #ccc;margin: 20px;">
    <comChartLine :options="_options"></comChartLine>
  </div>

</template>
<script setup>
import { ref, shallowRef, computed, watch, onMounted } from "vue";
import { comChartLine } from '@bdsoft/chart';
const _options = shallowRef(null)

const initChart = () => {
  _options.value = {
    options: {
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
      },
    },
    datas: {
      // x轴分类
      categories: ['井号1', '井号2', '井号3', '井号4', '井号5', '井号6'],
      // 数据 支持多个图形渲染 支持自定义配置和仅数据传递 默认是line
      // data: [{ data: [820, 932, 901, 934, 1290, 1330, 1320] }]
      // 自定义 宽度 颜色等
      data: [
        {
          type: 'bar',
          stack: 'total',
          barWidth: 20,
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
          type: 'bar',
          stack: 'total',
          barWidth: 20,
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          type: 'bar',
          stack: 'total',
          barWidth: 20,
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          type: 'bar',
          stack: 'total',
          barWidth: 20,
           data: [150, 212, 201, 154, 190, 330, 410]
        }
      ]
    }
  };
}
onMounted(() => {
  initChart();
});

</script>

<style lang="scss" scoped></style>

饼图示例


 import { comChartPie } from '@bdsoft/chart';

_datas 为数组[{lable:'',value}]
   _options = {
        datas: _datas,
        config: {
        NameField："datas中的文本显示lable字段",
        ValueField："datas中的值value字段"
        }
      };

  <comChartPie :options="_options" style="width: 1035px; height: 400px"> </comChartPie>

阿尔普斯组件功能支持

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

框选数据 enableArps //启动阿尔普斯功能 enableArpsDrag(datas 里面) //启动框选功能 comChartLineRef.value.enableArpsDrag(); isContinueArpsDrag //是否持续框选默认 false
获取框选坐标索引方法
渲染分割线 markline
渲染拉齐线 laziLine（showName、showValue）
获取斜率
log 对数曲线支持
去选分段颜色支持
标签处理

问题总结：

悬浮值不显示问题，与注册事件中 initDragEvent 的 setMarkline 冲突

报错整理

Uncaught (in promise) TypeError: axis.getAxesOnZeroOf is not a function

属性整理

isMultipleY ：是否启用多 y 轴上下排列显示(默认 false) enableYRangeCalc ：是否设置 y 轴的取值区间+-10% (datas 中添加) isAutoGrid:false, 是否启用自动计算左侧编剧

注意点：

方法

resetEmptyOptions(); 置空图表数据 LoadArpsPointsAndLine(points) 加载两点进行绘制

外层的 option 对象需要设置成 shallowRef

import { ref, shallowRef, onMounted, computed } from 'vue';

const _options = shallowRef(null);

3 仪表盘示例

<comChartGague :options="_options"></comChartGague>

import { comChartGague } from '@bdsoft/chart';
const _options = shallowRef(null); // 禁止使用ref 容易导致页面卡死

// 将 series:[] 可以查看丰富配置效果
const initChart = () => {
  // 基本仪表盘配置
  _options.value = {
    series: [
      {
        name: 'Pressure',
        detail: {
          valueAnimation: true,
          // 单位处理
          formatter: '{value} %',
          color: 'inherit'
        },
        data: [
          {
            value: 90, // 数值
            name: ''
          }
        ]
      }
    ]
  }
}
onMounted(() => {
  initChart();
});

丰富仪表盘配置

   _options.value = {
      series: [
      {
        type: 'gauge',
        axisLine: {
          // 圆圈样式
          lineStyle: {
            width: 20,
            color: [
              [0.3, '#51cc53'],
              [0.7, '#5e83fd'],
              [1, '#fd666d']
            ]
          }
        },
        // 指针色
        pointer: {
          itemStyle: {
            color: 'auto'
          }
        },
        // 小刻度样式-偏移
        axisTick: {
          distance: -20,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 1
          }
        },
        // 大刻度样式-偏移
        splitLine: {
          distance: -20,
          length: 20,
          lineStyle: {
            color: '#fff',
            width: 3
          }
        },
        // 刻度值样式
        axisLabel: {
          color: 'inherit',
          distance: 30,
          fontSize: 12
        },
        // 表盘文字
        detail: {
          valueAnimation: true,
          formatter: '{value} %',
          color: 'inherit'
        },
        data: [
          {
            value: 70
          }
        ]
      }
    ]
    }