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,
            },
          },
]

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

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

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

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在Vue使用echarts实现折线图,你需要按照以下步骤进行操作: 1. 首先,安装echarts库。你可以使用npm或yarn来安装echarts,具体命令如下: ``` npm install echarts ``` 或 ``` yarn add echarts ``` 2. 在Vue组件引入echarts库。你可以在组件的`<script>`标签使用`import`语句引入echarts库,如下所示: ```javascript import echarts from 'echarts'; ``` 3. 在Vue组件的模板准备一个具备大小的容器div,用于显示折线图。你可以给这个div设置一个id,如`main`,并设置宽度和高度,如下所示: ```html <template> <div id="app"> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px; height: 400px"></div> </div> </template> ``` 4. 在Vue组件的`mounted`钩子函数编写代码来绘制折线图。你可以使用`echarts.init`方法初始化一个echarts实例,并传入容器的id,如`main`。然后,使用`setOption`方法设置折线图的配置项,如x轴、y轴、数据等,如下所示: ```javascript export default { name: 'YourComponentName', mounted() { this.$nextTick(function () { let charts = echarts.init(document.getElementById('main')); charts.setOption({ // 设置折线图的配置项 // ... }); }); }, }; ``` 通过以上步骤,你就可以在Vue使用echarts实现折线图了。记得根据你的需求修改折线图的配置项,以及在`setOption`方法设置相应的数据。 #### 引用[.reference_title] - *1* *3* [vue如何使用echarts——以折线图为例](https://blog.csdn.net/weixin_61032994/article/details/124023735)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [在Vue使用Echarts](https://blog.csdn.net/qq_36538012/article/details/109571270)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

xvzhengyang

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

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

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

打赏作者

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

抵扣说明:

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

余额充值