正文

轻松上手ECharts：学会数据转换，图表制作不求人

/0 浏览量
0410

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、散点图、地图等，可以满足不同场景下的数据可视化需求。本文将带你轻松上手 ECharts，从数据转换到图表制作，让你告别求助他人的烦恼。

数据转换

在 ECharts 中，数据转换是图表制作的第一步。以下是几种常见的数据转换方法：

1. 数组转换

ECharts 支持多种数组类型的转换，包括一维数组、二维数组、对象数组等。以下是一个一维数组的例子：

var data = [10, 20, 30, 40];

2. 对象转换

对象转换通常用于将数据转换为键值对形式。以下是一个对象转换的例子：

var data = [
  {name: 'A', value: 10},
  {name: 'B', value: 20},
  {name: 'C', value: 30}
];

3. JSON转换

JSON 转换是 ECharts 中最常用的数据转换方法之一。以下是一个 JSON 转换的例子：

var data = [
  {name: 'A', value: 10},
  {name: 'B', value: 20},
  {name: 'C', value: 30}
];

图表制作

学会了数据转换后，接下来就是制作图表了。以下是一些常见的 ECharts 图表类型及其制作方法：

1. 折线图

折线图用于展示数据随时间或其他连续变量的变化趋势。以下是一个折线图的例子：

var chart = echarts.init(document.getElementById('main'));
var option = {
  title: {
    text: '折线图示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'line',
    data: [5, 20, 36, 10, 10, 20]
  }]
};
chart.setOption(option);

2. 柱状图

柱状图用于展示不同类别或分组的数据对比。以下是一个柱状图的例子：

var chart = 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]
  }]
};
chart.setOption(option);

3. 饼图

饼图用于展示各部分占整体的比例。以下是一个饼图的例子：

var chart = 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: 5, name: '衬衫'},
        {value: 20, name: '羊毛衫'},
        {value: 36, name: '雪纺衫'},
        {value: 10, name: '裤子'},
        {value: 10, name: '高跟鞋'},
        {value: 20, name: '袜子'}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
chart.setOption(option);

总结

通过本文的介绍，相信你已经掌握了 ECharts 的基本使用方法。从数据转换到图表制作，ECharts 都能为你提供强大的支持。现在，你可以开始尝试制作各种图表，让你的数据可视化更加生动有趣。祝你学习愉快！

-- 展开阅读全文 --