vue整合echarts

1.安装echarts

npm install echarts --save

2.去echarts官网：https://echarts.apache.org/zh/index.html 找到自己想要的图表我这里以饼形图为例!

#建立一个装载echarts的容器
<div id="main" :style="{ float: 'left', width: '100%', height: '400px' }"></div>

#在script中引入echarts
import * as echarts from "echarts";

export default {
    #等页面渲染完之后调用echarts生成图表
    mounted() {
        this.initecharts()
    },
    methods: {
        initecharts(){
            #获取到装载echarts的容器
            var chartDom = document.getElementById('main');
            #初始化容器
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '消费对比表',
                    subtext: '每天12点更新',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 11, name: '已支付' },
                            { value: 12, name: '未支付' },
                            { value: 13, name: '已退款' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            #数据装载
            option && myChart.setOption(option);
        }
    }
}

3.最终效果

喜欢的点个赞哈