手绘echarts散点图

原创

已于 2023-06-02 14:09:18 修改 · 530 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

于 2023-06-02 14:05:13 首次发布

面对Echarts在数据较少时自动均匀分布散点图的问题，文章提出需求是希望X轴数据少时能依次排列而非扩展范围。文中以Vue.js的组件为例，展示了代码结构，并寻求解决方案，目前的实现包括计算Y轴位置和添加鼠标悬停效果来展示详细信息。

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

面对各种定制，echarts图表有时候不好处理，无论是数据处理还是样式处理，都会被echarts限制。

举例：echarts散点图如果数据较少，echarts会均匀分布，如图1

对于产品或者老板对页面的要求，认为中间空的太多，要求如果x轴的数据较少时，依次排开，如果用echarts的xAxis.max，只要数据中的 X 值超过了它，那么图表会自动扩展 X 轴范围，不能固定范围

在这里插入图片描述

直接看效果图

在这里插入图片描述

前端用的vue，数据结构仅供参考，可以自行修改

<div class="sku-supplier-chart">
        <div class="chart-count">Count</div>
        <div class="chart-yAxias">
          <div
            class="y-item"
            v-for="(item, index) in maxSupllierCount + 1"
            :key="index"
            :style="{
              bottom: `calc(${(index * 100) / maxSupllierCount}% - 12px)`,
            }"
          >
            {
  
  { index }}
          </div>
        </div>
        <div class="chart-content">
          <div
            class="item-line"
            :style="{ width: itemLineWidth + 'px' }"
            v-for="(item, index) in skuList"
            :key="index"
          >
            <template v-for="(dropItem, dropIndex) in item.supplierList">
              <el-popover
                :key="dropIndex"
                placement="top-start"
                :title="item.productNo"
                width="230"
                trigger="hover"
                content=""
              >
                <p>
                  <span style="font-weight: bold"
                    >{
  
  { currentDropItem.companyName }}: </span
                  ><span>{
  
  { currentDropItem.unitPrice }} </span>
                  <span>{
  
  { currentDropItem.unitPriceLov }}</span>
                </p>
                <div
                  slot="reference"
                  class="item-drop"
                  :key="dropIndex"
                  :style="{
                    bottom: `calc(${
                      (100 / maxSupllierCount) * (dropIndex + 1)
                    }% - 6px)`,
                    backgroundColor: dropItem.hexColor,
                  }"
                  @mouseover="mouseoverDropItem(dropItem)"
                  @mouseout="mouseoutDropItem(dropItem)"
                ></div>
              </el-popover>
            </template>

            <div class="sku-title">
              <span>{
  
  { item.productNo }}</span>
            </div>
          </div>
        </div>
      </div>

data(){
   
   
    return{
   
   
      skuList: [
          {
   
   
            rfqNo: "Test2304040004",
            productNo: "Test0430SKU0430SKU0",
            productName: "Mutton",
            rfqProQty: 1,
            supplierList: [
              {