# Chart 图表组件
基于 ECharts 封装,支持自动响应式缩放。
# 基础用法
hide code
<template>
<ctc-chart :opt="chartOption" width="100%" height="400px" />
</template>
<script>
export default {
data() {
return {
chartOption: {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["A", "B", "C", "D", "E"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10],
},
],
},
};
},
};
</script>
# 属性 (Props)
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | 图表宽度 | String | 100% |
| height | 图表高度 | String | 300px |
| opt | ECharts 配置项 (option) | Object | {} |
| deepWatch | 是否深度监听 opt 变化 | Boolean | true |
| notMerge | ECharts setOption 的 notMerge | Boolean | false |
| echarts | 外部传入的 echarts 对象 | Object | null |
# 方法 (Methods)
| 方法名 | 说明 | 参数 |
|---|---|---|
| resize | 手动触发图表 resize | - |
| init | 手动初始化图表 | - |