Vue ECharts markline设置为legend - 附完整示例

ECharts：一个基于 JavaScript 的开源可视化图表库。

目录

 效果

一、介绍

1、官方文档：Apache ECharts

 二、准备工作

1、安装依赖包

2、示例版本 

三、完整示例

---

 效果

一、介绍

1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

 

 二、准备工作

1、安装依赖包

npm install echarts --save

2、示例版本 

"echarts": "^5.4.2",

三、完整示例

<template>
  <div id="main"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "forExample",
  data() {
    return {
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      const data = [50, 64, 96, 80, 70, 82, 73];
      const meanValue = data.reduce((pre, cur) => pre + cur, 0) / data.length;

      option = {
        tooltip: {},
        legend: {
          data: [
            { name: "Sale" },
            {
              /* TIP: 设置虚线 */
              name: "平均值",
              lineStyle: {
                type: "dotted",
                width: 3,
                color: "#fd0100",
              },
            },
          ],
          selectedMode: false, //图例选择模式关闭
        },
        xAxis: {
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {},
        series: [
          {
            name: "Sale",
            type: "bar",
            data,
            markLine: {
              lineStyle: {
                color: "#fd0100",
                width: 3,
                height: 14,
              },
              data: [
                {
                  yAxis: meanValue,
                },
              ],
              label: {
                position: "insideEndTop",
                formatter: (params) => "平均值：" + params.value,
                padding: [0, 20, 0, 0],
                fontSize: 18,
                distance: 0,
              },
            },
          },
          {
            /* TIP: 增加的series */
            type: "line",
            symbol: "none",
            name: "平均值",
            color: "transparent",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
#main {
  width: 1000px;
  height: 500px;
}
</style>

 欢迎扫码下方二维码关注VX公众号