说明

ECharts封装，不需要再单独引入Echarts，只需给定配置即可，使用请参考官方文档

基本配置项

tooltip

配置提示框组件，显示提示信息。

      tooltip: {
  trigger: 'item',  // 数据项图形触发
  formatter: '{a} <br/>{b}: {c} ({d}%)'  // 格式化显示内容
}

legend

配置图例组件，展示系列名称，提供点击筛选的功能。

      legend: {
  orient: 'horizontal',  // 水平排列
  left: 'center',  // 居中显示
  data: ['系列1', '系列2', '系列3']  // 图例项
}

xAxis / yAxis (Array | Object)

配置 x 轴或 y 轴的属性。

      xAxis: {
  type: 'category',  // 类目轴
  data: ['A', 'B', 'C', 'D']  // 类目数据
}

series (Array)

配置图表的具体数据系列和类型。

      series: [
  {
    name: '系列1',
    type: 'bar',  // 设置为条形图
    data: [120, 200, 150, 80]  // 数据项
  }
]

grid (Object)

配置图表的网格区域，控制图表的位置和大小。

      grid: {
  left: '10%',  // 距离左侧的距离
  right: '10%',  // 距离右侧的距离
  bottom: '10%'  // 距离底部的距离
}

color (Array)

配置图表的配色方案，支持多种颜色。

      color: ['#5470C6', '#91CC75', '#EE6666']

title (Object)

配置标题组件，控制图表的主标题和副标题。

      title: {
  text: 'ECharts 示例',  // 主标题
  subtext: '副标题',  // 副标题
  left: 'center'  // 标题居中
}

toolbox (Object)

配置工具栏，可以包括保存、数据视图等功能。

      toolbox: {
  show: true,  // 显示工具栏
  feature: {
    saveAsImage: {  // 保存为图片
      show: true
    }
  }
}

animation (Boolean)

控制是否开启动画效果。

      animation: true  // 开启动画

backgroundColor (String)

设置图表背景色。

      backgroundColor: '#f4f4f4'  // 设置浅灰色背景

responsive (Boolean)

控制图表是否响应窗口大小变化。

      responsive: true  // 自动响应窗口大小变化

polar (Object)

配置极坐标系相关的设置。

      polar: {
  radius: '60%'  // 设置极坐标半径
}

这些参数是构建 ECharts 配置项时的常见元素。不同的图表类型（如柱状图、折线图、饼图等）可能会有更具体的配置选项，具体可以参考配置项。

使用示例 

      <template>
  <div>
    <ECharts :options= "option" height="400px" width="600px"></ECharts>
  </div>
</template>


<script setup lang="ts">
import ECharts from "liyao-vue-common"

  //自行修改...
const option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
}
</script>

声明

作者： liyao

版权：本博客所有文章除特别声明外，均采用CCBY-NC-SA4.O许可协议。转载请注明!

链接： https://vp.xiaoying.org.cn/pages/b25bff/

最后更新于 2025-09-30 20:31 history