图表option方法

• title: 配置图表的标题信息。

  • title: { text: '图表标题', // 主标题 subtext: '副标题', // 副标题 left: 'center', // 标题位置 top: 'top' // 标题位置 }

  • tooltip: 设置提示框（鼠标悬浮时显示的内容），支持多种形式的配置

    • tooltip: { trigger: 'axis', // 'item' | 'axis'，可以是单个数据项，或轴上的多个数据项 formatter: '{a} <br/>{b} : {c}', // 提示框的显示内容 axisPointer: { type: 'shadow' // 'line' | 'shadow' | 'cross'，指示线的类型 } }

  • tooltip: 设置提示框（鼠标悬浮时显示的内容），支持多种形式的配置

    • tooltip: { trigger: 'axis', // 'item' | 'axis'，可以是单个数据项，或轴上的多个数据项 formatter: '{a} <br/>{b} : {c}', // 提示框的显示内容 axisPointer: { type: 'shadow' // 'line' | 'shadow' | 'cross'，指示线的类型 } }

  • legend: 配置图例，通常用于显示各个系列的名称，并允许用户进行选择。

    • legend: { data: ['系列1', '系列2'], // 图例项的名称 orient: 'horizontal', // 图例的布局方式，'horizontal' 或 'vertical' top: 'top', // 图例的位置 left: 'center' }

  • legend: 配置图例，通常用于显示各个系列的名称，并允许用户进行选择。

    • legend: { data: ['系列1', '系列2'], // 图例项的名称 orient: 'horizontal', // 图例的布局方式，'horizontal' 或 'vertical' top: 'top', // 图例的位置 left: 'center' }

  • grid: 配置图表的网格区域，用来调整坐标轴的布局和图表的位置。

    • grid: { show: true, // 是否显示网格 top: '10%', // 网格顶部的距离 left: '10%', // 网格左侧的距离 right: '10%', // 网格右侧的距离 bottom: '10%' // 网格底部的距离 }

  • grid: 配置图表的网格区域，用来调整坐标轴的布局和图表的位置。

    • grid: { show: true, // 是否显示网格 top: '10%', // 网格顶部的距离 left: '10%', // 网格左侧的距离 right: '10%', // 网格右侧的距离 bottom: '10%' // 网格底部的距离 }

  • toolbox: 工具箱，可以添加保存、重置等功能按钮。

    • toolbox: { show: true, feature: { saveAsImage: {} } }

  • toolbox: 工具箱，可以添加保存、重置等功能按钮。

    • toolbox: { show: true, feature: { saveAsImage: {} } }

  • animation: 设置是否启用动画效果。

    • animation: true, // 默认为 true，开启动画

  • animation: 设置是否启用动画效果。

    • animation: true, // 默认为 true，开启动画

  • xAxis / yAxis: 用于设置直角坐标系的坐标轴。

    • xAxis: { type: 'category', // 'value' | 'category'，表示坐标轴类型 data: ['A', 'B', 'C', 'D'], // 类目轴显示的数据 axisLabel: { rotate: 45 // 坐标轴标签的旋转角度 } }, yAxis: { type: 'value' // 数值型坐标轴 }

  • xAxis / yAxis: 用于设置直角坐标系的坐标轴。

    • xAxis: { type: 'category', // 'value' | 'category'，表示坐标轴类型 data: ['A', 'B', 'C', 'D'], // 类目轴显示的数据 axisLabel: { rotate: 45 // 坐标轴标签的旋转角度 } }, yAxis: { type: 'value' // 数值型坐标轴 }

  • polar: 用于设置极坐标系。

    • polar: [{ radius: '60%', // 半径范围 center: ['50%', '50%'], // 极坐标系的中心点 }]

  • polar: 用于设置极坐标系。

    • polar: [{ radius: '60%', // 半径范围 center: ['50%', '50%'], // 极坐标系的中心点 }]

  • angleAxis / radiusAxis: 配置极坐标系的角度轴和半径轴。

    • angleAxis: { type: 'category', data: ['A', 'B', 'C'], }, radiusAxis: { type: 'value', }

  • angleAxis / radiusAxis: 配置极坐标系的角度轴和半径轴。

    • angleAxis: { type: 'category', data: ['A', 'B', 'C'], }, radiusAxis: { type: 'value', }

  • line: 折线图的系列配置。

    • series: [{ type: 'line', data: [20, 30, 40, 50], smooth: true, // 是否平滑曲线 lineStyle: { color: '#ff0000', // 线条颜色 } }]

  • line: 折线图的系列配置。

    • series: [{ type: 'line', data: [20, 30, 40, 50], smooth: true, // 是否平滑曲线 lineStyle: { color: '#ff0000', // 线条颜色 } }]

  • bar: 柱状图的系列配置。

    • series: [{ type: 'bar', data: [15, 25, 35, 45], itemStyle: { color: '#00ff00', // 柱子颜色 } }]

  • bar: 柱状图的系列配置。

    • series: [{ type: 'bar', data: [15, 25, 35, 45], itemStyle: { color: '#00ff00', // 柱子颜色 } }]

  • pie: 饼图的系列配置

    • series: [{ type: 'pie', radius: '50%', // 饼图的半径 data: [ {value: 335, name: 'A'}, {value: 234, name: 'B'}, {value: 154, name: 'C'} ], label: { formatter: '{b}: {d}%', // 饼图标签显示的内容 } }]

  • pie: 饼图的系列配置

    • series: [{ type: 'pie', radius: '50%', // 饼图的半径 data: [ {value: 335, name: 'A'}, {value: 234, name: 'B'}, {value: 154, name: 'C'} ], label: { formatter: '{b}: {d}%', // 饼图标签显示的内容 } }]

  • scatter: 散点图的系列配置。

    • series: [{ type: 'scatter', data: [[10, 20], [30, 40], [50, 60]], symbolSize: 10, // 散点的大小 itemStyle: { color: '#0000ff', } }]

  • scatter: 散点图的系列配置。

    • series: [{ type: 'scatter', data: [[10, 20], [30, 40], [50, 60]], symbolSize: 10, // 散点的大小 itemStyle: { color: '#0000ff', } }]

  • radar: 雷达图的系列配置。

    • series: [{ type: 'radar', data: [ {value: [50, 60, 70, 80], name: '系列1'}, {value: [30, 40, 50, 60], name: '系列2'} ] }]

  • radar: 雷达图的系列配置。

    • series: [{ type: 'radar', data: [ {value: [50, 60, 70, 80], name: '系列1'}, {value: [30, 40, 50, 60], name: '系列2'} ] }]

  • axisLabel: 坐标轴标签配置项。

    • js axisLabel: { show: true, // 是否显示坐标轴标签 rotate: 45, // 旋转角度 formatter: '{value} %', // 格式化坐标轴标签 }

  • axisLabel: 坐标轴标签配置项。

    • js axisLabel: { show: true, // 是否显示坐标轴标签 rotate: 45, // 旋转角度 formatter: '{value} %', // 格式化坐标轴标签 }

  • axisLine: 坐标轴轴线配置项。

    • axisLine: { show: true, // 是否显示轴线 lineStyle: { color: '#ff0000', width: 2, } }

  • axisLine: 坐标轴轴线配置项。

    • axisLine: { show: true, // 是否显示轴线 lineStyle: { color: '#ff0000', width: 2, } }

  • axisTick: 坐标轴刻度线配置项。

    • axisTick: { show: true, length: 5, lineStyle: { color: '#00ff00', } }

  • axisTick: 坐标轴刻度线配置项。

    • axisTick: { show: true, length: 5, lineStyle: { color: '#00ff00', } }

  • color: 设置图表的颜色主题，可以在全局或单个系列上进行配置

    • color: ['#ff0000', '#00ff00', '#0000ff'], // 图表的颜色数组

  • color: 设置图表的颜色主题，可以在全局或单个系列上进行配置

    • color: ['#ff0000', '#00ff00', '#0000ff'], // 图表的颜色数组

  • itemStyle: 用于设置单个图形项（如柱子、线条、散点等）的样式

    • itemStyle: { color: '#ff00ff', borderColor: '#000000', borderWidth: 2, }

  • itemStyle: 用于设置单个图形项（如柱子、线条、散点等）的样式

    • itemStyle: { color: '#ff00ff', borderColor: '#000000', borderWidth: 2, }

  • emphasis: 高亮状态的样式配置（鼠标悬停时）

    • emphasis: { itemStyle: { color: '#ff0000', }, label: { show: true, color: '#ffffff', } }

  • emphasis: 高亮状态的样式配置（鼠标悬停时）

    • emphasis: { itemStyle: { color: '#ff0000', }, label: { show: true, color: '#ffffff', } }

  • toolbox: 工具箱设置，支持保存图片、重置等功能

    • toolbox: { show: true, feature: { saveAsImage: {}, restore: {}, } }

  • toolbox: 工具箱设置，支持保存图片、重置等功能

    • toolbox: { show: true, feature: { saveAsImage: {}, restore: {}, } }

  • dataZoom: 数据缩放功能，可以缩放图表中的数据。

    • dataZoom: [{ type: 'slider', // 滑动条 show: true, xAxisIndex: [0], start: 0, end: 100, }]

  • dataZoom: 数据缩放功能，可以缩放图表中的数据。

    • dataZoom: [{ type: 'slider', // 滑动条 show: true, xAxisIndex: [0], start: 0, end: 100, }]

  • responsive: 是否响应屏幕尺寸变化。

    • responsive: true, // 开启响应式布局

  • responsive: 是否响应屏幕尺寸变化。

    • responsive: true, // 开启响应式布局

  • media: 媒体查询配置，可以根据不同屏幕尺寸调整配置。

    • media: [{ query: {maxWidth: 600}, option: { title: {text: '小屏幕'}, } }]

  • media: 媒体查询配置，可以根据不同屏幕尺寸调整配置。

    • media: [{ query: {maxWidth: 600}, option: { title: {text: '小屏幕'}, } }]