在vue怎么使用echarts

现在很多的项目，对数据可视化看的越来越重要，数据可视化可以多维度的分析数据，一目了然；对项目的美观和简洁度都有不少的提升，比原来那种表格化的数据格式要好很多了！
对这种问题，echarts解决了这样的问题，这里介绍一下 在vue怎么使用echarts！

同样，使用的vue-cli环境！
首先，通过npm安装ECharts和zrender，命令行：

npm install echarts --save 
npm install zrender --save ;

html：

<template>
  <div class="charts">
       <h3>vue2.0中使用echart</h3>
        <div id="main" style=" width:100%; height:350px;"></div>  //这里的高度一定要的，不然是不会显示图标的  
  </div>
</template>

js部分：

<script>
import echarts from 'echarts';   //这里是你必须的，千万不能忘记！
  export default {  
      data() {  
            return {  
                // 初始化空对象  
                chart: null,  
                // 初始化图表配置  
                opinion: ['A', 'B', 'C', 'D', 'E'],  
                opinionData: [{  
                    value: 26,  
                    name: 'A'  
                }, {  
                    value: 31,  
                    name: 'B'  
                }, {  
                    value: 18,  
                    name: 'C'  
                }, {  
                    value: 28,  
                    name: 'D' 
                }, {  
                    value: 21,  
                    name: 'E'  
                }]  
            }  
        },  
        methods: {  
            // 绘图  
            drawGraph(id) {  
                // 绘图方法  
                this.chart = echarts.init(document.getElementById(id))  
                    // 皮肤添加同一般使用方式  
                this.chart.showLoading();  
                    // 返回到data中  
                var that = this  
                // ajax 请求数据  
                // $.ajax({  
                //         // 方式  
                //         type: "GET",  
                //         // 是否异步  
                //         async: true,  
                //         // 路径||API  
                //         url: "xxx",  
                //         //返回数据形式为json  
                //         dataType: "json",  
                //         // 加载成功  
                //         success: function(result) {  
                //             // 更新初始数据  
                //             that.opinionData = result  
                //         },  
                //         // 加载错误  
                //         error: function(errorMsg) {  
                //             // alert("请求数据失败!");  
                //             console.log(errorMsg)  
                //         }  
                //     })  
               // set  
                this.chart.setOption({  
                    title: {  
                        text: '此处为标题',  
                        subtext: '副标题',  
                        x: 'center'  
                    },  
                    tooltip: {  
                        trigger: 'item',  
                        formatter: "{a} <br/>{b} : {c} ({d}%)"  
                    },  
                    legend: {  
                        x: 'center',  
                        y: 'bottom',  
                        data: this.opinion // this  
                    },  
                    toolbox: {  
                        show: true,  
                        feature: {  
                            mark: {  
                                show: true  
                            },  
                            dataView: {  
                                show: true,  
                                readOnly: false  
                            },  
                            magicType: {  
                                show: true,  
                                type: ['pie']  
                            },  
                            restore: {  
                                show: true  
                            },  
                            saveAsImage: {  
                                show: true  
                            }  
                        }  
                    },  
                    calculable: true,  
                    series: [{  
                        name: '种类',  
                        type: 'pie',  
                        // 内圆半径，外圆半径  
                        radius: [30, 100],  
                        // 位置，左右，上下  
                        center: ['50%', '50%'],  
                        roseType: 'area',  
                        data: this.opinionData, // this  
                    }]  
                })  
                this.chart.hideLoading()  
            }  
        },  
        mounted() {  
            this.$nextTick(function() {  
                this.drawGraph('main')  
            })  
        }  
}  
</script>

效果如下图：

访客的ip和所在地址： 访问时间: 当前时间: