正文

轻松上手ECharts：教你数据转换小技巧，图表制作不求人

/0 浏览量
0420

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括但不限于折线图、柱状图、饼图、散点图等。使用 ECharts 可以让我们轻松地将数据转换为直观的图表，帮助用户更好地理解数据背后的信息。本文将为你介绍一些数据转换小技巧，让你能够轻松上手 ECharts，制作出精美的图表。

数据准备与转换

在使用 ECharts 制作图表之前，我们需要先将数据准备好。这通常包括以下几个步骤：

1. 数据清洗

在获取数据后，我们首先需要对数据进行清洗。这包括去除重复数据、处理缺失值、格式化数据等。以下是一个简单的 JavaScript 代码示例，用于去除重复数据：

const data = [1, 2, 2, 3, 4, 4, 4, 5];

const uniqueData = [...new Set(data)];

console.log(uniqueData); // 输出: [1, 2, 3, 4, 5]

2. 数据格式化

ECharts 需要的数据格式通常是数组或对象数组。以下是一个将普通数据格式化为 ECharts 所需格式的示例：

const data = [
  { name: 'A', value: 12 },
  { name: 'B', value: 5 },
  { name: 'C', value: 7 }
];

const formattedData = data.map(item => ({
  name: item.name,
  value: item.value
}));

console.log(formattedData);
// 输出: [{ name: 'A', value: 12 }, { name: 'B', value: 5 }, { name: 'C', value: 7 }]

ECharts 图表制作

在数据准备完毕后，我们可以开始使用 ECharts 制作图表。以下是一些常见图表的制作方法：

1. 柱状图

柱状图常用于展示不同类别之间的数量或大小比较。以下是一个简单的柱状图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: '柱状图示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. 饼图

饼图常用于展示不同类别在总体中的占比。以下是一个简单的饼图示例：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入饼图
require('echarts/lib/chart/pie');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: '饼图示例'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 10,
    data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        {value: 335, name: '衬衫'},
        {value: 310, name: '羊毛衫'},
        {value: 234, name: '雪纺衫'},
        {value: 135, name: '裤子'},
        {value: 1548, name: '高跟鞋'},
        {value: 1548, name: '袜子'}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

总结

通过本文的介绍，相信你已经对 ECharts 数据转换和图表制作有了初步的了解。在实际应用中，你可以根据自己的需求选择合适的图表类型，并通过调整配置项来美化图表。希望这些技巧能帮助你轻松上手 ECharts，制作出精美、实用的图表！

-- 展开阅读全文 --