echarts饼图

饼图

给饼图一个盒子

<template>
    <!-- 饼图盒子 -->
    <div id="main">
    </div>
</template>

给盒子渲染上图形和数据

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      option: {
        // 鼠标放在图上显示的数据
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}:{c} ({d}%)'
        },
        // 旁边的颜色和文字
        legend: {
          orient: 'vertical',
          y: 'bottom',
          left: 'right',
          data: [], // 存放数据名称
          textStyle: {
            color: '#eee' 
          }
        },
        series: [
          {
            name: '类型/数量', // 鼠标放在图上显示的名字
            type: 'pie',
            radius: ['50%', '75%'], // 一个数据为饼图 两个数据为环图
            avoidLabelOverlap: false,
            // 图的位置，距离左跟上的位置
            center: ['40%', '50%'],
            label: {
              show: false,
              position: 'center'
            },
            data: []
          }
        ]
        // // 设置饼图块的颜色 固定颜色
        // color: ['red', 'orange', 'yellow', 'green', 'indigo', 'purple']
      }
    }
  },
  created () { },
  async mounted () {  //注意 在这里拿取 渲染数据
  //给每一个数据具体的颜色
    const typeColorObj = {
      'SD': '#208eff',
      'TD': '#ff6249',
      'FS': '#fd875c',
      'HAS': '#8accfc',
      'AS': '#da6fd9',
      'HS': '#34cd37',
      'TD': '#71a4ff',
      'OSP': '#f92f2f',
      'LT1': '#d02b81',
      'LT2': '#bb55d5',
      'LT3': '#dc5e61',
    }

    let myChart = echarts.init(document.getElementById('main'))

    // 从localStorage获取userId
    let userId = localStorage.getItem('userId')
    let config = {
      headers: { 'userId': userId }
    }
    const { data: res } = await this.$http.get('byProd', config)
    // 获取饼图数据
    let _this = this
    let data = []
    let legData = []
    res.data.forEach(function (elem, index) {
      let formatData = {
        name: elem.name,
        value: elem.value,
        //自定义颜色
        itemStyle: {
          color: typeColorObj[elem.name]
        }
      }
      data.push(formatData)
      legData.push(formatData.name)
    })
    console.log(res.data)
    _this.option.series[0].data = data
    _this.option.legend.data = legData

    // 5. 展示数据
    myChart.setOption(this.option)
  }
}
</script>

饼图形状的颜色有两种写法：

1、为数据固定颜色

data:[
	{name: '你好', value: 155, itemStyle:{ color: '#000'}},
	{name: '哈哈', value: 166, itemStyle:{ color: '#fff'}}
]

2、不为数据固定颜色

option:{
	color: ['red', 'orange', 'yellow', 'green', 'indigo', 'purple']
}