echarts实战：饼图引导线、文字与图例，柱形图格式化图例

2023-02-05 13:05:09

使用 ECharts 在 Vue 中绘制美观的饼图和柱形图

引言

可视化在数据分析和展示中至关重要。ECharts 是一款功能强大的 JavaScript 库，允许您轻松创建交互式且美观的图表。本博客将逐步指导您如何在 Vue 中使用 ECharts 绘制饼图和柱形图，同时涵盖添加引导线、文字、图例和自定义选项等高级功能。

创建饼图

1. 导入 ECharts

<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>

2. 创建饼图

const myChart = echarts.init(document.getElementById('myChart'));

const option = {
  title: {
    text: '饼图示例'
  },
  series: [{
    type: 'pie',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 274, name: '联盟广告' },
      { value: 235, name: '视频广告' },
      { value: 1548, name: '搜索引擎' }
    ]
  }]
};

myChart.setOption(option);

添加引导线和文字

添加引导线和文字可以增强可读性和信息性。

const option = {
  title: {
    text: '饼图示例'
  },
  series: [{
    type: 'pie',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 274, name: '联盟广告' },
      { value: 235, name: '视频广告' },
      { value: 1548, name: '搜索引擎' }
    ],
    label: {
      show: true,
      position: 'inside',
      formatter: '{b}: {c}'
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

添加图例

图例可以帮助识别不同数据集。

const option = {
  title: {
    text: '饼图示例'
  },
  legend: {
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [{
    type: 'pie',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 274, name: '联盟广告' },
      { value: 235, name: '视频广告' },
      { value: 1548, name: '搜索引擎' }
    ],
    label: {
      show: true,
      position: 'inside',
      formatter: '{b}: {c}'
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

创建柱形图

柱形图用于比较类别数据。

const myChart = echarts.init(document.getElementById('myChart'));

const option = {
  title: {
    text: '柱形图示例'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
};

myChart.setOption(option);

格式化图例

图例格式化可以使您的图表更易于阅读。

const option = {
  title: {
    text: '柱形图示例'
  },
  legend: {
    data: ['销量'],
    formatter: function (name) {
      return name + ': ￥1000';
    }
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar',
    data: [10, 52, 200, 334, 390, 330, 220],
    label: {
      show: true,
      position: 'top',
      formatter: '{c}'
    }
  }]
};