Vue + ECharts 饼形图配置详解

Vue + ECharts 饼形图配置详解

引用

CSDN

1.

https://m.blog.csdn.net/w_jiunian/article/details/140347300

ECharts 是一个基于 JavaScript 的开源可视化库，可以流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。Vue.js 是一个用于构建用户界面的渐进式框架。两者结合使用，可以快速开发出功能丰富、交互友好的数据可视化应用。

下面是一个使用 Vue 和 ECharts 创建饼形图的配置示例：

import { EChartsOption, graphic } from 'echarts'
import rightCircle from '@/assets/imgs/index/right_circle.png'

export const pieOption: EChartsOption = {
  title: {
    text: '100%',
    subtext: '游客加量',
    left: '19%',
    top: '42%',
    textStyle: {
      fontSize: 24,
      color: '#fff',
      align: 'center',
      fontWeight: 700
    },
    subtextStyle: {
      fontSize: 16,
      color: '#fff',
      align: 'center',
      fontWeight: 500
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    top: '30%',
    left: '60%', // left给成right，直接会出现在图表右侧，但是图例的色块也会出现在文字的右侧
    textStyle: {
      //图例中文字的样式
      color: "#ffffff",
      fontSize: 14,
      fontWeight: 500,
      lineHeight: 20
    },
    itemWidth: 12, // 设置图例颜色块的宽度
    itemHeight: 12, // 设置图例颜色块的高度
    itemStyle: {
      borderRadius: 2
    },
    formatter: function (name) { // 设置图例展示方式
      let target
      let sum = 0
      let durationArray = pieOption.series[0].data
      for (let i = 0; i < durationArray.length; i++) {
        sum += durationArray[i].value
        if (durationArray[i].name == name) {
          target = durationArray[i].value
        }
      }
      let params = `${name}   ${((target / sum) * 100).toFixed(2) + '%'}`
      let tmp = params.split('\n')
      let res = '' + params
      for (let i in tmp) {
        res = res.replace(tmp[i], ' ')
      }
      console.log('sdsd', res+params)
      return res + params + '\n' + target + '人次'
    }
  },
  graphic: [ // 设置图表外层背景
    {
      type: 'image',
      left: '3%',
      top: '16%',
      z: -10,
      bounding: 'raw',
      rotation: 0, //旋转
      // origin: [510, 100], //中心点
      scale: [1.1, 1.1], //缩放
      style: {
        // 背景图
        image: rightCircle,
        opacity: 1
      }
    }
  ],
  series: [
    {
      left: '-45%',
      type: 'pie',
      radius: ['50%', '40%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '国内游客' },
        { value: 735, name: '国外游客' },
        { value: 580, name: '港澳台游客' }
      ]
    }
  ]
}

这个配置示例展示了如何创建一个带有标题、图例和自定义样式的饼形图。通过调整 title、legend、graphic 和 series 等配置项，可以实现丰富的图表效果。