echarts折线图底部标志

### 实现 ECharts 折线图并添加底部标志

为了实现在折线图的底部添加标志或标签的效果，可以利用 `ECharts` 的标记功能以及自定义图形属性来完成这一需求。具体来说，在配置项中的 `series` 部分加入 `markPoint` 或者 `markLine` 来指定特殊的数据点作为标志；如果希望这些标志显示在图表下方，则可以通过调整坐标轴和其他布局参数达到目的。

以下是具体的实现方法：

#### 导入必要的模块
首先确保已经正确导入了所需的 ECharts 组件[^2]：

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

接着还需要单独引入折线图组件以便后续使用：

import "echarts/lib/chart/line"; // 引入折线图
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";

#### 初始化图表实例与基础配置
创建一个新的 div 容器用于容纳图表，并通过 JavaScript 获取该容器节点初始化 ECharts 实例对象。

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
</script>

#### 设置数据序列及底部标志
对于想要展示于 X 轴上的特定位置处的文字说明或其他形式的小图标，可以在 series 中增加 markPoint 属性，并为其设定 position 参数为 bottom 表明其相对位置位于目标点之下方[^1]。

下面是一个完整的例子展示了如何在一个简单的折线图上添加几个固定的文本型标志到最下边的位置：

option = {
    title: { text: '带有底部标志的折线图' },
    tooltip: {},
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],
    yAxis: [{type: 'value'}],
    series: [{
        name:'销量',
        type:'line',
        data:[820, 932, 901, 934, 1290, 1330, 1320],
        markPoint: {
            symbolSize : 50,
            label:{
                normal:{show:true}
            },
            itemStyle: {
                color:'#FF0000'
            },
            data:[
                {name:"最大值", value:1290, coord:[4,1290],symbolOffset:[0,-20]},
                {name:"最小值", value:820, coord:[0,820],symbolOffset:[0,-20]}
            ]
        }
    }]
};
myChart.setOption(option);

在这个案例里，两个特殊的销售峰值被选作标志性事件，并且它们的名字（即“最大值”和“最小值”）会以红色大圆圈的形式出现在对应日期下的 Y 值附近，而通过设置 `symbolOffset` 可使标注更贴近X轴方向移动至适当距离外形成视觉上的“底部”。