echarts南丁格尔玫瑰图每块单独设置颜色

最新推荐文章于 2025-02-25 13:53:03 发布

程序媛七分

最新推荐文章于 2025-02-25 13:53:03 发布

阅读量4.8k

点赞数 2

分类专栏： eCharts实战扣出效果图文章标签： echarts 南丁格尔玫瑰图饼图 PieChart

本文链接：https://blog.csdn.net/rear0312/article/details/107708983

版权

扣出效果图同时被 2 个专栏收录

12 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

eCharts实战

10 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用Echarts为南丁格尔玫瑰图的每个扇区设置独立的颜色，以达到与UI设计图一致的效果。通过在数据项上添加itemStyle属性，并指定颜色，成功实现了颜色的个性化配置。

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

UI效果图：

我参照官网的例子，默认的颜色，出来之后的效果：

页面源代码：

<template>
    <div class="pieChart"  ref="pieChart">

    </div>
</template>
<script>
  import echarts from 'echarts'
  export default {
    name: "TEMPLATE",
    mounted(){
        this.showPieChart();
    },
    methods: {
      showPieChart() {
        var chart = echarts.init(this.$refs.pieChart);
        var option = {
          tooltip: {

了解本专栏