{b}: {c} ({d}%)" }, legend: {//配置图例 orient: 'vertical', x: 'l..._echarts环形图逆时针">
当前位置:   article > 正文

echarts-环形图基础(一)_echarts环形图逆时针

echarts环形图逆时针
  1. app.title = '环形图';
  2. var option = {
  3.     tooltip: {
  4.         trigger: 'item',
  5.         formatter: "{a} <br/>{b}: {c} ({d}%)"
  6.     },
  7.     legend: {//配置图例
  8.           orient: 'vertical',
  9.           x: 'left',
  10.           itemWidth: 25,       //图例大小  我这里用的是圆
  11.           itemGap:15,        //图例之间的间隔
  12.           icon: "circle",              //图例的形状,选择类型有:"circle"(圆形)、"rectangle"(长方形)、"triangle"(三角形)、"diamond"(菱形)、"emptyCircle"(空心圆)、
  13.                         //      "emptyRectangle"(空心长方形)、"emptyTriangle"(空心三角形)、"emptyDiamon"(空心菱形),还可以放自定义图片,格式为"image://path",path为图片路径
  14.          data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
  15.     },
  16.     series: [                           //配置数据
  17.         {
  18.             name:'访问来源',
  19.             type:'pie',                 //设为饼图
  20.             radius: ['50%', '70%'],     //设置内半径和外半径,形成环状
  21.             clockWise:false,      //默认逆时针
  22.             avoidLabelOverlap: false,  //避免标注重叠
  23.             hoverAnimation: false,    //移入放大
  24.             label: {                   
  25.                 normal: {
  26.                     show: false,
  27.                     position: 'center'
  28.                 },
  29.                 emphasis: {             //鼠标移入时高亮时显示
  30.                     show: true,
  31.                     textStyle: {
  32.                         fontSize: '30',
  33.                         fontWeight: 'bold'
  34.                     }
  35.                 }
  36.             },
  37.             labelLine: {//视觉引导线
  38.                 normal: {
  39.                     show: false
  40.                 }
  41.             },
  42.             data:[//数据
  43.                 {value:335, name:'直接访问'},
  44.                 {value:310, name:'邮件营销'},
  45.                 {value:234, name:'联盟广告'},
  46.                 {value:135, name:'视频广告'},
  47.                 {value:1548, name:'搜索引擎'}
  48.             ]
  49.         }
  50.     ]
  51. };



声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/105425
推荐阅读