0.1.66 • Published 1 year ago
@dinert/echarts v0.1.66
Vue components based on echarts secondary encapsulation
Installation
Using npm:
$ npm i '@dinert/echarts'
$ yarn add '@dinert/echarts'
In a browser:
<script src="http://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<script src="lib-umd.js"></script>
In a Esm
<template>
<div style="height: 400px;">
<d-echart @callback="callback" @config-callback="configCallback" :chart-data="chartData"></d-echart>
</div>
</template>
<script>
import {DEchart} from '@dinert/echarts'
export default {
components: {
DEchart
},
data() {
return {
_autoTooltip: 3000,
_isGradualColors: false,
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
}
}
</script>
DEchart Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
chart-data | echarts的options | Object | 一 | {} |
type | echarts的图表类型 | Object | echarts的图表类型 | line |
chart-data下的echarts额外属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
_autoTooltip | 自动轮播tooltip时长 | number | 一 | |
_autoDownPlay | 自动播放饼图的downplay时长 | number | 一 | |
_isGradualColors | 是否是渐变颜色 | boolean | false/true | true |
DEchart Events
注意事项
1、当chart-data中有configCallback和callback的函数时,执行的是chart-data对象中的configCallback和callback 2、如果要执行下面的函数请删除chart-data属性中的configCallback和callback 3、cb是一个函数回调的是echarts的配置项,图表渲染时会使用这个配置项,所以请这样使用cb({}),对象为空时不会使用。
事件名称 | 说明 | 回调参数 |
---|---|---|
configCallback | 图表渲染之前的回调 | (options, chart, cb) |
callback | 图表渲染完成的回调 | (chart, options) |
0.1.65
1 year ago
0.1.66
1 year ago
0.1.64
2 years ago
0.1.63
2 years ago
0.1.61
2 years ago
0.1.62
2 years ago
0.1.6
2 years ago
0.1.11
2 years ago
0.1.12
2 years ago
0.1.13
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.5
2 years ago
0.0.4
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago