vue中引入echarts及vue中Title设置

首先npm install echarts,然后如下

methods:{
            drawEchartsPie () {
                let myChartPie= this.echarts.init(document.getElementById('chart-pie')) //初始化
                myChartPie.setOption({
                          title: {
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            bottom:'bottom',
                            data: ['直接访问', '邮件营销', '联盟广告', '视频广告']
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    {value: 335, name: '直接访问'},
                                    {value: 310, name: '邮件营销'},
                                    {value: 234, name: '联盟广告'},
                                    {value: 135, name: '视频广告'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                })
           },
           drawEchartsBar(){
                let myChartBar= this.echarts.init(document.getElementById('chart-bar')) //初始化
                 myChartBar.setOption({
                         title: {
                            text: '年度对比',
                            subtext: '纯属虚构',
                            left: 'center'
                        },
                          legend: {
                              orient: 'vertical',
                            bottom:'bottom',
                          },
                        tooltip: {},
                        dataset: {
                            source: [
                                ['product', '2015', '2016', '2017'],
                                ['Matcha Latte', 43.3, 85.8, 93.7],
                                ['Milk Tea', 83.1, 73.4, 55.1],
                                ['Cheese Cocoa', 86.4, 65.2, 82.5],
                                ['Walnut Brownie', 72.4, 53.9, 39.1]
                            ]
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: [
                            {type: 'bar'},
                            {type: 'bar'},
                            {type: 'bar'}
                        ]
                 })
           }
        }

效果图如下

当前界面标题设置