ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-08-14 15:01:21  阅读:531  来源: 互联网

标签:name show normal 环形 value 指示 广告 true 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里面调用函数

标签:name,show,normal,环形,value,指示,广告,true,echarts
来源: https://blog.csdn.net/qq_42177730/article/details/99569431

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有