Vue项目中使用echarts实现折线图中的标注线

        本文主要是讲在Vue项目中使用echarts实现折线图中带有标注线,如下图所示,先看下最终效果图;

 这里说两个地方:1.x周横坐标如何间隔显示,以及如何显示开始和结束(因为按照间隔设置的话,可能最后显示的不是我们想要显示的日期,所以这里顺便讲一下);2.就是标注线如何设置

老规矩,先上代码

 xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xDayList,
          axisLine: {
            // 坐标轴线
            show: false,
          },
          axisTick: {
            // 刻度线
            show: false,
          },
          axisLabel: {
            // 显示最小值
            showMinLabel: true,
            // 显示最大值
            showMaxLabel: true,
            // 间隔
            interval: 6,
            textStyle: {
              fontSize: "10",
              fontFamily: "PingFangSC-Regular, PingFang SC",
              fontWeight: "400",
              color: "rgba(0, 0, 0, 0.45)",
            },
          },
        },

从代码可以看到,x轴轴线,刻度线是否显示;x轴上数据最大值和最小值是否显示,以及间隔设置

再看y轴,这里主要说下如何把单位带上去,利用formatter;分割线就是上图中与x轴水平的线的样式设置splitLine

yAxis: {
          type: "value",
          axisLine: {},
          axisTick: {
            // 刻度线
            show: false,
          },
          axisLine: {
            // 轴线
            show: false,
          },
          axisLabel: {
            formatter: "{value}" + `${this.yUnit}`,
            textStyle: {
              fontSize: "11",
              fontFamily: "PingFangSC-Regular, PingFang SC",
              fontWeight: "400",
              color: "rgba(0, 0, 0, 0.45)",
            },
          },
          // 分割线
          splitLine: {
            lineStyle: {
              color: ["rgba(0,0,0,0.06)"],
              width: 1,
              type: "solid",
            },
          },
        },

ok,接下来看如何设置标注线,主要使用了markLine

{
            //symbol: "none", 去掉小圆点
            name: `${this.lineName}`,
            showSymbol: this.curveList.length == 1 ? true : false,
            data: this.curveList,
            type: "line",
            smooth: true,
            lineStyle: {
              normal: {
                color: `${this.lineColor}`, // 折线线条颜色:红色
              },
            },
            itemStyle: {
              color: `${this.lineColor}`,
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: `${this.areaStartColor}`,
                },
                {
                  offset: 1,
                  color: `${this.areaEndColor}`,
                },
              ]),
            },
            markLine: {
              symbol: "none", //去掉箭头
              itemStyle: {
                normal: {
                  lineStyle: {
                    // color: "red", 这是公共的,单独的话,需要单独设置
                  },
                  label: {
                    formatter: "",
                  },
                },
              },
              data: this.markLineDataList,
            },
          },

这里我们看data属性对应的值,是一个数组,里面就是想要展示的标注线的对象,如下图

{
         
          yAxis: y轴的坐标,
          lineStyle: {
            // 标记线颜色
            color: aqi.stand,
          },
}

基本上就可以实现上面的效果了;(当然yAxis也可以换成xAxis,这样就会显示竖直的线)

补充一下,这里的标注线,只有一个值,有时候我们可能需要的是一个开始和一个结束的两个不同的值;

[
          {
            xAxis: 0,
            yAxis: comfortLevel,
          },
          {
            label: {
              position: "end",
              formatter: " ",
            },
            xAxis: 30,
            yAxis: comfortLevel,
            name: "终点",
            lineStyle: {
              // 标记线颜色
              color: hcho.comfort,
            },
          },
]

此时不再是一个对象,而是使用一个数组,每一个数组里面包含了起点和终点坐标;

例如红框里面的那个标注线;

如有错误之处,欢迎指正,谢谢 

### 如何使用 ECharts 的 `markLine` 实现折线图效果 在 Vue 中集成 ECharts实现带有 `markLine` 功能的折线图是一项常见的需求。以下是关于如何通过 `markLine` 配置项标记特定数据点或区域的具体方法。 #### 使用 `markLine` 标记特殊日期 为了在 X 轴上标注某个特殊的日期(例如当前日期),可以利用 `markLine` 提供的功能。下面是一个完整的示例代码: ```javascript // 初始化图表实例 var myChart = echarts.init(document.getElementById('main')); // 定义选项对象 var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', markLine: { // 添加 markLine 配置 silent: true, lineStyle: { color: '#f00' // 设置线条颜色 }, label: { formatter: '今日警戒线' // 自定义标签文字 }, data: [ [{ xAxis: 'Today' }, { yAxis: 1000 }] // 指定位置 (xAxis 和 yAxis 坐标) ] } }] }; // 应用配置到图表实例 myChart.setOption(option); ``` 上述代码展示了如何通过 `markLine.data` 属性指定一条水平警戒线的位置[^2]。其中,`{xAxis: 'Today'}` 表示该警戒线位于 X 轴上的 "Today" 处;而 `{yAxis: 1000}` 则表示 Y 轴的高度为 1000。 #### 关于变量命名一致性的重要性 当调用 `setOption()` 方法时,请务必确认所使用的图表实例名称与初始化阶段一致。如果之前声明的是 `var myChart = echarts.init(...)`,那么后续操作也应基于此变量名执行[^3]。 #### 结合 Vue.js 构建动态交互式图表 对于 Vue 环境下的开发人员来说,通常会将 ECharts 图表嵌入组件之中,并借助生命周期钩子完成渲染逻辑。以下是一段简化版的 Vue 组件模板: ```html <template> <div id="chart-container"> <div ref="chart"></div> <!-- 渲染容器 --> </div> </template> <script> export default { mounted() { this.$nextTick(() => { const chartDom = document.querySelector('#chart-container'); var myChart = echarts.init(chartDom); let todayDate = new Date().toLocaleDateString(); // 获取当天日期 var option = { ... series: [{ ... markLine: { data: [[{ name: 'Current Day Marker', coord: [todayDate, null], // 将实际日期替换掉占位符 valueDim: 'x' }]] } }] }; myChart.setOption(option); }); } }; </script> ``` 以上片段说明了如何结合 JavaScript 动态计算得出今天的日期并将其作为坐标参数传递给 `markLine` 插件[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xvzhengyang

感谢,励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值