Echart:选择区域

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"
              }