vue中引入echarts

第一步

下载

npm install echarts --save

在main.js中添加

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件

第二步

创建一个图表，一定要写图表的宽高

<div id="vegpie-chart" style=" width:100%;height: 376px"></div>

第三步

在methods中获取绘制

 var vegChart = this.$echarts.init(document.getElementById('vegpie-chart'));

 var vegetables = {
                    backgroundColor: '#000000',
                    color: ['#377BFF', '#552BFB', '#FF4465', '#06F1E5', '#FFD300', '#65E566'],
                    legend: {
                        data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6']
                    },

                    series: [
                        {
                            name: '面积模式',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['50%', '50%'],
                            roseType: 'radius',
                            label: {
                                color: '#FFFFFF'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                smooth: 0.1,
                                length: 5,
                                length2: 10
                            },
                            data: [
                                {value: 20, name: '草莓180'},
                                {value: 18, name: '冬枣161'},
                                {value: 16, name: '葡萄120'},
                                {value: 14, name: '猕猴桃20'},
                                {value: 12, name: '青菜12'},
                                {value: 10, name: '马铃薯10'}

                            ]
                        }
                    ]
                }

 vegChart.setOption(vegetables);

就ok啦