enn-chart-v3

npm 地址

gitlab 地址

依赖

• echarts5.2.2

使用步骤

安装依赖npm i enn-chart-v3

// main.js
import EnnChart from "enn-chart-v3";
Vue.use(EnnChart, options); // 将会注册全局组件：EnnBar、EnnLine、EnnPie

// 单独引入
import { ChartPie, EnnLine, EnnPie } from "enn-chart-v3";

• 目前接受一个包含compoennts的options，目的是加载一些配件供echarts使用，用法如下，

import { TitleComponent } from 'echarts/components'
app.use(EnnChart, { components: [TitleComponent] })

使用例子(vue2写法)

// App.vue
<template>
  <div class="app">
    <enn-line
      style="width:500px;height:300px;"
      :datas="datas"
      :options="options"
    />
    <hr />
    <enn-bar style="width:500px;height:300px;" :datas="barDatas" />
    <hr />
    <enn-pie
      style="width:500px;height:300px;"
      :time="3000"
      :datas="pieData"
      :options="pieOptions"
      @init="getChart"
    />
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      datas: {
        name: ["七月", "八月"], // 两条数据
        x: ["a1", "b2", "c3", "d4", "e5"],
        data: [
          [29, 53, 3, 102, 45],
          [65, 4, 123, 87, 182],
        ],
      },

      barDatas: {
        name: ["七月"], // 一条数据
        x: ["a1", "b2", "c3", "d4", "e5"],
        data: [29, 53, 3, 102, 45],
      },

      pieData: {
        name: "七月",
        x: ["a1", "b2"],
        data: [29, 83],
      },
      pieOptions: {
        series: {
          radius: ["46%", "70%"],
        },
      },
    };
  },

  methods: {
    getChart(chart) {
      console.log("chart", chart); // 得到echarts实例
    },
  },
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
</style>

API

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------- | ------- | ---- | ------ | ------------------------------ | | datas | object | 是 | - | 数据，具体见下表 | | options | object | 否 | - | ECharts 的 options | | time | number | 否 | 0 | 提供 time 则会自动轮询高亮数据 | | reRenderClear | boolean | - | false | 控制每次数据改变后是否重新渲染 |

emits

| 名称 | 说明 | | ---- | ------------------------ | | init | 图表初始化后暴露图表实例 |

style

需要给图表设置宽高

props datas

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ---- | ----- | ---- | ------ | ---------- | | name | array | 是 | - | 数据的名字 | | x | array | 是 | - | x 轴 | | data | array | 是 | - | 数据 |

props options

• 同 echarts 的 options 参数
• 内部设置了两个蓝色颜色，注意传需要的 color

props time

• 自动轮播的时间间隔，不传则不会自动轮播

• [ ] 暂无数据处理

• [ ] 需要鼠标移上去才能停止 dispatchAction 的计时器

• [ ] legend 的点击，数据会改变，导致 dispatchAction 轮播出问题