echarts 悬浮框数据添加单位

最新推荐文章于 2024-08-29 08:41:00 发布

明天的明天5812

最新推荐文章于 2024-08-29 08:41:00 发布

阅读量1.2k

点赞数 3

分类专栏： echarts 文章标签：前端

本文链接：https://blog.csdn.net/weixin_40705802/article/details/117367507

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文展示了如何使用ECharts库创建一个动态的折线图，用于显示某楼盘的销售情况，包括意向、预购和成交的数据。通过自定义tooltip的formatter函数，实现了详细的数据显示，同时配置了图表的布局、工具箱等功能。

摘要由CSDN通过智能技术生成

效果图

代码：

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <style>
          body{
            display: flex;
            justify-content: center;
            align-items: center;
          }
          #container{
            height: 80%;
            width: 60%;
          }
        </style>
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly@5.1.2-dev.20210512/dist/echarts.min.js"></script>
        <script type="text/javascript">
              var dom = document.getElementById("container");
              var myChart = echarts.init(dom);
              var app = {};
              var option;
              option = {
                  title: {
                      text: '某楼盘销售情况',
                      subtext: '纯属虚构'
                  },
                  tooltip: {
                      trigger: 'axis',
                      //主要代码
                      formatter: function(params) {
                    　　var result = params[0].axisValue + "<br/>"
                    　　params.forEach(function (item) {
                    　　　　result += item.marker + item.seriesName + "：" + item.data + "w" +"<br/>"
                    　　})
                    　　return result
                      }
                  },
                  legend: {
                      data:['意向','预购','成交']
                  },
                  toolbox: {
                      show: true,
                      feature: {
                          magicType: {show: true, type: ['stack', 'tiled']},
                          saveAsImage: {show: true}
                      }
                  },
                  xAxis: {
                      type: 'category',
                      boundaryGap: false,
                      data: ['周一','周二','周三','周四','周五','周六','周日']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      name: '成交',
                      type: 'line',
                      smooth: true,
                      data: [10, 12, 21, 54, 260, 830, 710]
                  },
                  {
                      name: '预购',
                      type: 'line',
                      smooth: true,
                      data: [30, 182, 434, 791, 390, 30, 10]
                  },
                  {
                      name: '意向',
                      type: 'line',
                      smooth: true,
                      data: [1320, 1132, 601, 234, 120, 90, 20]
                  }]
              };

              if (option && typeof option === 'object') {
                  myChart.setOption(option);
              }

        </script>
    </body>
</html>