vue3.0 中使用 百度Echarts 制作图表

1.安装

npm install echarts --save

2.引入    另  import echarts from 'echarts'

var echarts = require("echarts");

3.容器

<div id="echarts-01" class="Echart01" ref="Echart01"></div>

 4.配置 写入setup

 data() {

    return {

      optionPie: null,

      echartsPie: null,

    };

  },

 methods: {

            initData() {

            //初始化echarts实例

                var my1 = echarts.init(this.$refs.Echart01);

                this.echartsPie = my1;

                this.optionPie = {

                    title: {

                        text: '饼图'

                    },

                    series: [{

            type: "pie",

            radius: ["30%", "85%"],

            center:["40%","50%"],            

            avoidLabelOverlap: false,

            // 标签

            label: {

              normal: {

                show: false,

                position: 'center'

              },

              emphasis: {

                show: true,

                // 自定义标签

                formatter: [

                  '{num|{d}'+'%}',

                  '{bt|{b}}'

                ].join('\n'),

                rich: {

                  num:{

                    fontSize: '24',

                    lineHeight:'100'

                  },

                  bt: {

                    fontSize: '30'

                  }

                }

              }

            },

                        data: [

                            { name: "智联招聘", value: 600,selected:false },

                            { name: "51job", value: 310,selected:false },

                            { name: "拉钩", value: 200,selected:false },

                            { name: "Boss直聘", value: 800,selected:false }

                        ]

                    }]

                };

             

                //使用制定的配置项和数据显示图表

                this.echartsPie.setOption(this.optionPie);

            },

  },

 最后记得调用

  mounted() {

    this.initData();

  },