echart的学习：2.雷达图在vue下的使用

这个系列的博客没什么大的用处，因为echart基本都有范例的了。我只是为了自己能更好的学习下这个插件，而写博客总结下经验

准备：

 1.导入echart

        cnpm install echarts（-S）

使用步骤：

  2.在使用的vue文件中引入echart

  import echarts from 'echarts'

      3.准备容器

<div id="main" style="width: 600px;height: 600px;"></div>

      4.代码封装在函数里面：

 methods: {
            drawPie() {
                var charts = echarts.init(document.getElementById('echart'))
                var option = {
                    title: {
                        text: "这个是测试",
                        link: 'https://www.baidu.com',
                        target: "blank",
                        textAlign: 'left',

                    },
                    tooltip: {},//提示层
                    legend: {
                        data: ['name1']
                    },
                    radar: {
                        name: {
                            textStyle: {
                                color: '#fff', //字体颜色
                                backgroundColor: '#999', //背景色
                                borderRadius: 3, //圆角
                                padding: [3, 5] //padding
                            }
                        },
                        center: ['50%', '50%'],
                        radius: '60%',
                        startAngle: 270,
                        indicator: [{
                                name: '指标一',
                                max: 600
                            },
                            {
                                name: '指标二',
                                max: 600
                            },
                            {
                                name: '指标三',
                                max: 600
                            }
                        ],
                    },
                    series: [{
                        name: '测试标题名字',
                        type: 'radar',
                        data: [{
                            value: [400, 200, 20],
                            name: "123"
                        }]
                    }]
                }
                charts.setOption(option);
            },

        },

        5.在钩子中使用

 mounted() {
            this.$nextTick(function() {
                this.drawPie('main')
            })
        }

解释下四，五的两步流程：

四的流程与上一篇博客在原生的情况下使用的是一样的，主要是在第五步的钩子里面使用，不怎么难，效果大概是这样

参考资料：

1.echart配置项文档：https://echarts.baidu.com/option.html#title

2.echart的示例：https://echarts.baidu.com/examples