极致呈现系列之:Echarts饼图的千变万化

目录

  • 创建一个最简单的饼图
  • 美化饼图
    • 修改颜色
    • 修改饼图的边框线条样式
    • 修改饼图的标签样式
    • 添加饼图的阴影效果
    • 添加修改饼图的图例样式
  • 添加交互
  • 饼图的变化
    • 环形图
    • 动画装饰仪表盘

创建一个最简单的饼图

这个没什么好说的,懂的都懂,直接上代码

//安装 Echarts
npm install echarts --save

在 Vue 组件中引入 Echarts 并创建一个简单的饼图,代码如下:

<template>
  <div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const chart = ref(null)
onMounted(() => {
  const myChart = echarts.init(chart.value)
  const option = {
    series: [
      {
        type: 'pie',
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ]
      }
    ]
  }
  myChart.setOption(option)
})

运行代码,效果如下
极致呈现系列之:Echarts饼图的千变万化_第1张图片

美化饼图

修改颜色

通过设置color属性来修改饼图的颜色

const option = {
    color: ['#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
    series: [
      {
        type: 'pie',
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ], 
      }
    ]
  }

极致呈现系列之:Echarts饼图的千变万化_第2张图片

修改饼图的边框线条样式

通过设置 itemStyle 属性中的 borderWidthborderColor 来修改饼图的边框线条样式。

const option = {
    color: ['#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
    series: [
      {
        type: 'pie',
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        }
      }
    ]
  }

极致呈现系列之:Echarts饼图的千变万化_第3张图片

修改饼图的标签样式

通过设置 label 属性中的 colorfontSizefontWeight 等属性来修改饼图的标签样式。

 series: [
      {
        type: 'pie',
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ], 
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        },
        label: {
          color: '#333',
          fontSize: 14,
          fontWeight: 'bold'
        },
      }
    ]

极致呈现系列之:Echarts饼图的千变万化_第4张图片

添加饼图的阴影效果

通过设置 itemStyle 属性中的 shadowBlurshadowColorshadowOffsetX 等属性来添加饼图的阴影效果。

series: [
      {
        type: 'pie',
        data: [
         //数据
        ],
        label: {
          // label配置项
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: '#fff', 
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 0,
          shadowOffsetY: 0
        }
      }
    ]

极致呈现系列之:Echarts饼图的千变万化_第5张图片

添加修改饼图的图例样式

通过设置 legend 属性中的 textStyle 属性来修改饼图的图例样式。

color: ['#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
legend: {
   textStyle: {
      color: '#333',
      fontSize: 14
   }
},
series: [
  //series代码块
]

极致呈现系列之:Echarts饼图的千变万化_第6张图片

添加交互

通过添加emphasis属性实现鼠标悬停高亮效果

series: [
      {
        type: 'pie',
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          color: '#333',
          fontSize: 14,
          fontWeight: 'bold'
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: '#fff',
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowOffsetX: 0,
          shadowOffsetY: 0
        }
      }
    ]

极致呈现系列之:Echarts饼图的千变万化_第7张图片

饼图的变化

环形图

环形图是一种基于饼图的图表类型,它可以将饼图的中间部分空出来,形成环形的效果。要创建环形图非常简单,只需要在series中添加radius配置项就可以了,代码如下

series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
       //...其他配置项代码
] 

极致呈现系列之:Echarts饼图的千变万化_第8张图片

动画装饰仪表盘

动画装饰仪表盘是一种基于饼图的图表类型,它可以将饼图的中间部分空出来,形成仪表盘的效果,并且可以通过动画效果让指针实时移动。以下是动画装饰仪表盘的代码:

<template>
  <div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const chart = ref(null) 
let angle = 0;//角度,用来做简单的动画效果的
let value = 55.33;
let myChart = ''
let option = {}
onMounted(() => {
  myChart = echarts.init(chart.value)
  option = {
    backgroundColor: "#061740",
    title: {
      text: '{a|' + value + '}{c|%}',
      x: 'center',
      y: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: 48,
            color: '#29EEF3'
          },
          c: {
            fontSize: 20,
            color: '#ffffff',
            // padding: [5,0]
          }
        }
      }
    }, 
    series: [{
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
            startAngle: (0 + angle) * Math.PI / 180,
            endAngle: (90 + angle) * Math.PI / 180
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    }, {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
            startAngle: (180 + angle) * Math.PI / 180,
            endAngle: (270 + angle) * Math.PI / 180
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    }, {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
            startAngle: (270 + -angle) * Math.PI / 180,
            endAngle: (40 + -angle) * Math.PI / 180
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    }, {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
            startAngle: (90 + -angle) * Math.PI / 180,
            endAngle: (220 + -angle) * Math.PI / 180
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    }, {
      name: "ring5",
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
        let point = getCirlPoint(x0, y0, r, (90 + -angle))
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4
          },
          style: {
            stroke: "#0CD3DB",//粉
            fill: "#0CD3DB"
          },
          silent: true
        };
      },
      data: [0]
    }, {
      name: "ring5",  //绿点
      type: 'custom',
      coordinateSystem: "none",
      renderItem: function (params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
        let point = getCirlPoint(x0, y0, r, (270 + -angle))
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4
          },
          style: {
            stroke: "#0CD3DB",      //绿
            fill: "#0CD3DB"
          },
          silent: true
        };
      },
      data: [0]
    }, {
      name: '吃猪肉频率',
      type: 'pie',
      radius: ['58%', '45%'],
      silent: true,
      clockwise: true,
      startAngle: 90,
      z: 0,
      zlevel: 0,
      label: { 
          position: "center", 
      },
      data: [{
        value: value,
        name: "",
        itemStyle: { 
            color: { // 完成的圆环的颜色
              colorStops: [{
                offset: 0,
                color: '#4FADFD' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#28E8FA' // 100% 处的颜色
              }]
            }, 
        }
      },
      {
        value: 100 - value,
        name: "",
        label: { 
            show: false 
        },
        itemStyle: { 
            color: "#173164" 
        }
      }
      ]
    },
    {
      name: "",
      type: "gauge",
      radius: "58%",
      center: ['50%', '50%'],
      startAngle: 0,
      endAngle: 359.9,
      splitNumber: 8, 
      axisTick: {
        show: false
      },
      splitLine: {
        length: 60,
        lineStyle: {
          width: 5,
          color: "#061740"
        }
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          opacity: 0
        }
      },
      detail: {
        show: false
      },
      data: [{
        value: 0,
        name: ""
      }]
    },
    ]
  }
  myChart.setOption(option)
})
//获取圆上面某点的坐标(x0,y0表示坐标,r半径,angle角度)
function getCirlPoint(x0, y0, r, angle) {
  let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
  let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
  return {
    x: x1,
    y: y1
  }
}
function draw() {
  angle = angle + 3
  myChart.setOption(option, true)
  //window.requestAnimationFrame(draw);
}
setInterval(function () {
  //用setInterval做动画感觉有问题
  draw()
}, 100);
</script>
<style scoped></style>

极致呈现系列之:Echarts饼图的千变万化_第9张图片

好了,由于篇幅的原因,饼图的相关内容就介绍到这里,其实关于饼图的变化还有很多,比如断开环形图、进度环形图等,有兴趣的小伙伴可以深入研究下

你可能感兴趣的:(Echarts,echarts,前端,javascript,vue.js,html5)