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

前端菜鸟的自我修养

于 2024-06-20 09:30:03 发布

阅读量1.1k

点赞数 64

分类专栏： GIS地图与大数据可视化文章标签： echarts 信息可视化前端 vue.js 大屏端大数据 javascript

本文链接：https://blog.csdn.net/2301_78542842/article/details/139807923

版权

GIS地图与大数据可视化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

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

🌈🌈文章目录

一、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);