在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>

效果图

相关推荐
jingling5553 分钟前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
武昌库里写JAVA1 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Freedom风间5 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军6 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军6 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪6 小时前
SDK与API简单对比
前端·javascript·面试
BillKu6 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
亭台烟雨中7 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron