Echarts各类图表常用配置项说明，附示例代码

news2025/2/27 7:09:12

前言：

哈喽，大家好，我是前端菜鸟的自我修养！今天给大家分享【 Echarts各类图表常用配置项说明】，并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎收藏+关注哦 💕

🌈🌈文章目录

一、Echarts配置项详解

(一)标题组件title

(二)提示框组件tooltip

(三)图例组件legend

(四)工具箱toolbox

(五)直角坐标系内绘图网格grid

(六)X轴配置xAxis

(七)Y轴配置yAxis

(八)系列列表serise

二、配置示例代码

(一)折线图示例

1.示例代码

2.实现效果

(二)柱状图示例

1.示例代码

2.实现效果

(三)饼图示例

1.示例代码

2.实现效果

一、Echarts配置项详解

(一)标题组件title

1.text：主标题文本

2.subtext：副标题文本

3.left：标题的位置，可选：'left', 'right', 'center'

(二)提示框组件tooltip

1.trigger：触发类型：坐标轴触发，可选：'axis' 坐标轴触发，'item' 数据项触发

2.axisPointer{ // 坐标轴指示器配置项
type: 'shadow' // 指示器类型：'shadow' 阴影，可选：'line' 直线，'shadow' 阴影

}

(三)图例组件legend

1.data:[ ] 图例的数据数组

2.top:'bottom' // 图例的位置，可选：'top', 'bottom', 'left', 'right'

(四)工具箱toolbox

1.show:true 是否显示工具箱

2.feature: { //各工具配置项

mark: {show: true},

dataView: {show: true, readOnly: false}, // 数据视图工具，是否只读

magicType: {show: true, type: ['line', 'bar', 'stack']}, // 图表类型切换

restore: {show: true}, // 配置项还原工具

saveAsImage: {show: true} // 保存为图片工具

}

(五)直角坐标系内绘图网格grid

1.left:’3%’ // 网格左侧的距离

2.right：’3%’ //网格右侧的距离

3.bottom:’3%’ //网格底部的距离

4.containLabel: true // 网格区域是否包含坐标轴的刻度标签

(六)X轴配置xAxis

1.type:'category', // 类型：'category' 类目轴，'value' 数值轴

2.data:[ ], //类目数据

3.axisTick:{ //刻度线配置

alignWithLabel: true // 刻度线和标签是否对齐

}

(七)Y轴配置yAxis

1.type:value, // 类型：'category' 类目轴，'value' 数值轴

(八)系列列表serise

1.name: 系列名称,

2.type: ’bar’, // 类型：'bar' 柱状图，'line' 线图，'pie' 饼图等

3.barWidth: ‘20%’ //柱条宽度

4.data: [10, 52, 200, 334, 390] // 系列中的数据值

二、配置示例代码

(一)折线图示例

1.示例代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

option && myChart.setOption(option);

2.实现效果

(二)柱状图示例

1.示例代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
};

option && myChart.setOption(option);

2.实现效果

(三)饼图示例

1.示例代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};

option && myChart.setOption(option);