ngx-echarts 使用以及事件的使用

ngx-echarts

GitHub地址
npm官网
This project was generated with Angular CLI version 6.0.8.

ngx-echart 所对应 echarts 的事件
echarts-option配置项
事件的用法参考echarts-API

// echartsOption.ts
// 新建一个保存使用的echarts  option文件，在使用的时候引入对应的option即可
import { EChartOption } from "echarts";
import * as echarts from "echarts";
export const lineAreaOptionSP: EChartOption = {
  backgroundColor: "#fff",
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.5)",
    show: false,
  },
  brush: {
    toolbox: ["rect"], // 工具  矩形选择   , 'clear'清楚矩形选择
    xAxisIndex: "all", // 所有数据
    brushMode: "single", // 单个选择
    transformable: true, //已经选好的选框是否可以被调整形状或平移。
    throttleType: "debounce", //开启选中延迟后调用回调延迟
    throttleDelay: 600, //选中延迟后调用回调延迟时间
    brushStyle: {
      // 选择框的颜色
      borderWidth: 3,
      color: "rgba(120,140,180,0.6)",
      borderColor: "rgba(120,140,180,0.8)",
    },
  },
  toolbox: {
    itemSize: 20,
    right: 20,
    top: 5,
  },
  grid: {
    top: "12%",
    left: "5%",
    right: "3%",
    bottom: "20%",
    // containLabel: true
  },
  xAxis: [
    {
      color: "#59588D",

      name: "",

      data: [],
    },
  ],

  yAxis: [
    {
      type: "value",
      min: 0,
      splitNumber: 4,
      axisLine: {
        show: true,
      },
      axisLabel: {
        show: true,
        // margin: 20,
        textStyle: {
          color: "#737373",
        },
      },
      name: "",
      // nameLocation: "left",
      // nameTextStyle: {
      //   fontSize: 14,
      //   padding: [200, 70, -30, 0],
      // },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(131,101,101,0.2)",
          type: "dashed",
        },
      },
    },
  ],
  dataZoom: [
    {
      type: "slider",
      filterMode: "filter",
      bottom: "20",
    },
    {
      type: "inside",
    },
  ],
  series: [
    {
      name: "",
      type: "line",

      smooth: true,
      cursor: "pointer",
      showSymbol: false,
      data: [],
    },
  ],
};

// 组件中使用  .ts
//首先引入 使用的 option
import { lineAreaOptionSP} from "../echartsOption"；

lineOption = lineAreaOptionSP；
// mergeData  动态数据 用以覆盖 原有 option上的属性，mergeData  有更新name 对应的echarts就会更新渲染
mergeData ={
			xAise: [{
			data: [23,45,56,78,2]
			}],
              series: [
                {
                  name: "",
                  type: "line",
                  lineStyle: {
                    normal: {
                      color: "#1a8cff",
                    },
                  },
                  showSymbol: false,
                  itemStyle: {
                    color: "#FFF",
                    borderColor: "#1a8cff",
                    borderWidth: 4,
                  },
                  markArea: {
                    data: MarkData
                  },
                  data: [234234,23,4,5,345,43],
                }
              ],
            }
            onChartBrushSelected(ec){
            }
// html中
 <div (chartBrushSelected)="onChartBrushSelected($event)" style="height: 200px;" echarts [options]="lineOption"
              [merge]="mergeData" class="demo-chart"></div>
// 举例 chartBrushSelected 刷子工具的事件的使用