echarts玫瑰图

最新推荐文章于 2024-08-20 16:30:31 发布

小小小菜鸟1997

最新推荐文章于 2024-08-20 16:30:31 发布

阅读量679

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HuLuWa1997/article/details/116989093

本文介绍了如何利用ECharts库创建美观的玫瑰图，展示数据的分布情况。通过实例代码和配置选项，详细讲解了绘制过程，帮助读者掌握ECharts在数据可视化中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  // 饼状图
      var = pieOption{
        color: ['#A52A2A', '#8B4513', '#F7571F', '#FBA61F', '#7FFF00', '#006400', '#0C73A5', '#18A55E'],
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '分布占比:{b} <br/>占比:{d}%',
        //   transitionDuration: 0
        // },
        legend: [
          {
            top: 'center',
            right: '50',
            orient: 'vertical',
            icon: 'circle',
            textStyle: {
              fontSize: 8,
              color: '#fff'
            },
            data: ['钢铁', '有色', '石化', '焦化']
          },
          {
            top: 'center',
            right: '0',
            orient: 'vertical',
            icon: 'circle',
            textStyle: {
              fontSize: 8,
              color: '#fff'
            },
            data: ['火电', '水泥', '冶炼', '锅炉']
          }
        ],
        series: [
          {
            name: '分布占比',
            type: 'pie',
            radius: [10, 60],
            center: ['35%', '55%'],
            roseType: 'area',
            data: [
              { value: 10, name: '钢铁' },
              { value: 10, name: '有色' },
              { value: 5, name: '石化' },
              { value: 5, name: '焦化' },
              { value: 15, name: '火电' },
              { value: 5, name: '水泥' },
              { value: 25, name: '冶炼' },
              { value: 25, name: '锅炉' }
            ],
            label: {
              show: true,
              formatter: '{d}%'
            },
            itemStyle: {
              // emphasis: {
              //   shadowBlur: 10,
              //   shadowOffsetX: 0,
              //   shadowColor: 'rgba(0, 0, 0, 0.5)'
              // },
              normal: {
                label: {
                  show: true,
                  formatter: '{c}%'
                },
                labelLine: { show: true }
              }
            }
          }
        ]
      },
            $(function () {
            let cityCharts = echarts.init(document.getElementById('cityChart'))
                cityCharts.setOption(cityOption)
                window.onresize = cityCharts.resize
        })