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

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

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

组件引用

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

曲线_options配置示例:

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

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


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

    },
    datas: {

      // 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>

饼图示例

 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对数曲线支持
• 去选分段颜色支持
• 标签处理

问题总结：

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

报错整理

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

属性整理

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

注意点：

方法

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

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

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

const _options = shallowRef(null);