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

效果图

相关推荐
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui
尝尝你的优乐美6 小时前
vue3.0中h函数的简单使用
前端·javascript·vue.js
windy1a6 小时前
【C语言】js写一个冒泡顺序
javascript