echarts环形图如何添加指示线指示文字

左侧为官网实例          右侧为项目要求 

写博客不是为了博眼球 是为了记笔记

echarts环形图如何添加指示线指示文字echarts环形图如何添加指示线指示文字

 

      <div id="Circlechart"></div>

      Circlelinechart(){
        let myChart = echarts.init(document.getElementById("Circlechart"));       
        let option = {
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
              orient: 'horizontal',
              x: 'center',
              y : 'bottom',
              data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series: [
              {
                  name:'访问来源',
                  type:'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                      normal: {
                          show: true,   
                          position: 'outside'
                      },
                      emphasis: {
                          show: true,
                          textStyle: {
                              fontSize: '30',
                              fontWeight: 'bold'
                          }
                      }
                  },
                  labelLine: {
                      normal: {
                          show: true,
                          length: 20,
                          length2: 20,
                          lineStyle: {
                              color: '#333'
                          }
                      }
                  },
                  data:[
                      {value:335, name:'直接访问'},
                      {value:310, name:'邮件营销'},
                      {value:234, name:'联盟广告'},
                      {value:135, name:'视频广告'},
                      {value:1548, name:'搜索引擎'}
                  ]
              }
          ]
        };
      myChart.setOption(option);
      },

 不要忘记在mounted里面调用函数

上一篇:oracle默认 用户名 / 密码 登录身份 说明


下一篇:vim 高级技巧