0.1.8 • Published 2 years ago
enn-chart v0.1.8
enn-chart
依赖
- 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 轮播出问题
0.1.8
2 years ago
0.1.7
2 years ago
0.1.2
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.1.0
2 years ago
0.1.1
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago