Echarts配置项怎么设置

ECharts 配置项通过 option 对象设置，以下是核心配置项及设置方法：

一、基础配置

• 标题（title）：设置图表主副标题、位置及样式。

  title: {
    text: '主标题',
    subtext: '副标题',
    left: 'center', // 位置：left/center/right
    textStyle: { color: '#333', fontSize: 16 }
  }
  

• 提示框（tooltip）：配置鼠标悬停时的提示信息。

  tooltip: {
    trigger: 'axis', // 触发类型：axis（坐标轴）/item（数据项）
    formatter: '{b}月：{c}万元' // 格式化字符串，{b}为类目名，{c}为数值
  }
  

• 图例（legend）：标识不同数据系列，支持点击切换显示。

  legend: {
    data: ['系列1', '系列2'], // 与 series.name 对应
    top: 'top', // 位置：top/bottom/left/right
    orient: 'horizontal' // 排列方向：horizontal/vertical
  }
  

二、坐标轴配置（直角坐标系）

• X轴（xAxis）：设置类目轴或数值轴。

  xAxis: {
    type: 'category', // 类目轴（如文本）
    data: ['周一', '周二', '周三'], // 类目数据
    axisLabel: { rotate: 30 } // 标签旋转角度
  }
  

• Y轴（yAxis）：数值轴默认，可设置对数轴等。

  yAxis: {
    type: 'value', // 数值轴
    min: 0, // 最小值
    max: 100 // 最大值
  }
  

三、数据系列（series）

• 基础配置：每个系列对应一种图表类型和数据。

  series: [
    {
      name: '销量', // 与 legend.data 对应
      type: 'bar', // 图表类型：bar/line/pie 等
      data: [50, 60, 70], // 数据数组
      itemStyle: { color: '#2ec7c9' } // 系列样式
    }
  ]
  

• 高级配置：支持标记点、趋势线等。

  series: [{
    type: 'line',
    data: [12, 34, 22, 45],
    smooth: true, // 平滑曲线
    markPoint: { data: [{ type: 'max', name: '最大值' }] } // 标记最大值
  }]
  

四、交互与工具

• 工具箱（toolbox）：添加保存图片、数据视图等工具。

  toolbox: {
    feature: {
      saveAsImage: {}, // 保存为图片
      dataView: { readOnly: true } // 数据视图
    }
  }
  

• 响应式适配：监听窗口变化调整图表大小。

  window.addEventListener('resize', () => {
    myChart.resize();
  });
  

五、完整示例（柱状图）

var option = {
  title: { text: '月度销售额', left: 'center' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['销售额'], top: 'bottom' },
  grid: { left: '3%', right: '4%', bottom: '3%' },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月']
  },
  yAxis: { type: 'value' },
  series: [{
    name: '销售额',
    type: 'bar',
    data: [120, 200, 150]
  }]
};

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