vue + echarts 实例

组件代码块

<template>
    <div class="dashboard">
        <div :ref="refs" :style="showStyle"></div>
    </div>
</template>
<script>
    // 按需引用
    // 引入基本模板
    let echarts = require('echarts/lib/echarts');
    // 引入柱状图组件
    require('echarts/lib/chart/line');
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip'); 
    require('echarts/lib/component/title');
    require('echarts/lib/component/markLine');
    statistics
    export default {
        name: 'echart',
        props: {
            refs: String,
            chartOptions: Object,
            showStyle: Object
        },
        data() {
            return {
            }
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(this.$refs[this.refs]);
                // 绘制图表
                myChart.setOption(this.chartOptions);
            }
        }
    }
</script>

调用实例

<style lang="less" scoped>
    @import './styles/statistics.less';
</style>

<template>
     <e-chart refs='mychart' :showStyle="{width: '90%', height: '172px'}" :chartOptions="chartOptions"></e-chart>
</template>

<script>
import eChart from '../../components/e-chart.vue';
export default {
    name: 'statistics',
    components: {
        eChart
    },
    data() {
            return {
                chartOptions:{
                   grid: {
                        top: 10,
                        bottom: 20,
                        left: 50,
                        right: 90,
                        containLabel: true
                    },
                    xAxis: {
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                                width: '2'
                            }
                        },
                        nameTextStyle: {
                            color: '#cccccc'
                        },
                        boundaryGap: false,
                        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
                    },
                    yAxis: {
                        axisTick: {
                            show: false
                        },

                        axisLine: {
                            lineStyle: {
                                color: '#cccccc',
                                width: '2'
                            }
                        },
                        nameTextStyle: {
                            color: '#00dfff'
                        },
                        splitLine: {
                            show :false
                        }
                    },
                    series: [{
                        markLine: {
                            symbol: 'none',
                            lineStyle: {
                                color: '#d2d5d9'
                            },
                            data: [{
                                yAxis: 40
                            }]
                        },
                        itemStyle: {
                            color: '#00dfff'
                        },
                        lineStyle: {
                            color: '#00dfff',
                            width: 3
                        },
                        symbol: 'circle',
                        symbolSize: 6,
                        name: '室外',
                        type: 'line',
                        data: [42, 38, 46, 55, 41, 50, 42, 38, 46, 55, 41, 50]
                    },{
                        itemStyle: {
                            color: '#f92626'
                        },
                        lineStyle: {
                            color: '#f92626',
                            width: 3
                        },
                        symbol: 'circle',
                        symbolSize: 6,
                        name: 'PM2.5',
                        type: 'line',
                        data: [18, 18, 38, 29, 31, 33, 18, 18, 38, 29, 31, 33]
                    }]
                }
            }
        }
}   
</script>