vue如何集成ECharts

我们在用vue做后台管理系统的时候总是面对数据统计，如何优雅的显示数据呢？当然是使用图表了！下面我就给大家简单介绍一个如何在vue中使用echarts。

首先、用npm安装echarts依赖

npm install echarts

其次自定义组件

<template>
    <div :id="chartId" :style="{width: '100%', height: '300px'}"></div>
</template>

<script>
    import echarts from 'echarts'

    export default {
        name: "Echarts",
        props: ['chartId', 'option'],
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById(this.chartId));
                // 绘制图表
                myChart.setOption(this.option);
            }
        }
    }
</script>

<style scoped>

</style>

我们这里采用props自定义属性，那么当我们在一个页面中添加多个echarts组件。

        props: ['chartId', 'option'],

在需要的页面导入我自定义的组件

<template>
    <div>
        <el-row :gutter="12">
            <el-col :span="6">
                <el-card shadow="always">
                    <div slot="header">
                        <span> <i class="el-icon-user"></i>总人数</span>
                        <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
                    </div>
                    <h1>10K</h1>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always">
                    <div slot="header">
                        <span> <i class="el-icon-price-tag"></i>总收藏</span>
                        <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
                    </div>
                    <h1>10K</h1>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always">
                    <div slot="header">
                        <span> <i class="el-icon-view"></i>总访问量</span>
                        <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
                    </div>
                    <h1>10W</h1>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="always">
                    <div slot="header">
                        <span> <i class="el-icon-chat-line-square"></i>代办事项</span>
                        <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
                    </div>
                    <h1>10</h1>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="12" style="margin-top: 16px">
            <el-col :span="12">
                <el-card shadow="hover">
                    <echarts chart-id="user" :option="userOptions"></echarts>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <echarts chart-id="name" :option="nameOptions"></echarts>
                </el-card>
            </el-col>
        </el-row>
        <h1>待办事项</h1>
        <el-row :gutter="12" style="margin-top: 16px">
            <el-card shadow="hover">
                <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="date"
                            label="日期">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="描述">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-row>
    </div>
</template>

<script>
    import Echarts from '../../components/Echarts'

    export default {
        name: "DashboardIndex",
        components: {Echarts},
        data() {
            return {
                userOptions: {
                    title: {text: '新增用户统计'},
                    tooltip: {},
                    xAxis: {
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                    },
                    yAxis: {},
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
                    }]
                },
                nameOptions: {
                    title: {text: '访问量统计'},
                    tooltip: {},
                    xAxis: {
                        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
                    },
                    yAxis: {},
                    series: [{
                        name: '人次',
                        type: 'bar',
                        data: [500, 2000, 3600, 1000, 1000, 2000, 5000, 2000, 3600, 1000, 1990, 2000]
                    }]
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    title: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    title: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    title: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    title: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        }
    }
</script>

<style scoped>

</style>

我们根据不同的属性渲染自己的组件，这样就可以在一个页面中渲染多个echarts表格

                    <echarts chart-id="user" :option="userOptions"></echarts>

                    <echarts chart-id="name" :option="nameOptions"></echarts>