XECharts

对 ECharts 进行了 Vue 封装，详细配置可以参考配置项手册。

使用方法

安装

npm i --save x-echarts.vue

引入

import XEcharts from 'x-echarts.vue';

Vue.component('x-echarts', XEcharts);

示例

基本形式

<template>
    <x-echarts :options="options"></x-echarts>
</template>

<script>
    export default {
        data() {
            return {
                options: {
                    title: {
                        text: '每星期访问量'
                    },
                    tooltip: {},
                    legend: {
                        data:['访问量']
                    },
                    xAxis: {
                        data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
                    },
                    yAxis: {},
                    series: [{
                        name: '访问量',
                        type: 'bar',
                        data: [250, 50, 350, 500, 100, 80, 460]
                    }],
                },
            };
        },
    };
</script>

主题

<template>
    <x-echarts :options="options" theme="dark"></x-echarts>
</template>

<script>
    export default {
        data() {
            return {
                options: {
                    title: {
                        text: '每星期访问量'
                    },
                    tooltip: {},
                    legend: {
                        data:['访问量']
                    },
                    xAxis: {
                        data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
                    },
                    yAxis: {},
                    series: [{
                        name: '访问量',
                        type: 'bar',
                        data: [250, 50, 350, 500, 100, 80, 460]
                    }],
                },
            };
        },
    };
</script>

事件

<template>
    <x-echarts :options="options" @legendselectchanged="legendselectchanged"></x-echarts>
</template>

<script>
    export default {
        data() {
            return {
                options: {
                    title: {
                        text: '每星期访问量'
                    },
                    tooltip: {},
                    legend: {
                        data:['访问量']
                    },
                    xAxis: {
                        data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
                    },
                    yAxis: {},
                    series: [{
                        name: '访问量',
                        type: 'bar',
                        data: [250, 50, 350, 500, 100, 80, 460]
                    }],
                },
            };
        },
        methods: {
            legendselectchanged(params) {
                console.log(params);
            },
        },
    };
</script>

API

Props/Attrs

| Prop/Attr | Type | Default | Description | | --------- | ---- | ------- | ----------- | | initOptions | Object | | 初始化时传入的附加参数 | | options | Object | | 配置项 | | theme | String,Object | | 应用的主题 | | group | String,Number | | 图表的分组 | | watchShallow | Boolean | false | 是否关闭对options的深度监听。 关闭后，options属性的变化不会触发图表更新，可用于大量数据的图表。|

Methods

• setOption
• getWidth
• getHeight
• getOption
• resize
• dispatchAction
• convertToPixel
• convertFromPixel
• containPixel
• showLoading
• hideLoading
• getDataURL
• getConnectedDataURL
• appendData
• clear
• dispose
• isDisposed

Static Methods

• connect
• disconnect
• registerMap
• getMap
• registerTheme
• graphic.clipPointsByRect
• graphic.clipRectByRect

Events

• legendselectchanged
• legendselected
• legendunselected
• legendscroll
• datazoom
• datarangeselected
• timelinechanged
• timelineplaychanged
• restore
• dataviewchanged
• magictypechanged
• geoselectchanged
• geoselected
• geounselected
• pieselectchanged
• pieselected
• pieunselected
• mapselectchanged
• mapselected
• mapunselected
• axisareaselected
• focusnodeadjacency
• unfocusnodeadjacency
• brush
• brushselected
• rendered
• finished
• click
• dblclick
• mouseover
• mouseout
• mousedown
• mouseup
• globalout