vue2使用echarts实现折线图图例，悬浮框，折线点改为不同点相同样式

1.效果

默认折线图效果，图例，悬浮框，折线点的图标样式改为不同形状

 改后的样式如下

 2.主要代码

2.1修改折线小圆点样式

设置以下俩个属性后即可实现

symbol:样式修改

symbolSize：小圆点大小

        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
            symbol: "circle",
            symbolSize: 10,
          },
]

图例和折现样式同步更改，但是悬浮框的样式还是没有改变 

 

2.2修改悬浮框样式

我这里提供了4个样式，分别对应的circle、rect、triangle、roundRect，直接拷贝就行

    tooltip: {
          trigger: "axis",
          formatter: (params) => {
            let dataStr = `<div>${params[0].name}</div>`;
            const iconStyles = {
              circle: (color) =>
                `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:50%; background-color:${color};"></span>`,
              square: (color) =>
                `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>`,
              triangle: (color) =>
                `<span style="display:inline-block;margin-right:5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid ${color};"></span>`,
              roundRect: (color) =>
                `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:30%;background-color:${color};"></span>`,
            };
            // 遍历每个系列数据，根据 index 显示不同样式
            params.forEach((item, index) => {
              let marker;
              if (index === 0) {
                marker = iconStyles.circle(item.color); // 圆形
              } else if (index === 1) {
                marker = iconStyles.square(item.color); // 正方形
              } else if (index === 2) {
                marker = iconStyles.triangle(item.color); // 三角形
              } else {
                marker = iconStyles.roundRect(item.color); // 三角形
              }

              dataStr += `
          <div>
            <div style="margin: 0 8px;">
              ${marker}
              <span>${item.seriesName}:</span>
              <span>${item.data}</span>
            </div>
          </div>
        `;
            });

            return dataStr;
          },
        },

3.完整代码

<!--
 * @Description:
 * @Author: guoxiaxue
 * @Date: 2025-01-07 13:45:59
 * @FilePath: \el-table-develop\src\App.vue
-->
<template>
  <div style="width: 100%; height: 100%">
    <div id="mycharts" ref="chart" style="width: 100%; height: 90vh"></div>
  </div>
</template>

<script>
import * as Echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.setEcharts();
  },
  methods: {
    setEcharts() {
      let myChart = Echarts.init(document.getElementById("mycharts"));
      let option = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
          formatter: (params) => {
            let dataStr = `<div>${params[0].name}</div>`;
            const iconStyles = {
              circle: (color) =>
                `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:50%; background-color:${color};"></span>`,
              square: (color) =>
                `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>`,
              triangle: (color) =>
                `<span style="display:inline-block;margin-right:5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid ${color};"></span>`,
              roundRect: (color) =>
                `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;border-radius:30%;background-color:${color};"></span>`,
            };
            // 遍历每个系列数据，根据 index 显示不同样式
            params.forEach((item, index) => {
              let marker;
              if (index === 0) {
                marker = iconStyles.circle(item.color); // 圆形
              } else if (index === 1) {
                marker = iconStyles.square(item.color); // 正方形
              } else if (index === 2) {
                marker = iconStyles.triangle(item.color); // 三角形
              } else {
                marker = iconStyles.roundRect(item.color); // 三角形
              }

              dataStr += `
          <div>
            <div style="margin: 0 8px;">
              ${marker}
              <span>${item.seriesName}:</span>
              <span>${item.data}</span>
            </div>
          </div>
        `;
            });

            return dataStr;
          },
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
            symbol: "circle",
            symbolSize: 10,
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
            symbol: "rect",
            symbolSize: 10,
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
            symbol: "triangle",
            symbolSize: 10,
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
            symbol: "roundRect",
            symbolSize: 10,
          },
        ],
      };
      myChart.setOption(option);
      myChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped></style>

有个问题，数据最高是410，但是y轴都标到800多了，我还以为是我写错了，但是看官网也是这样的，咋回事。。

原文地址：https://blog.csdn.net/qq_44278289/article/details/145141182

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！