Echart:选择区域

最新推荐文章于 2024-04-19 16:09:26 发布
最新推荐文章于 2024-04-19 16:09:26 发布
阅读量2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44599809/article/details/90582238
本文展示了如何在ECharts中初始化一个饼图，用于显示一天的用电量分布。图表包括标题、子标题、工具提示、X轴和Y轴配置，并提供了保存为图片的功能。同时，通过监听`mousedown`和`click`事件，实现了对图表的选择区域和点击事件的响应。

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

data() {
return {
aaa: “”,
bbb: “”,
charts: “”,
ddd: [
[
{
name: 早高峰,
xAxis: “07:30”
},
{
xAxis: “10:00”
}
],
[
{
name: “晚高峰”,
xAxis: “17:30”
},
{
xAxis: “21:15”
}
]
]
};
},
methods: {
drawPie(id) {
this.charts = echarts.init(document.getElementById(id));
this.charts.setOption({
title: {
text: “一天用电量分布”,
subtext: “纯属虚构”
},
tooltip: {
trigger: “axis”,
axisPointer: {
type: “cross”
}
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: “category”,
boundaryGap: false,
data: [
“00:00”,
“01:15”,
“02:30”,
“03:45”,
“05:00”,
“06:15”,
“07:30”,
“08:45”,
“10:00”,
“11:15”,
“12:30”,
“13:45”,
“15:00”,
“16:15”,
“17:30”,
“18:45”,
“20:00”,
“21:15”,
“22:30”,
“23:45”
]
},
yAxis: {
type: “value”,
axisLabel: {
formatter: “{value} W”
},
axisPointer: {
snap: true
}
},

    series: [
      {
        name: "用电量",
        type: "line",
        smooth: true,
        data: [
          300,
          280,
          250,
          260,
          270,
          300,
          550,
          500,
          400,
          390,
          380,
          390,
          400,
          500,
          600,
          750,
          800,
          700,
          600,
          400
        ],
        markArea: {
          data: [
            [
              {
                name: "早高峰",
                xAxis: "07:30"
              },
              {
                xAxis: "10:00"
              }
            ],
            [
              {
                name: "晚高峰",
                xAxis: "17:30"
              },
              {
                xAxis: "21:15"
              }
            ]
          ]
        }
      },
      {
        name: "用水量",
        type: "line",
        smooth: true,
        data: [
          200,
          260,
          70,
          210,
          250,
          310,
          250,
          430,
          400,
          390,
          380,
          360,
          680,
          500,
          600,
          370,
          780,
          700,
          280,
          400
        ],
        markArea: {
          data: [
            [
              {
                name: "早高峰",
                xAxis: "02:30"
              },
              {
                xAxis: "05:00"
              }
            ],
            [
              {
                name: "晚高峰",
                xAxis: "12:30"
              },
              {
                xAxis: "15:00"
              }
            ]
          ]
        }
      }
    ]
  });
},
eConsole(param) {
  console.log(param);
  let _this = this;
  this.aaa = param.name;
  this.ddd = [
    [
      {
        name: `早高峰`,
        xAxis: "07:30"
      },
      {
        xAxis: "10:00"
      }
    ],
    [
      {
        name: "晚高峰",
        xAxis: "17:30"
      },
      {
        xAxis: "21:15"
      }
    ],
    [
      {
        name: param.value,
        xAxis: _this.aaa
      },
      {
        xAxis: _this.aaa
      }
    ]
  ];
  this.charts.on("mouseup", this.bbbb);
},
bbbb(param) {
  console.log(param);
  let _this = this;
  this.bbb = param.name;
  let num = 0;
  for (let i = 0; i < this.ddd.length; i++) {
    if (this.aaa === this.ddd[i][0].xAxis) {
      this.ddd[i][1].xAxis = this.bbb;
    }
  }
  this.charts.setOption({
    title: {
      text: "一天用电量分布",
      subtext: "纯属虚构"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "01:15",
        "02:30",
        "03:45",
        "05:00",
        "06:15",
        "07:30",
        "08:45",
        "10:00",
        "11:15",
        "12:30",
        "13:45",
        "15:00",
        "16:15",
        "17:30",
        "18:45",
        "20:00",
        "21:15",
        "22:30",
        "23:45"
      ]
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} W"
      },
      axisPointer: {
        snap: true
      }
    },

    series: [
      {
        name: "用电量",
        type: "line",
        smooth: true,
        data: [
          300,
          280,
          250,
          260,
          270,
          300,
          550,
          500,
          400,
          390,
          380,
          390,
          400,
          500,
          600,
          750,
          800,
          700,
          600,
          400
        ],
        markArea: {
          data: _this.ddd
        }
      }
    ]
  });
  this.charts.off("mousemove", this.cccc);
  this.charts.setOption({
    title: {
      text: "一天用电量分布",
      subtext: "纯属虚构"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "01:15",
        "02:30",
        "03:45",
        "05:00",
        "06:15",
        "07:30",
        "08:45",
        "10:00",
        "11:15",
        "12:30",
        "13:45",
        "15:00",
        "16:15",
        "17:30",
        "18:45",
        "20:00",
        "21:15",
        "22:30",
        "23:45"
      ]
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} W"
      },
      axisPointer: {
        snap: true
      }
    },

    series: [
      {
        name: "用电量",
        type: "line",
        smooth: true,
        data: [
          300,
          280,
          250,
          260,
          270,
          300,
          550,
          500,
          400,
          390,
          380,
          390,
          400,
          500,
          600,
          750,
          800,
          700,
          600,
          400
        ],
        markArea: {
          data: _this.ddd
        }
      }
    ]
  });
},
cccc(param) {
  let _this = this;
  let num = 0;
  for (let i = 0; i < this.ddd.length; i++) {
    if (this.aaa === this.ddd[i][0].xAxis) {
      this.ddd[i][1].xAxis = param.name;
    }
  }
  this.charts.setOption({
    title: {
      text: "一天用电量分布",
      subtext: "纯属虚构"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross"
      }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "01:15",
        "02:30",
        "03:45",
        "05:00",
        "06:15",
        "07:30",
        "08:45",
        "10:00",
        "11:15",
        "12:30",
        "13:45",
        "15:00",
        "16:15",
        "17:30",
        "18:45",
        "20:00",
        "21:15",
        "22:30",
        "23:45"
      ]
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} W"
      },
      axisPointer: {
        snap: true
      }
    },

    series: [
      {
        name: "用电量",
        type: "line",
        smooth: true,
        data: [
          300,
          280,
          250,
          260,
          270,
          300,
          550,
          500,
          400,
          390,
          380,
          390,
          400,
          500,
          600,
          750,
          800,
          700,
          600,
          400
        ],
        markArea: {
          data: _this.ddd
        }
      }
    ]
  });
  this.charts.on("mouseup", this.bbbb);
},
eClick(param) {
  console.log(param)
  debugger
  if (this.aaa && this.bbb) {
    this.charts.setOption({
      title: {
        text: "一天用电量分布",
        subtext: "纯属虚构"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "00:00",
          "01:15",
          "02:30",
          "03:45",
          "05:00",
          "06:15",
          "07:30",
          "08:45",
          "10:00",
          "11:15",
          "12:30",
          "13:45",
          "15:00",
          "16:15",
          "17:30",
          "18:45",
          "20:00",
          "21:15",
          "22:30",
          "23:45"
        ]
      },
      yAxis: {
        type: "value",
        axisLabel: {
          formatter: "{value} W"
        },
        axisPointer: {
          snap: true
        }
      },

      series: [
        {
          name: "用电量",
          type: "line",
          smooth: true,
          data: [
            300,
            280,
            250,
            260,
            270,
            300,
            550,
            500,
            400,
            390,
            380,
            390,
            400,
            500,
            600,
            750,
            800,
            700,
            600,
            400
          ],
          markArea: {
            data: [
              [
                {
                  name: "早高峰",
                  xAxis: "07:30"
                },
                {
                  xAxis: "10:00"
                }
              ],
              [
                {
                  name: "晚高峰",
                  xAxis: "17:30"
                },
                {
                  xAxis: "21:15"
                }
              ]
            ]
          }
        }
      ]
    });
  }
}

},
//调用
mounted() {
this.$nextTick(function() {
this.drawPie(“main1”);
this.charts.on(“mousedown”, this.eConsole);
this.charts.on(“click”, this.eClick);
});
}
};

