enn-chart

enn-chart

npm 地址

gitlab 地址

依赖

• echarts5.2.2

使用步骤

安装依赖，yarn add enn-chart/npm i enn-chart

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

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

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

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

使用例子

// 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 轮播出问题