vue 中 实现一个简单的 echarts

vue 中 实现一个简单的 echarts

01) vue 中 实现一个简单的 echarts

<template>
    <div>
        <div id="charts_1" style=" 500px;height: 500px;"></div>
    </div>
</template>
<script>
    import * as ECharts from 'echarts/lib/echarts'; // 引入 ECharts 主模块
    import 'echarts/lib/chart/line'; // 引入折线图。
    import 'echarts/lib/component/tooltip';  // 引入提示框组件。
    import 'echarts/lib/component/title';   // 引入标题组件。
    import 'echarts/lib/component/toolbox'; // 引入工具箱组件。

    export default {
        created() {
            this.$nextTick(() => {
                this.myChart1();
            })
        },
        methods: {
            myChart1() {
                let myChart = ECharts.init(document.getElementById('charts_1'));
                myChart.resize();
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }]
                };
                myChart.setOption(option)
            }
        },
    };
</script>

<style scoped>

</style>

 

02) ant 气泡卡片中实现一个简单的  echarts

<template>
    <div>
        <a-popover title="Title" @visibleChange="handleHoverChange">
            <template slot="content">
                <p>Content</p>
                <p>Content</p>
                <div id="charts_1" style=" 500px;height: 500px;"></div>
            </template>
            <a-button type="primary">
                Hover me
            </a-button>
        </a-popover>
    </div>
</template>
<script>

    /* 这是ant-design-vue */
    import Vue from 'vue'
    import Antd, {message, Select} from 'ant-design-vue'  //这是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 这是ant-design-vue */
    
    import * as ECharts from 'echarts/lib/echarts'; // 引入 ECharts 主模块
    import 'echarts/lib/chart/line'; // 引入折线图。
    import 'echarts/lib/component/tooltip';  // 引入提示框组件。
    import 'echarts/lib/component/title';   // 引入标题组件。
    import 'echarts/lib/component/toolbox'; // 引入工具箱组件。

    export default {
        methods: {
            handleHoverChange(isVisible) {
                if (isVisible) {
                    setTimeout(() => {
                        this.$nextTick(() => {
                            this.myChart1();
                        });
                    }, 301)
                }
            },
            myChart1() {
                let myChart = ECharts.init(document.getElementById('charts_1'));
                myChart.resize();
                let option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }]
                };
                myChart.setOption(option)
            }
        },
    };
</script>

<style scoped>

</style>

 

ECharts官方:

ECharts文档1
ECharts文档2

其他:

a) 基于 Vue2.x 封装的 Echarts 图表组件  
　　a-1) 文档地址     
　　a-2) 备用文档地址
　　a-3) demo演示地址