echarts 柱状图（综合排行）
God's asylum的博客
05-25 117
ECharts柱状图综合排行实现 本文展示了使用ECharts创建多维度数据排行柱状图的方法。通过RankingChart类封装图表逻辑，支持展示综合排名、学科排名、科研排名和教学排名四个维度的数据对比。示例包含HTML页面结构和JavaScript实现代码，其中： 数据格式包含区域、图例和多维数据数组 图表容器采用100%宽高自适应布局 引入ECharts基础库和自定义图表类 支持GIF动画效果展示图表交互 实现要点包括动态数据绑定、响应式布局和可视化参数配置，适用于各类排名数据的对比展示需求。
echart dataZoom区域缩放
weixin_41195867的博客
06-17 2300
微信小程序场景遇到的问题： 使用dataZoom进行区域缩放，echart实例编辑器已编译出数据，但是在微信小程序上的显示，拖动数据区域，数据缺失，仅显示前3条！！！（echart实例编辑器：https://echarts.apache.org/examples/zh/editor.html?c=line-simple） 图片可以看出，微信上数据缺失； //代码片段 option = { xAxis: { type: 'category', data: ['Mon
echarts-for-react鼠标选中块状区域，并且获得当前区域起始和终止时间的值
weixin_43498392的博客
03-24 1766
echarts-for-react鼠标选中块状区域，并且获得当前区域起始和终止时间的值 如果是插件echarts-for-react，则先要安装插件，并且先引入 1.安装 yarn add echarts-for-react 2.引入 import ReactEcharts from 'echarts-for-react'; 2.使用 getPieOption = () => { ...
13-Echarts 配置系列之：区域选择组件 brush,数据刷选
youyudehan的博客
11-29 4568
快速全面了解 Echarts 中的 brush 刷选，进行数据刷选功能
echart中定义选中区域图标和事件
aliven1的博客
11-30 707
【代码】echart中定义选中区域图标和事件。
echarts中使用区域选择（brush）
热门推荐
weixin_43023873的博客
04-09 1万+
场景 在某些按周月年统计中，我们想看到任意某几天区域的数据总和时使用 效果 代码实现主要点 /*添加*/ brush: { toolbox: ['lineX', 'clear'], xAxisIndex: 0, throttleType: 'debounce',//开启选中延迟后调...
echarts无需手点缩放按钮，鼠标选中图表部分显示部分详情
xjh的博客
07-05 806
无需手点缩放按钮，鼠标选中图表部分显示部分详情
echart:学习echart.js中的一些心得
04-04
8. **组合图表**：ECharts允许在一个图表区域内组合多种图表类型，如折线图与柱状图的组合，通过设置`series`中的`type`属性来实现。 9. **地图图表**：ECharts内建了中国和世界地图，也可以自定义地图，用于展示...
echart地图上钻下钻分级
12-28
这种功能在地理数据分析、区域划分统计等场景中尤为实用。 地图上钻下钻通常涉及到以下几个核心概念： 1. **地图模板**：ECharts 提供了丰富的预定义地图，如中国、世界等，也可以自定义地图数据。这些地图模板是...
echart 所在的区域 双击全屏 tooltip失效了
最新发布
04-02
// 全屏操作时选择公共父容器 document.getElementById('chartContainer').requestFullscreen(); ``` ### 实现效果验证 1. tooltip在普通模式下正常显示 2. 进入全屏后tooltip跟随图表渲染 3. 退出全屏时tooltip...
使用python，选择excel文件，读取“Sheet1”中的C12:F18区域的表格，调用echart中的图表绘制折线统计图
03-23
代码首先使用openpyxl库读取excel文件，然后使用`iter_rows`方法读取C12:F18区域的数据。最后，使用pyecharts库绘制折线统计图，并将结果保存为`line_chart.html`文件。 需要注意的是，这个代码需要安装openpyxl和...
下拉框选择事件动态加载echart数据
01-22
通过下拉框异步刷新echart数据，原文地址http://blog.youkuaiyun.com/kebi007/article/details/52887570
根据daterangepicker选择的时间范围来决定echart图X轴的坐标
weixin_38588074的博客
03-30 746
根据daterangepicker选择的时间范围来决定echart图X轴的坐标
echarts区域选择(brush)
jyn15159的博客
05-06 2456
echarts区域选择(brush)，brush 是区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据，或者他们的一些统计计算结果
echarts多个地区合并并实现标注
liuy_1314的博客
09-29 2557
echarts多个地区合并并实现标注地图合并根据坐标定位标注更换成自己的图片 先备注几个地址 获取json：http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4 压缩json https://mapshaper.org/ 地图合并 参考：echarts合并地图，把中国各个省份分成华北,东北,华东,华中,华南,西南,西北七个大区 需要特别注意的是，json文件需
【自存】Echarts X轴 时间，自定义范围
weixin_45899313的博客
04-19 954
script// 年// 月// 日//20240101//echartsvar i = 0;i--;tooltip: {},xAxis: {boundaryGap: true, //留白},yAxis: {min: 0,max: 100,},.......// 切换页面后表格照常显示，可以再次初始化template。
转载：echarts图表grid区域以及x轴y轴详解
初心不改
08-24 4893
转载于：https://www.cnblogs.com/zqq-blog/p/10636102.html 原文地址：https://blog.youkuaiyun.com/luanpeng825485697/article/details/78886706 详细配置记录： mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"n
echarts 实现区域划分 折线图
晨曦月的博客
11-26 4314
先给出图表样式 这张图看上去是个普通的折线图，但是仔细看又有一些不同，首先它是有区域划分的，不同区域，对应的线条颜色不一样，其次y轴是自定义的，还有各种标记等，总之是有很多构思在里面。 echarts图例当中找了很多相似的折线图，但是都不能满足需求，于是动手自己绘制。 废话不多说，直接上代码，小伙伴们可以参考下： let dom = document.getElementById("ichart"); dom.style.width = window.innerWidth / 4 + "px";
[echarts] markArea显示不同颜色
qq_14993591的博客
03-22 1452
【代码】[echarts] markArea显示不同颜色。
Echart区域选中
05-26
Echarts支持通过区域选择组件来实现区域选中功能。区域选择组件可以绑定到指定的图表上，当用户通过鼠标在图表上进行拖拽时，可以选中指定区域。 以下是一个简单的示例，演示了如何在Echarts中使用区域选择组件实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值