Antv G2V VUE下折线图+柱状图等自定义tooltip和自定义主题

最新推荐文章于 2024-04-03 09:56:09 发布

原创最新推荐文章于 2024-04-03 09:56:09 发布

· 2k 阅读

2 ·

版权

文章标签：

#echarts #vue.js #javascript

JavaScript 同时被 3 个专栏收录

36 篇文章

订阅专栏

前端

29 篇文章

订阅专栏

小工具

15 篇文章

订阅专栏

这篇博客展示了如何利用ECharts库创建一个动态显示号位与平均用时的间隔图表。通过设置数据、调整颜色、配置提示框以及应用交互，实现了数据的可视化展示，使得数据的比较和理解更加直观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

在这里插入图片描述

          this.chart = new Chart({
        container: "ItemGroupAverageTime",
        autoFit: true,
      });
      var chart = this.chart;
      chart.data(this.data);
      chart.scale("平均用时", {
        nice: true,
      });
      chart.tooltip({
        showMarkers: false,
        shared: true,
        itemTpl: `
    <div style="margin-bottom: 10px;list-style:none;">
    <span style="background-color:{color};" class="g2-tooltip-marker"></span>
    {name}: {value}
    </div>
    `,
      });
      chart
        .interval()
        .position("号位*平均用时")
        .color("name")
        .adjust([
          {
            type: "dodge",
            marginRatio: 0,
          },
        ])
        .tooltip("号位*平均用时", (号位, 平均用时) => {
          // tooltip的第一个参数写上需要显示的字段'item1*item2*...'；第二个参数为一个函数，该函数的参数为需要显示的字段。
          return {
            name: 号位,
            value: 平均用时 + "秒", // 这里也可以通过调用其他自定义函数的方式，去对数据进行更深层次的变换。但要注意this的指向问题！
          };
        });
      chart.interaction("active-region");
      chart.theme({
        styleSheet: {
          brandColor: "#FF6B3B",
          paletteQualitative10: [
            "#FF6B3B",
            "#626681",
            "#FFC100",
            "#9FB40F",
            "#76523B",
            "#DAD5B5",
            "#0E8E89",
            "#E19348",
            "#F383A2",
            "#247FEA",
          ],
          paletteQualitative20: [
            "#FF6B3B",
            "#626681",
            "#FFC100",
            "#9FB40F",
            "#76523B",
            "#DAD5B5",
            "#0E8E89",
            "#E19348",
            "#F383A2",
            "#247FEA",
            "#2BCB95",
            "#B1ABF4",
            "#1D42C2",
            "#1D9ED1",
            "#D64BC0",
            "#255634",
            "#8C8C47",
            "#8CDAE5",
            "#8E283B",
            "#791DC9",
          ],
        },
      });

      chart.render();