正文

学会echarts，图表配置不求人：从入门到精通，全面解析echarts图表配置选项

/0 浏览量
0709

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、地图等，可以满足各种数据可视化的需求。学会 ECharts，不仅可以提升你的数据分析能力，还能让你的网页或应用程序更加生动有趣。本文将带你从入门到精通，全面解析 ECharts 图表配置选项。

一、ECharts 入门

1.1 ECharts 简介

ECharts 是由百度团队开发的一个开源可视化库，它具有以下特点：

  • 丰富的图表类型：支持折线图、柱状图、饼图、地图等多种图表类型。
  • 高度可定制：可以通过配置项对图表进行高度定制，满足个性化需求。
  • 跨平台：支持多种浏览器和操作系统，包括 Windows、Mac、Linux、iOS 和 Android。
  • 高性能：采用高性能的渲染引擎，可以快速渲染大量数据。

1.2 ECharts 安装

ECharts 支持多种安装方式，以下列举两种常见方式：

  • CDN 链接：通过 CDN 链接引入 ECharts，适用于在线演示或临时使用。
  • npm 包管理：通过 npm 包管理工具安装 ECharts，适用于开发环境。

二、ECharts 图表配置

2.1 基本配置

ECharts 图表的基本配置包括以下几个部分：

  • 图表类型：指定图表的类型，如折线图、柱状图等。
  • 数据：定义图表的数据，包括数据项、坐标轴等。
  • 坐标系：设置图表的坐标系，如直角坐标系、极坐标系等。
  • 系列：定义图表的系列，如折线系列、柱状系列等。
  • 配置项：对图表进行个性化配置，如颜色、字体、标签等。

2.2 图表类型详解

ECharts 支持多种图表类型，以下列举几种常见类型及其配置：

  • 折线图：通过折线连接数据点，展示数据的变化趋势。 
    
var option = {
xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
  type: 'value'
},
series: [{
  data: [820, 932, 901, 934, 1290, 1330, 1320],
  type: 'line'
}]
};
  • 柱状图：通过柱状条表示数据的大小，适用于比较不同类别的数据。 
    
var option = {
xAxis: {
  type: 'category',
  data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
  type: 'value'
},
series: [{
  data: [120, 200, 150, 80, 70],
  type: 'bar'
}]
};
  • 饼图：通过扇形区域表示数据的大小，适用于展示部分与整体的关系。 
    
var option = {
series: [{
  name: '访问来源',
  type: 'pie',
  radius: '55%',
  data: [
    {value: 235, name: '视频广告'},
    {value: 274, name: '联盟广告'},
    {value: 310, name: '邮件营销'},
    {value: 335, name: '直接访问'},
    {value: 400, name: '搜索引擎'}
  ]
}]
};

2.3 高级配置

ECharts 提供了丰富的配置项，以下列举一些高级配置：

  • 颜色：设置图表的颜色，可以通过颜色数组或颜色函数自定义颜色。
  • 字体：设置图表的字体样式，如字体大小、字体名称等。
  • 标签：设置图表的标签，如数据标签、提示框等。
  • 交互：设置图表的交互效果，如鼠标悬停、点击等。

三、ECharts 实战案例

3.1 数据可视化实战

以下是一个使用 ECharts 实现数据可视化的案例：

// 引入 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: 'ECharts 柱状图示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

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

3.2 地图可视化实战

以下是一个使用 ECharts 实现地图可视化的案例：

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

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

// 指定图表的配置项和数据
var option = {
  title: {
    text: 'ECharts 地图示例'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['北京', '天津', '上海', '重庆', '河北', '山西', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '海南', '四川', '贵州', '云南', '陕西', '甘肃', '青海', '台湾', '内蒙古', '广西', '西藏', '宁夏', '新疆', '香港', '澳门']
  },
  visualMap: {
    min: 0,
    max: 2000,
    left: 'left',
    top: 'bottom',
    text: ['高','低'],           // 文本，默认为数值文本
    calculable: true
  },
  series: [
    {
      name: '销量',
      type: 'map',
      mapType: 'china',
      roam: true,
      label: {
        show: true
      },
      data:[
        {name: '北京',value: Math.round(Math.random()*1000)},
        {name: '天津',value: Math.round(Math.random()*1000)},
        {name: '上海',value: Math.round(Math.random()*1000)},
        {name: '重庆',value: Math.round(Math.random()*1000)},
        {name: '河北',value: Math.round(Math.random()*1000)},
        {name: '山西',value: Math.round(Math.random()*1000)},
        {name: '辽宁',value: Math.round(Math.random()*1000)},
        {name: '吉林',value: Math.round(Math.random()*1000)},
        {name: '黑龙江',value: Math.round(Math.random()*1000)},
        {name: '江苏',value: Math.round(Math.random()*1000)},
        {name: '浙江',value: Math.round(Math.random()*1000)},
        {name: '安徽',value: Math.round(Math.random()*1000)},
        {name: '福建',value: Math.round(Math.random()*1000)},
        {name: '江西',value: Math.round(Math.random()*1000)},
        {name: '山东',value: Math.round(Math.random()*1000)},
        {name: '河南',value: Math.round(Math.random()*1000)},
        {name: '湖北',value: Math.round(Math.random()*1000)},
        {name: '湖南',value: Math.round(Math.random()*1000)},
        {name: '广东',value: Math.round(Math.random()*1000)},
        {name: '海南',value: Math.round(Math.random()*1000)},
        {name: '四川',value: Math.round(Math.random()*1000)},
        {name: '贵州',value: Math.round(Math.random()*1000)},
        {name: '云南',value: Math.round(Math.random()*1000)},
        {name: '陕西',value: Math.round(Math.random()*1000)},
        {name: '甘肃',value: Math.round(Math.random()*1000)},
        {name: '青海',value: Math.round(Math.random()*1000)},
        {name: '台湾',value: Math.round(Math.random()*1000)},
        {name: '内蒙古',value: Math.round(Math.random()*1000)},
        {name: '广西',value: Math.round(Math.random()*1000)},
        {name: '西藏',value: Math.round(Math.random()*1000)},
        {name: '宁夏',value: Math.round(Math.random()*1000)},
        {name: '新疆',value: Math.round(Math.random()*1000)},
        {name: '香港',value: Math.round(Math.random()*1000)},
        {name: '澳门',value: Math.round(Math.random()*1000)}
      ]
    }
  ]
};

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

四、总结

通过本文的学习，相信你已经对 ECharts 图表配置有了全面的认识。ECharts 是一个功能强大的可视化库，通过合理配置，可以轻松实现各种数据可视化效果。希望本文能帮助你更好地掌握 ECharts，为你的数据分析之路提供有力支持。

-- 展开阅读全文 --