echart中常见参数配置以及vue中的引用

一，在vue项目中安装，并在全局main。js中引入。
二，使用。

 <div ref="chartPackageCircle" style="width:100%;height:376px"></div>

 getEchartDataCircle() {
      // 饼图
      const chart = this.$refs.chartPackageCircle
      if (chart) {
        var myChartCircle = this.$echarts.init(chart)
        myChartCircle.setOption(this.optionCir);
        window.addEventListener("resize", function() {
          myChartCircle.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function() {
          myChartCircle.resize();
        });
      })

      optionCir: {
        title: { // 图表的标题，可以居左 居右 居中
          text: '同名数量统计',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: { // echart中图形的上下左右的边距等的设置
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'85',
          containLabel: true
        },
        legend: { // 右侧色块
          orient: 'vertical',
          x: "right", // 显示位置 left right center
          y: 'bottom', // y轴位置 top middle bottom
          type: 'scroll',
          // right: 10, // 显示位置距离右边10
          // top: 20, // 显示位置距离上边20
          // bottom: 20,// 显示位置距离下边20
          data: [ "潘蒋奚", "邬窦·苏", "袁华", "施贝", "常褚"], // 色块的名字色块名字必须与series中的data下的name一致，不然无法显示
        },
        series: [ // 这里放的是图表数据
          {
            name: '姓名',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            label: {
              normal: {
                show: true,
                formatter: '{b}: {c}({d}%)'
              }
              // {a}：系列名。
              // {b}：数据名。
              // {c}：数据值。
              // {@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
              // {@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。
            data: [{
              name: "潘蒋奚",
              value: 82704
            },{
              name: "邬窦·苏",
              value: 71689
            },{
              name: "袁华",
              value: 5881
            },{
              name: "施贝",
              value: 44769
            },{
              name: "常褚",
              value: 59775
            }],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }