vue项目中使用echarts图表

最近做了一个项目，研究了一下怎么使用echarts

官网地址：https://www.echartsjs.com/zh/index.html

1、在vue项目中安装echarts的包

npm install echarts --save

2、项目中引入echarts（全局），在main.js中

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

3、在项目中初始化echarts

1、首先需要在页面的template中创建一个div

<div id="main1" style="border: solid blue;display:inline-block;float:left;width:50%;height: 300px;margin-left: 600px"></div>

echarts的图表都在这个div中展示

2、在script中的methods中初始化图表数据

 methods: {
            //初始化数据
            initData(expenditures){
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById('main1'));
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '家庭账单支出情况',//主标题
                        subtext: '本月(单位: 元)',//副标题
                        x: 'center',//x轴方向对齐方式
                    },
                    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: expenditures,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            }
         }

这里需要强调一下，我这里没有给固定的数据，直接复制我这里的代码是没有效果的。expenditures是initData方法的参数，所有的图表数据都是这个参数传过来的

4、写方法，从后台获取数据

 async findExpenditure() {
                let {data} = await this.$http.get("/expenditure-service/expenditure/month");
                this.expenditures = data.data
                this.initData(this.expenditures);
            },

这里需要强调一下，this.expenditures是data中的数据，将后台获取到的数据先给data中的expenditures，再调用initData方法，给图表中的数据赋值

     data() {
            return {
                expenditures: []；
               
            }
        },

5、总结

官方实例图表实例的代码option中的数据只需要复制到setoption中就可以了

methods中的initData方法必须在查询数据的方法后面调用，不然会没有数据