vue中使用echarts

安装

cnpm install echarts -S

引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

案例

<template>
    <div>
        <div ref="myChart" :style="{width: '300px', height: '300px'}"></div>
    </div>
</template>

<script>
export default {
    name: 'Home',
    methods: {
        drawLine() {
            // 基于准备好的dom,初始化echart实例
            var myChart = this.$echarts.init(this.$refs.myChart)
            // 绘制图表
            myChart.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
    },
    mounted() {
        this.drawLine()
    }
}
</script>

柱状图：

<template>
    <div ref="myEcharts" :style="{width: '600px', height: '500px', border: '1px solid red'}"></div></div>
</template>

<script>
    export default { 
        methods: {  
            line() {
                let myEcharts = this.$echarts.init(this.$refs.myEcharts)
                let option = {
                    title: {
                        text: '某地区蒸发量和降水量',
                        subtext: '柱状图学习使用',
                        left: 200
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸发量', '降水量'],
                        top: 'bottom'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            restore: {},
                            dataView: {  
                                readOnly: false
                            },
                            magicType: {
                                type: ['line', 'bar']
                            }
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                            name: '蒸发量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                        },
                        {
                            name: '降水量',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                        }
                    ]
                }
                myEcharts.setOption(option)
            }
        },
    
        mounted() {
            this.line()
        }
    }
</script>

折线图：

<template>
    <div ref="myEcharts" :style="{width: '600px', height: '500px', border: '1px solid red'}"></div></div>
</template>

<script>
    export default { 
        methods: {  
            line() {
                let myEcharts = this.$echarts.init(this.$refs.myEcharts)
                let option = {
                    title: {
                        text: '折线',
                        subtext: '折线图学习使用',
                        x: 'center',
                        top: 10
                    },
                    tooltip: {
                        grigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销'],
                        y: 'bottom'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            restore: {},
                            dataView: {},
                            magicType: {
                                type: ['line', 'bar', 'stack', 'tiled']
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: [{
                            value: '周一', 
                            textStyle: {
                                fontSize: 20,
                                color: 'red'
                            }
                        },'周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '邮件营销',
                        type: 'line',
                        stack: '总量',
                        data: [120, 132, 111, 134, 90, 230, 210]
                    }]
                }
                myEcharts.setOption(option)
            }
        },
    
        mounted() {
            this.line()
        }
    }
</script>

饼图：

<template>
    <div ref="myEcharts" :style="{width: '600px', height: '500px', border: '1px solid red'}"></div></div>
</template>

<script>
    export default { 
        methods: {  
            studyEcharts() {
                let myEcharts = this.$echarts.init(this.$refs.myEcharts)
                
                let option = {
                    title: {
                        text: '某站点用户访问来源',
                        subtext: '饼图学习使用',
                        x: 'center',
                        top: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x: '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: 548, name: '搜索引擎' }
                        ]
                    }]
                }

                myEcharts.setOption(option)
            }
        },
    
        mounted() {
            this.studyEcharts()
        }
    }
</script>