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

效果图

相关推荐
G等你下课15 分钟前
AJAX请求跨域问题
前端·javascript·http
阑梦清川16 分钟前
Java后端项目前端基础Vue(二)
vue.js
爱编程的喵19 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib21 分钟前
Flutter
开发语言·javascript·flutter
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了2 小时前
Vue 3 中的组件通信与组件思想详解
vue.js