echart玫瑰饼图，伪3D饼图

最新推荐文章于 2024-04-22 10:38:57 发布

陈十一i

最新推荐文章于 2024-04-22 10:38:57 发布

阅读量454

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/xu20166424/article/details/128396330

echarts 专栏收录该内容

5 篇文章

订阅专栏

这是一个使用Vue和ECharts库创建的示例，用于展示如何根据传入的数据绘制饼图。代码中定义了一个名为`drawLine`的方法，该方法初始化ECharts实例，设置配置项，包括颜色列表、数据和渐变色等，并在数据更新时重新绘制图表。示例数据包括水、电、煤和天然气的消耗量。

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

<template>
  <!-- 折线图 -->
  <div ref="line" class="line"></div>
</template>

<script>
// colorList  横条颜色数组
// data 数据 格式为： []
// areaStyle 渐变色
import * as echarts from 'echarts'
import { onMounted, reactive, toRefs, ref, watch } from 'vue'
export default {
  props: {
    areaStyle: {
      type: Array,
      default: () => {
        return []
      }
    },
    optionData: {
      type: Array,
      default: () => {
        return []
      }
    },
    colorList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  setup(props) {
    let line = ref('')
    const state = reactive({})

    // let series = []
    // props.data.forEach(item => {
    //   series.push({})
    // })
    const methods = {
      drawLine() {
        // 初始化
        var myChart = echarts.init(line.value)
        // 配置项
        var color = ['#FC4567', '#2F8DF4', '#C25EC4']

        let option = {
          color: color,
          // backgroundColor: '#0A173B',
          title: {
            show: false,
            text: '南丁格尔',
            left: 'center',
            top: '50%',
            textStyle: {
              fontSize: 22,
              color: '#fff',
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false,
            orient: 'vertical',
            right: 20,
            top: 20
          },
          series: [
            {
              type: 'pie',
              roseType: 'radius',
              radius: ['30%', '60%'],
              data: props.optionData,
              label: {
                normal: {
                  formatter: '{font|{b}}\n{hr|}\n{font|{d}%}',
                  rich: {
                    font: {
                      fontSize: 20,
                      padding: [5, 0],
                      color: '#fff'
                    },
                    hr: {
                      height: 0,
                      borderWidth: 1,
                      width: '100%',
                      borderColor: '#fff'
                    }
                  }
                }
              },
              labelLine: {
                // legend: 15,
                // legend2: 1,
                lineStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0,0,0,0.5)'
                }
              }
            }
          ]
        }

        myChart.clear()
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        window.onresize = function () {
          myChart.resize()
        }
      }
    }
    onMounted(() => {
      methods.drawLine()
    })

    watch(
      props,
      newVal => {
        if (newVal) {
          methods.drawLine() //调用ECharts的方法重新绘制
        }
      },
      {
        // 被侦听的内容需要是函数的写法 () => stuInfo.friend
        deep: true
      }
    )
    return {
      ...toRefs(state),
      ...methods,
      line
    }
  }
  // props: {
  //   styles: {
  //     type: Object,
  //     default: () => {
  //       return {}
  //     }
  //   },
  //   colorList: {
  //     type: Array,
  //     default: () => {
  //       return []
  //     }
  //   },
  //   datas: {
  //     type: Array,
  //     default: () => {
  //       return []
  //     }
  //   },
  //   title: {
  //     type: String,
  //     default: '标题'
  //   }
  // },
}
</script>

<style lang="scss" scoped>
.line {
  width: 100%;
  height: 100%;
}
</style>

需要传入一个数值数组