在vue中使用echarts饼图示例

有没有认真工作2024-03-27 10:21

1.安装

复制代码

npm install echarts --save

2.官方示例

javascript 复制代码

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

3.完整vue示例

javascript 复制代码

<template>
  <div class="controller">
    <div ref="mian" class="mian" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  created() {
    this.getdataSource()
  },
  methods: {
    async getdataSource() {
      const dataSource = { // 后端返回数据
        totalNum: 61,
        dataList: [
          {
            title: '足球',
            countNum: 5
          },
          {
            title: '篮球',
            countNum: 21
          },
          {
            title: '羽毛球',
            countNum: 35
          }
        ]
      }
      const data = dataSource.dataList.map(item => { // 后端返回数据处理
        return {
          value: item.countNum,
          name: `喜欢${item.title}${item.countNum}人`
        }
      })
      this.$nextTick(() => {
        const chartDom = this.$refs.mian
        const myChart = echarts.init(chartDom)
        const option = {
          title: {
            text: '',
            subtext: `参与投票(${dataSource.totalNum})人`,
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              data,
              // color: ['red', 'purple', 'yellow'], // 自定义颜色范围
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }

        option && myChart.setOption(option)
      })
    }
  }
}
</script>

<style lang="scss">
.controller {
  padding: 0 20px;
  .mian{
    width: 800px;
    height: 800px;
    margin: 20px auto;
  }
}
</style>

效果图