@cloud-ui/x-echarts.vue

本组件主要是给 Echarts 添加了主题,以及几个常见的 CSS 功能。

Usage no npm install needed!

<script type="module">
  import cloudUiXEchartsVue from 'https://cdn.skypack.dev/@cloud-ui/x-echarts.vue';
</script>

README

XEcharts 百度图表

本组件主要是给 Echarts 添加了主题,以及几个常见的 CSS 功能。

更多示例请查阅官方示例

更多配置项请查阅官方配置项

更多详细信息请参考 Echarts 的 API 文档

示例

基本用法

<template>
<x-echarts :options="options"></x-echarts>
</template>
<script>
export default {
    data() {
        return {
            options: (() => {
                function randomize() {
                    return [0, 0, 0].map((v) => Math.round(300 + Math.random() * 700) / 10);
                }

                return {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        // Provide data.
                        source: [
                            ['Product', '2015', '2016', '2017'],
                            ['Matcha Latte', ...randomize()],
                            ['Milk Tea', ...randomize()],
                            ['Cheese Cocoa', ...randomize()],
                            ['Walnut Brownie', ...randomize()],
                        ],
                    },
                    // Declare X axis, which is a category axis, mapping
                    // to the first column by default.
                    xAxis: { type: 'category' },
                    // Declare Y axis, which is a value axis.
                    yAxis: {},
                    // Declare several series, each of them mapped to a
                    // column of the dataset by default.
                    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
                };
            })(),
        }
    }
};
</script>
<template>
<x-echarts :options="options"></x-echarts>
</template>
<script>
export default {
    data() {
        return {
            options: {
                title: {
                    text: '饼图示例',
                    x: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' },
                        ],
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: 'white',
                        },
                    },
                ],
            },
        }
    }
};
</script>

添加边框

默认的 ECharts 没有边框,为了方便,实现在了组件中。

只需开启border属性即可。

<template>
<x-echarts border :options="options"></x-echarts>
</template>
<script>
export default {
    data() {
        return {
            options: {
                title: {
                    text: '甜圈图示例',
                    x: 'left',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['45%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '24',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: 'white',
                        },
                        data:[
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' },
                        ],
                    },
                ],
            },
        };
    },
};
</script>

设置宽高

直接添加style属性。

<template>
<x-echarts border :options="options" style="width: 420px; height: 240px;"></x-echarts>
</template>
<script>
export default {
    data() {
        return {
            options: {
                title: {
                    text: '甜圈图示例',
                    x: 'left',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['60%', '80%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '24',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: 'white',
                        },
                        data:[
                            { value: 335, name: '直接访问' },
                            { value: 310, name: '邮件营销' },
                            { value: 234, name: '联盟广告' },
                            { value: 135, name: '视频广告' },
                            { value: 1548, name: '搜索引擎' },
                        ],
                    },
                ],
            },
        };
    },
};
</script>

API

Props/Attrs

Prop/Attr Type Options Default Description
init-options object 初始化实例
options object ECharts 实例的数据。修改这个 prop 会触发 ECharts 实例的 setOption 方法。如果直接修改 options 绑定的数据而对象引用保持不变,setOption 方法调用时将带有参数 notMerge: false。否则,如果为 options 绑定一个新的对象,setOption 方法调用时则将带有参数 notMerge: true
theme string 设置主题
group string 实例的分组,会自动绑定到 ECharts 组件的同名属性上。
autoresize boolean true 指定 ECharts 实例在组件根元素尺寸变化时是否需要自动进行重绘。
manual-update boolean false 在性能敏感(数据量很大)的场景下,我们最好对于 options prop 绕过 Vue 的响应式系统。当将 manual-update prop 指定为 true 且不传入 options prop 时,数据将不会被监听。然后,你需要用 ref 获取组件实例以后手动调用 mergeOptions 方法来更新图表。
border boolean false 是否添加边框

Computed

Computed Type Description
width number 用来获取 ECharts 实例的当前宽度。
height number 用来获取 ECharts 实例的当前高度。
computedOptions object 用来读取 ECharts 更新内部 options 后的实际数据。

Events

@legendselectchanged

Param Type Description

@legendselected

Param Type Description

@legendunselected

Param Type Description

@legendscroll

Param Type Description

@datazoom

Param Type Description

@datarangeselected

Param Type Description

@timelinechanged

Param Type Description

@timelineplaychanged

Param Type Description

@restore

Param Type Description

@dataviewchanged

Param Type Description

@magictypechanged

Param Type Description

@geoselectchanged

Param Type Description

@geoselected

Param Type Description

@geounselected

Param Type Description

@pieselectchanged

Param Type Description

@pieselected

Param Type Description

@pieunselected

Param Type Description

@mapselectchanged

Param Type Description

@mapselected

Param Type Description

@mapunselected

Param Type Description

@axisareaselected

Param Type Description

@focusnodeadjacency

Param Type Description

@unfocusnodeadjacency

Param Type Description

@brush

Param Type Description

@brushselected

Param Type Description

@rendered

Param Type Description

@finished

Param Type Description

@click

Param Type Description

@dblclick

Param Type Description

@mouseover

Param Type Description

@mouseout

Param Type Description

@mousemove

Param Type Description

@mousedown

Param Type Description

@mouseup

Param Type Description

@globalout

Param Type Description

@contextmenu

Param Type Description

Methods

mergeOptions()

(底层调用了 ECharts 实例的 setOption 方法)提供了一个更贴切的名称来描述 setOption 方法的实际行为。

Param Type Default Description

appendData()

Param Type Default Description

resize()

Param Type Default Description

dispatchAction()

Param Type Default Description

showLoading()

Param Type Default Description

hideLoading()

Param Type Default Description

convertToPixel()

Param Type Default Description

convertFromPixel()

Param Type Default Description

containPixel()

Param Type Default Description

getDataURL()

Param Type Default Description

getConnectedDataURL()

Param Type Default Description

clear()

Param Type Default Description

dispose()

Param Type Default Description

connect()

Param Type Default Description

disconnect()

Param Type Default Description

registerMap()

Param Type Default Description

registerTheme()

Param Type Default Description

graphic.clipPointsByRect()

Param Type Default Description

graphic.clipRectByRect()

Param Type Default Description