
<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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/114741?site