在vue中使用echarts饼图示例

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>

效果图

相关推荐
艾小码几秒前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅5 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
我是日安7 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia19 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙19 分钟前
JS设计模式指南
前端·javascript
Mintopia26 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人32 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
uhakadotcom35 分钟前
在python中,使用conda,使用poetry,使用uv,使用pip,四种从效果和好处的角度看,有哪些区别?
前端·javascript·面试
鹏多多38 分钟前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
吃饺子不吃馅1 小时前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试