1.1.8 • Published 12 months ago

@dinert/echarts v1.1.8

Weekly downloads
-
License
MIT
Repository
-
Last release
12 months ago

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-dataecharts的optionsObject{}
typeecharts的图表类型Objectecharts的图表类型line

chart-data下的echarts额外属性

参数说明类型可选值默认值
_autoTooltip自动轮播tooltip时长number
_autoDownPlay自动播放饼图的downplay时长number
_isGradualColors是否是渐变颜色booleanfalse/truetrue

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)
1.1.8

12 months ago

1.1.7

12 months ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

0.1.65

2 years ago

0.1.66

2 years ago

0.1.64

3 years ago

0.1.63

3 years ago

0.1.61

3 years ago

0.1.62

3 years ago

0.1.6

3 years ago

0.1.11

3 years ago

0.1.12

3 years ago

0.1.13

3 years ago

0.1.0

3 years ago

0.1.1

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago