Echarts饼状图属性设置大全_echarts radius

最新推荐文章于 2024-05-16 22:19:16 发布

2401_85012504

最新推荐文章于 2024-05-16 22:19:16 发布

阅读量852

点赞数 3

分类专栏： 2024年程序员学习文章标签：物联网嵌入式硬件面试

本文链接：https://blog.csdn.net/2401_85012504/article/details/138926917

版权

2024年程序员学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

如果你需要这些资料，可以戳这里获取

        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
        orient: 'vertical',
        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
        x: 'left',
        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
        y: 'center',
        itemWidth: 24,   // 设置图例图形的宽
        itemHeight: 18,  // 设置图例图形的高
        textStyle: {
          color: '#666'  // 图例文字颜色
        },
        // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
        itemGap: 30,
        backgroundColor: '#eee',  // 设置整个图例区域背景颜色
        data: ['北京','上海','广州','深圳','郑州']
      },


3、值域设置

      series: [
        {
          name: '生源地',
          type: 'pie',
          // radius: '50%',  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
          radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
          center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
          data: [
              {value:335, name:'北京'},
              {value:310, name:'上海'},
              {value:234, name:'广州'},
              {value:135, name:'深圳'},
              {value:148, name:'郑州'}
          ],
          // itemStyle 设置饼状图扇形区域样式
          itemStyle: {
            // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(30, 144, 255，0.5)'
            }
          },
          // 设置值域的那指向线
          labelLine: {
            normal: {
              show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
            }
          },
          // 设置值域的标签
          label: {
            normal: {
              position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
              // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
              // {a}指series.name  {b}指series.data的name
              // {c}指series.data的value  {d}%指这一部分占总数的百分比
              formatter: '{c}'
            }
          }
        }
      ],


radius: '50%',  的时候：


![](https://img-blog.csdn.net/20180909195348617?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NsZWVwd2Fsa2VyXzE5OTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


radius: ['30%', '60%'],  的时候：


![](https://img-blog.csdn.net/2018090919531773?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NsZWVwd2Fsa2VyXzE5OTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


4、提示框设置

      tooltip: {
        // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
        trigger: 'item',
        showDelay: 20,   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
        hideDelay: 20,   // 隐藏延迟，单位ms
        backgroundColor: 'rgba(255,0,0,0.7)',  // 提示框背景颜色
        textStyle: {
          fontSize: '16px',
          color: '#000'  // 设置文本颜色 默认#FFF
        },
        // formatter设置提示框显示内容
        // {a}指series.name  {b}指series.data的name
        // {c}指series.data的value  {d}%指这一部分占总数的百分比
        formatter: '{a} <br/>{b} : {c}个 ({d}%)'
      },


![](https://img-blog.csdn.net/20180909195443971?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NsZWVwd2Fsa2VyXzE5OTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)


5、默认色板

color: [‘#7EC0EE’, ‘#FF9F7F’, ‘#FFD700’, ‘#C9C9C9’, ‘#E066FF’, ‘#C0FF3E’]